/* ==========================================================================
   MI6 · webapp del fotógrafo · estilo CIB (branding kit + Wattson)
   Capas: 1 settings · 2 structure · 3 atoms · 4 molecules · 5 sections · 6 utilities
   ========================================================================== */

/* ---- 1. Settings ---------------------------------------------------------- */
@font-face { font-family: "MyriadPro"; font-weight: 400; font-display: swap; src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "MyriadPro-Cond"; font-weight: 400; font-display: swap; src: url("../fonts/MyriadPro-Cond.woff2") format("woff2"); }
@font-face { font-family: "MyriadPro-Cond"; font-weight: 700; font-display: swap; src: url("../fonts/MyriadPro-BoldCond.woff2") format("woff2"); }

:root {
   /* Negro y blanco como base (logo y fondo), un solo acento: el naranja de Wattson */
   --color-bg: #000;
   --color-surface: #111;
   --color-surface-2: #1c1c1c;
   --color-border: rgba(255, 255, 255, .2);
   --color-text: #fff;
   --color-muted: #a6a6a6;
   --color-brand: #fe3f00;
   --color-on: #14a76c;
   --color-warning: #ffc107;
   --color-danger: #e5372c;

   --font-body: "MyriadPro", "Myriad Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-cond: "MyriadPro-Cond", "Myriad Pro Condensed", "Arial Narrow", var(--font-body);
   --font-size-s: .9375rem;
   --font-size-m: 1.0625rem;
   --font-size-l: 1.5rem;
   --font-size-xl: 2.5rem;

   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-6: 24px;
   --space-10: 40px;

   --radius: 5px;
   --touch: 48px;
   --tabbar-height: 64px;
}

/* ---- 2. Structure --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
   margin: 0;
   min-height: 100dvh;
   background: var(--color-bg);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: var(--font-size-m);
   line-height: 1.4;
   -webkit-tap-highlight-color: transparent;
}

.str-main {
   max-width: 640px;
   margin: 0 auto;
   padding: var(--space-6) var(--space-4) calc(var(--tabbar-height) + var(--space-6) + env(safe-area-inset-bottom));
}

.h-title-app {
   margin: 0;
   padding-left: var(--space-3);
   border-left: 1px solid var(--color-border);
   font-family: var(--font-cond);
   font-size: 1.25rem;
   font-weight: 700;
   letter-spacing: .12em;
   line-height: 1;
   text-transform: uppercase;
}
.h-title-section {
   margin: 0 0 var(--space-4);
   font-family: var(--font-cond);
   font-size: var(--font-size-l);
   font-weight: 700;
   letter-spacing: .06em;
   line-height: 1.1;
   text-transform: uppercase;
}

.p-text { margin: 0 0 var(--space-3); }
.p-text-s { font-size: var(--font-size-s); }
.p-text--muted { color: var(--color-muted); }

a { color: inherit; }

/* ---- 3. Atoms ------------------------------------------------------------- */
.a-logo { display: block; width: auto; height: 26px; }

.a-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: var(--touch);
   padding: 0 var(--space-4);
   border: 1px solid var(--color-brand);
   border-radius: var(--radius);
   background: var(--color-brand);
   color: #fff;
   font-family: var(--font-cond);
   font-size: 1.125rem;
   font-weight: 700;
   letter-spacing: .06em;
   text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
   transition: filter .2s;
}
.a-btn:hover { filter: brightness(.9); }
.a-btn:focus-visible, .m-options__item:focus-visible, .m-tabbar__item:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.a-btn:active { transform: scale(.98); }
.a-btn--outline { background: transparent; border-color: #fff; color: #fff; }
.a-btn--ghost { background: transparent; border-color: transparent; color: var(--color-muted); }
.a-btn--small { min-height: 40px; padding: 0 var(--space-3); font-size: 1rem; }

.a-badge {
   display: inline-block;
   min-width: 20px;
   padding: 0 6px;
   border-radius: 10px;
   background: var(--color-brand);
   color: #fff;
   font-family: var(--font-body);
   font-size: 12px;
   letter-spacing: 0;
   line-height: 20px;
   text-align: center;
}

/* ---- 4. Molecules --------------------------------------------------------- */
.m-header {
   position: sticky;
   top: 0;
   z-index: 5;
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
   background: var(--color-bg);
   border-bottom: 1px solid var(--color-border);
}
.m-header__user { flex: 1; color: var(--color-muted); overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 419px) { .m-header__user { visibility: hidden; } }

.m-tabbar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 5;
   display: flex;
   height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
   padding-bottom: env(safe-area-inset-bottom);
   background: var(--color-bg);
   border-top: 1px solid var(--color-border);
}
.m-tabbar__item {
   flex: 1;
   border: 0;
   background: none;
   color: var(--color-muted);
   font-family: var(--font-cond);
   font-size: 1.125rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   cursor: pointer;
}
.m-tabbar__item.is-active { color: #fff; box-shadow: inset 0 3px 0 var(--color-brand); }

/* Tarjeta de cámara: sin sesión en negro; con sesión se rellena con color_bg / color_font de su producto (como Wattson) */
.m-camera {
   padding: var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
}
.m-camera--on {
   border-color: var(--product-bg, var(--color-border));
   background: var(--product-bg, var(--color-surface-2));
   color: var(--product-font, var(--color-text));
}
.m-camera__head { display: flex; align-items: baseline; gap: var(--space-3); }
.m-camera__head .p-text-s { color: var(--color-muted); }
.m-camera--on .m-camera__head .p-text-s { color: inherit; opacity: .85; }
.m-camera__code {
   font-family: var(--font-cond);
   font-size: var(--font-size-xl);
   font-weight: 700;
   letter-spacing: .02em;
   line-height: 1;
   text-transform: uppercase;
}
.m-camera__status { display: flex; flex-direction: column; margin: var(--space-3) 0 var(--space-4); color: var(--color-muted); }
.m-camera__status--on { color: inherit; }
.m-camera__program {
   font-family: var(--font-cond);
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 1.1;
   text-transform: uppercase;
}
.m-camera__warning { margin: 0 0 var(--space-3); color: var(--color-warning); font-size: var(--font-size-s); }
.m-camera__actions { display: flex; gap: var(--space-2); }
.m-camera__actions .a-btn { flex: 1; padding: 0 var(--space-2); letter-spacing: .03em; white-space: nowrap; }
/* Sobre el color del producto, botón en negro (el naranja chocaría) */
.m-camera--on .a-btn { border-color: #000; background: #000; color: #fff; }
.m-camera--on .a-btn--outline { border-color: currentColor; background: transparent; color: inherit; }

.m-notice {
   margin: 0 0 var(--space-4);
   padding: var(--space-3) var(--space-4);
   border-left: 3px solid var(--color-warning);
   background: var(--color-surface);
   color: #fff;
   font-size: var(--font-size-s);
}

.m-sheet {
   width: 100%;
   max-width: 640px;
   max-height: 85dvh;
   margin: auto auto 0;
   padding: 0;
   border: 0;
   border-top: 3px solid var(--color-brand);
   border-radius: 0;
   background: var(--color-surface);
   color: var(--color-text);
}
.m-sheet::backdrop { background: rgba(0, 0, 0, .75); }
.m-sheet__body { padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }

.m-options { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.m-options__item {
   display: flex;
   flex-direction: column;
   gap: 2px;
   width: 100%;
   min-height: var(--touch);
   padding: var(--space-3) var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface-2);
   color: var(--color-text);
   font: inherit;
   text-align: left;
   cursor: pointer;
}
.m-options__item:hover { border-color: #fff; }
.m-options__item--primary { margin-bottom: var(--space-3); border-color: var(--color-brand); }
.m-options__title { font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
.m-options__meta { font-family: var(--font-cond); font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.m-options__item--product {
   border-color: var(--product-bg, var(--color-border));
   background: var(--product-bg, var(--color-surface-2));
   color: var(--product-font, var(--color-text));
}
.m-options__item--product .m-options__title { font-size: 1.75rem; line-height: 1.1; }
.m-options__item--product:hover { filter: brightness(.92); }

.m-reedit { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.m-reedit__thumb { flex: 0 0 96px; width: 96px; height: 64px; border-radius: var(--radius); object-fit: cover; background: var(--color-surface-2); }
.m-reedit__body { min-width: 0; }
.m-reedit__body .p-text-s { margin: 0; overflow-wrap: anywhere; }
.m-reedit__reason { margin: 0 0 var(--space-1); font-weight: 700; }
.m-reedit__links { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.m-toast {
   position: fixed;
   left: var(--space-4);
   right: var(--space-4);
   bottom: calc(var(--tabbar-height) + var(--space-3) + env(safe-area-inset-bottom));
   z-index: 10;
   max-width: 608px;
   margin: 0 auto;
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius);
   background: #fff;
   color: #000;
   font-weight: 700;
}
.m-toast.is-error { background: var(--color-danger); color: #fff; }

/* ---- 5. Sections ---------------------------------------------------------- */
.s-cameras__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.s-reedits__list { margin: 0; padding: 0; list-style: none; }
.s-message { padding: var(--space-10) 0; text-align: center; }
.s-clock { text-align: center; }
.s-clock__time {
   margin: var(--space-6) 0;
   font-family: var(--font-cond);
   font-size: clamp(4rem, 24vw, 8rem);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
}

/* ---- 6. Utilities --------------------------------------------------------- */
.ut-full-width { width: 100% !important; }
.ut-text-center { text-align: center !important; }
.ut-pt-40 { padding-top: 40px !important; }

@media (prefers-reduced-motion: reduce) {
   .a-btn { transition: none; }
   .a-btn:active { transform: none; }
}