/* ============================================================================
 * VM Retail OS — capa propia sobre el sistema de Planning.
 *
 * app.css y components.css vienen TAL CUAL de planning.tradeinstyle.com.mx y
 * no se tocan: así, cuando ese sistema evolucione, se re-copian encima y esta
 * hoja sigue siendo lo único que hay que revisar.
 *
 * Aquí van dos cosas y nada más:
 *   1. El acento por unidad de negocio (Planning es una sola marca; Visual son
 *      tres y la persona debe reconocer de un vistazo en cuál está).
 *   2. Las pocas piezas que Planning no tiene porque no las necesita.
 * ========================================================================= */

/* ── 1 · Acento por unidad de negocio ────────────────────────────────────── */
/* Sale del dominio del correo (marca_de_usuario). Se re-define --accent, que
   es la variable que ya usan chips dorados, botones de acento y foco: cambiar
   el token pinta toda la interfaz sin tocar un solo componente. */
[data-marca="fitters"] {
    --accent:        #0F7B6C;
    --accent-strong: #0B6154;
    --accent-wash:   #E8F4F1;
    --accent-ink:    #0A5147;
}
[data-marca="hoven"] {
    --accent:        #8B2F5F;
    --accent-strong: #71264D;
    --accent-wash:   #F7EBF1;
    --accent-ink:    #5E1F40;
}
[data-marca="cabostyle"] {
    --accent:        #1F3A5F;
    --accent-strong: #172C48;
    --accent-wash:   #EAEFF5;
    --accent-ink:    #142440;
}
/* Filo de color en el rótulo del sidebar: es el recordatorio permanente de en
   qué unidad estás, sin ocupar un renglón de texto. */
[data-marca] .sidebar-marca { box-shadow: inset 3px 0 0 var(--accent); }

/* ── 2 · Piezas propias ──────────────────────────────────────────────────── */

/* KPI de unidad en el panel: la barra superior lleva el color de la MARCA de
   la tarjeta, no el del usuario — enseña las tres a la vez. */
.kpi-marca { border-top: 3px solid var(--line-strong); }
.kpi-marca.m-cabostyle { border-top-color: #1F3A5F; }
.kpi-marca.m-fitters   { border-top-color: #0F7B6C; }
.kpi-marca.m-hoven     { border-top-color: #8B2F5F; }

/* Selector de sucursales de una campaña, agrupado por marca. */
.grupo-sucursales {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    margin: 0;
    min-width: 0;
}
.grupo-sucursales legend {
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.grupo-sucursales .opcion { gap: var(--sp-2); }
.grupo-sucursales .opcion .codigo { flex: 0 0 auto; }

/* Zona dada de baja: sigue visible porque de su id cuelgan tareas y fotos,
   pero no debe competir con las activas. */
tr.apagada { opacity: .55; }

/* Enlace alterno bajo el formulario de entrada. */
.login-alterna { margin-top: var(--sp-4); }

/* Rótulo del sidebar. Planning lo dimensionó para UNA palabra («PLANNING»);
   «VM RETAIL OS» son tres y con .16em de tracking se partía en tres renglones.
   Se apilan título y subtítulo en una columna y se ajusta el tracking. */
.sidebar-marca .marca-texto { display: flex; flex-direction: column; min-width: 0; }
.sidebar-marca .marca-titulo {
    font-size: var(--fs-md);
    letter-spacing: .10em;
    white-space: nowrap;
}
.sidebar-marca .marca-sub { margin-top: 1px; white-space: nowrap; }

/* ── 3 · Evidencia fotográfica ───────────────────────────────────────────── */
/* Rejilla que se adapta sola: en el celular caben dos por renglón, en el
   escritorio cuatro o cinco. Sin media queries que mantener. */
.galeria{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:var(--sp-4);
    margin-top:var(--sp-2);
}
.foto{
    margin:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow-1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.foto > a{display:block;line-height:0;background:var(--surface-sunken)}
/* aspect-ratio fija el hueco ANTES de que cargue la imagen: sin esto la
   galería salta y reacomoda mientras bajan las miniaturas. */
.foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.foto figcaption{
    display:flex;flex-direction:column;gap:3px;
    padding:var(--sp-3);font-size:var(--fs-sm);
    border-top:1px solid var(--line);
}
.foto figcaption strong{font-weight:600;color:var(--ink)}
.foto figcaption .forma-en-linea{margin-top:var(--sp-1)}

/* ── 4 · Ficha de datos y directivas ─────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-3);margin:0;font-size:var(--fs-base)}
.ficha dt{color:var(--muted);font-size:var(--fs-sm)}
.ficha dd{margin:0;color:var(--ink)}

.directivas{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--sp-3)}
.directivas li{font-size:var(--fs-base)}
.directivas li strong{display:block;color:var(--ink);font-weight:600}
.directivas li span{display:block;color:var(--ink-2);margin-top:2px}

/* Sucursal sin zonas capturadas: el selector no sirve de nada y estorba. */
.sin-zonas select{opacity:.55}

/* ── 5 · Revisión ────────────────────────────────────────────────────────── */
/* La tarjeta de decisión lleva el filo del acento: es la acción de la pantalla
   para quien revisa, y debe encontrarse sin buscar. */
.tarjeta-revision{border-top:3px solid var(--accent)}

.historial{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.historial li{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-base)}
.historial .quien{color:var(--muted);font-size:var(--fs-sm)}
.historial p{margin:0;color:var(--ink-2)}

/* ── 6 · Banco Visual (propuestas de Creativo) ───────────────────────────── */
.propuesta{margin-bottom:var(--sp-5)}
.propuesta .tarjeta-cabecera{flex-wrap:wrap}

/* Tira de la paleta. El color entra por la variable --c, que la vista fija en
   el atributo style; el hex se valida en BoardService antes de llegar aquí. */
.tira-paleta{display:flex;gap:0;height:8px;overflow:hidden}
.tira-paleta .muestra{flex:1 1 0;background:var(--c)}
.tira-paleta.chica{height:12px;gap:3px;margin:2px 0}
.tira-paleta.chica .muestra{flex:0 0 18px;border-radius:3px}

.propuesta .foto figcaption{gap:5px}
.propuesta .foto img{aspect-ratio:3/4}

/* ── 7 · Propuesta Visual (generador) ────────────────────────────────────── */
#vistaPrevia img{width:100%;border-radius:var(--r);border:1px solid var(--line);
                 margin-bottom:var(--sp-4);display:block}
.campo-color .fila-color{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.campo-color input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--line-strong);
                               border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.muestras{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
          gap:var(--sp-2);margin-top:var(--sp-3)}
.muestra-caja{background:var(--c);color:var(--t);padding:var(--sp-3);border-radius:var(--r-sm);
              display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.muestra-caja strong{font-weight:600}
.muestra-caja span{opacity:.85;font-family:var(--font-mono);font-size:var(--fs-xs)}

/* El lienzo reserva el hueco ANTES de que llegue la imagen: sin esto la
   pantalla salta cada vez que termina un look. */
.look .lienzo{aspect-ratio:3/4;background:var(--surface-sunken);display:flex;
              align-items:center;justify-content:center;position:relative}
.look .lienzo img{width:100%;height:100%;object-fit:cover;display:block}
.look .cargando{font-size:var(--fs-sm);color:var(--muted);text-align:center;padding:var(--sp-3)}
.look .cargando.error{color:var(--sem-red);font-weight:600}
.look figcaption{gap:5px}

/* ── 8 · El atributo hidden debe ganar siempre ───────────────────────────── */
/*
 * `hidden` lo aplica el navegador desde su hoja de usuario-agente, y CUALQUIER
 * regla de autor con display le gana. Con `.campo { display: flex }` de
 * components.css, poner hidden="true" desde JavaScript no escondía nada: el
 * campo «¿Cuántos looks?» seguía a la vista al elegir el set.
 *
 * Este es uno de los pocos casos donde !important es lo correcto: no es una
 * preferencia de estilo, es un invariante — un elemento marcado como oculto no
 * se pinta, sin importar qué clase lleve.
 */
[hidden] { display: none !important; }