/* =====================================================================
   COOPER - SISTEMA VISUAL
   Paleta azul (navy -> cian -> hielo) + tipografia editorial (Acaraje
   para titulares + Montserrat en versalitas espaciadas).
   Todo el tema vive en este bloque: cambiando los tokens cambia la web.
   ===================================================================== */
:root {
  /* --- Gama base ---
     Los cinco colores de la paleta, del mas oscuro al mas palido, mas dos
     que hacen falta para montarla: el blanco de las tarjetas y una niebla
     —#caf0f8 muy aclarado— para el fondo de pagina.

     #caf0f8 a pantalla completa es demasiado color: tine todo y deja sin
     contraste a las tarjetas, que es donde esta el trabajo. Como relleno
     de una fila o de una seccion, en cambio, es justo lo que hace falta. */
  --co-navy:           #03045e;
  --co-azul:           #0077b6;
  --co-cian:           #00b4d8;
  --co-cielo:          #90e0ef;
  --co-hielo:          #caf0f8;
  --co-blanco:         #ffffff;
  --co-niebla:         #f2f9fd;

  /* --- Derivados (aclarados/oscurecidos de la gama) --- */
  --co-azul-rgb:       0, 119, 182;
  --co-navy-rgb:       3, 4, 94;
  --co-azul-hover:     #00659c;
  --co-azul-dark:      #004f7c;
  --co-azul-medio:     #0090c4;

  /* --- Tokens semanticos --- */
  --brand:         var(--co-azul);
  --brand-hover:   var(--co-azul-hover);
  --brand-dark:    var(--co-azul-dark);
  --brand-deep:    var(--co-navy);
  --brand-soft:    var(--co-cielo);

  /* Lineas y tintes. Las reglas finas son navy: son el recurso grafico
     que estructura toda la pagina. */
  --rule:          rgba(var(--co-navy-rgb), 0.45);
  --rule-soft:     rgba(var(--co-navy-rgb), 0.14);
  --brand-line:    rgba(var(--co-navy-rgb), 0.20);
  --brand-tint-08: rgba(var(--co-azul-rgb), 0.08);
  --brand-tint-12: rgba(var(--co-azul-rgb), 0.12);
  --brand-tint-18: rgba(var(--co-azul-rgb), 0.18);
  --border:        rgba(var(--co-navy-rgb), 0.14);

  --accent:        var(--co-cian);
  --accent-soft:   var(--co-cielo);
  --accent-strong: var(--co-azul-medio);

  /* Superficies */
  --bg:            var(--co-niebla);
  --surface:       var(--co-blanco);
  --surface-soft:  var(--co-hielo);
  --footer-bg:     var(--co-navy);

  /* Texto */
  --text:          var(--co-navy);

  /* Estados.

     El rojo del error se queda rojo. Es el unico color de la interfaz que
     no decora: dice que algo salio mal, y en una gama donde todo es azul,
     un error azul no se distingue de un aviso cualquiera. Se eligio uno
     que convive con la gama en vez del naranja de antes.

     El aviso informativo, en cambio, si entra en la paleta: no advierte de
     nada, solo cuenta algo, y en azul palido se lee como lo que es. */
  --ok:            var(--co-azul);
  --danger:        #c1121f;
  --danger-soft:   #fde8ea;
  --muted:         #5b6b85;
  --warn-soft:     var(--co-hielo);
  --warn-text:     var(--co-azul-dark);

  /* Tipografia */
  --font-display:  'Acaraje', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --tracking:      0.18em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  background: var(--bg);
}

body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* FONTS ---------------------------------------------------------------
   Archivos locales en static/fonts (sin peticiones a Google).           */
/* Acaraje: la tipografia de titulares.

   OJO CON LA LICENCIA: el zip del que salio dice «Personal Use Only»
   (ver fonts/Acaraje/LICENCIA.txt). Para publicar Cooper hay que comprar
   la licencia comercial o cambiarla. Cambiarla es una linea: toda la web
   la toma de `--font-display`. */
@font-face {
    font-family: 'Acaraje';
    src: url('../static/fonts/Acaraje/Acaraje-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Acaraje';
    src: url('../static/fonts/Acaraje/Acaraje-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Acaraje';
    src: url('../static/fonts/Acaraje/Acaraje-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Acaraje';
    src: url('../static/fonts/Acaraje/Acaraje-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Acaraje';
    src: url('../static/fonts/Acaraje/Acaraje-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../static/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../static/fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../static/fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../static/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* TIPOGRAFIA BASE ---------------------------------------------------- */
h1, h2, h3, h4,
.display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
}

/* Etiqueta en versalitas espaciadas: el tono de voz del referente
   para navegacion, labels, botones y micro-copys. */
.eyebrow,
.label-caps {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    color: var(--text);
}

/* GLOBAL */
.contenedor {
    max-width: 1400px;
    width: 100%;
    margin: auto;
    padding: 0 28px;
}

/* DISPOSICION -----------------------------------------------------------
   Franja superior fina de lado a lado; debajo, la barra lateral a la
   izquierda y el contenido a su derecha.

   Antes la navegacion iba en horizontal arriba. La lista crece —Checklists
   llego con el constructor y vendran mas— y en horizontal cada seccion
   nueva empuja a las demas hasta partirlas en dos filas. En vertical, una
   mas es una mas.                                                        */

.franja-superior {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  min-height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.marca-superior {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.marca-superior .marca-iso { height: 26px; width: auto; }
.marca-superior .dot { color: var(--brand-soft); }

.cuenta-superior {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* El nombre de la empresa y el rol, apilados: dos lineas cortas se leen de
   un vistazo y una larga no. */
.cuenta-datos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: right;
}

.cuenta-datos strong { font-weight: 600; }
.cuenta-datos span { opacity: 0.6; }

.enlace-cuenta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.enlace-cuenta:hover { color: var(--brand); }

/* El boton de hamburguesa solo aparece cuando la lateral no cabe al lado. */
.abrir-lateral {
  display: none;
  width: auto;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.abrir-lateral span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
}

.abrir-lateral:hover { background: transparent; }
.abrir-lateral:hover span { background: var(--brand); }

/* ------------------------------ La columna ---------------------------- */

.disposicion { display: flex; align-items: stretch; }

.zona-principal {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 58px);
}

.zona-principal > main { flex: 1 0 auto; }

/* El ancho va en una variable y no en dos declaraciones que luego haya que
   volver a pisar: plegarla es cambiar un numero, no pelear con la cascada
   entre `flex` (que ya trae el basis dentro) y `width`. */
.lateral {
  --ancho-lateral: 216px;
  flex: 0 0 var(--ancho-lateral);
  width: var(--ancho-lateral);
  position: sticky;
  top: 58px;
  align-self: flex-start;
  height: calc(100vh - 58px);
  display: flex;
  flex-direction: column;
  padding: 16px 0 10px;
  background: var(--surface);
  border-right: 1px solid var(--rule-soft);
  overflow: hidden;

  /* Sin transicion sobre el ancho. Al venir de `var(--ancho-lateral)`, el
     cambio de la variable no la dispara y la barra se quedaba clavada en
     el ancho de partida: plegaba los textos pero no estrechaba. Plegar es
     instantaneo, que ademas es lo que se espera de un boton asi. */
}

.nav-lateral { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }

.enlace-lateral {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-left-color 0.15s ease;
}

.enlace-lateral:hover {
  background: var(--surface-soft);
  color: var(--brand);
}

/* La seccion en la que estas: la misma barra de color que marca una fila
   seleccionada en las listas, para que signifique lo mismo en todas partes. */
.enlace-lateral.activo {
  background: var(--surface-soft);
  color: var(--brand);
  border-left-color: var(--brand);
}

.icono-lateral {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  opacity: 0.75;
}

.enlace-lateral.activo .icono-lateral,
.enlace-lateral:hover .icono-lateral { opacity: 1; }

.plegar-lateral {
  width: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 11px 20px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule-soft);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.plegar-lateral:hover { background: transparent; color: var(--brand); opacity: 1; }

.flecha-plegar {
  flex: 0 0 19px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* ----------------------------- Plegada -------------------------------- */
/* Solo los iconos. El `title` de cada enlace sigue diciendo que es cada
   uno, asi que plegarla no deja la navegacion adivinando. */

body.lateral-plegada .lateral { --ancho-lateral: 58px; }
body.lateral-plegada .texto-lateral { display: none; }

body.lateral-plegada .enlace-lateral,
body.lateral-plegada .plegar-lateral {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

body.lateral-plegada .enlace-lateral { border-left-width: 2px; }
body.lateral-plegada .flecha-plegar { transform: rotate(180deg); }

/* El velo solo existe cuando la lateral tapa el contenido. */
.velo-lateral { display: none; }

/* --------------------------- Pantalla estrecha ------------------------ */
/* Debajo de 860px la lateral no cabe al lado sin comerse el contenido, asi
   que sale de la fila y se abre encima cuando se pide.                   */

@media (max-width: 860px) {
  .abrir-lateral { display: flex; }

  .lateral {
    --ancho-lateral: 232px;
    position: fixed;
    top: 58px;
    left: 0;
    z-index: 110;
    transform: translateX(-100%);
    box-shadow: 0 12px 32px rgba(var(--co-navy-rgb), 0.18);
    transition: transform 0.18s ease;
  }

  body.lateral-abierta .lateral { transform: translateX(0); }

  /* Plegada es una decision de pantalla ancha; aqui no aplica. */
  body.lateral-plegada .lateral { --ancho-lateral: 232px; }
  body.lateral-plegada .texto-lateral { display: inline; }

  body.lateral-plegada .enlace-lateral,
  body.lateral-plegada .plegar-lateral {
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }

  body.lateral-plegada .flecha-plegar { transform: none; }

  .velo-lateral {
    display: block;
    position: fixed;
    inset: 58px 0 0;
    z-index: 105;
    background: rgba(var(--co-navy-rgb), 0.35);
  }

  .velo-lateral[hidden] { display: none; }

  .cuenta-datos { display: none; }
}

@media (max-width: 420px) {
  .franja-superior { padding: 0 14px; gap: 10px; }
  .marca-superior { font-size: 21px; }
  .marca-superior .marca-iso { height: 21px; }
}

/* HERO -----------------------------------------------------------------
   Mitad crema con titular serif, mitad imagen; reglas finas arriba/abajo. */
#hero,
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 56px;
    border-right: 1px solid var(--rule);
}

.hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.12;
    font-weight: 400;
}

.hero-copy h1 .dot {
    color: var(--accent);
}

.hero-copy p {
    margin-top: 18px;
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(var(--co-navy-rgb), 0.8);
}

.hero-media {
    background: var(--brand);
    min-height: 320px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Panel de marca cuando no hay fotografia que mostrar */
.hero-mark {
    text-align: center;
    color: var(--co-niebla);
}

.hero-mark .wordmark {
    font-family: var(--font-display);
    font-size: clamp(44px, 7vw, 86px);
    line-height: 1;
    display: block;
}

.hero-mark .wordmark .dot {
    color: var(--co-niebla);
    opacity: 0.6;
}

.hero-mark .caption {
    margin-top: 18px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    opacity: 0.85;
}

@media (max-width: 900px) {
    #hero,
    .hero-split {
        grid-template-columns: 1fr;
    }
    .hero-copy {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 46px 28px;
    }
}

/* SECTIONS */
section {
    padding: 48px 0;
    width: 100%;
}

section h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    margin-bottom: 28px;
    text-align: center;
    color: var(--text);
}

/* Lista editorial: texto serif grande, regla fina y flecha a la derecha
   (el patron "Website Design ->" del referente). */
.rule-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.rule-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 34px);
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.rule-list a:first-child {
    border-top: 1px solid var(--rule);
}

.rule-list a:hover {
    color: var(--brand);
    padding-left: 12px;
}

.rule-list .arrow {
    font-size: 0.7em;
    color: var(--accent-strong);
}

/* CARDS (General / Home) */
.programas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Panel de contenido.

   `min-height: 220px` y `justify-content: space-between` venían de las
   tarjetas de producto del catálogo, que iban en una rejilla y tenían que
   quedar todas de la misma altura con el botón abajo. Ese catálogo ya no
   existe, y en un panel normal esas dos reglas estiraban la caja y separaban
   su contenido dejando un hueco en medio.

   Quien necesite el reparto vertical —las dos tarjetas de la portada— lo
   pide por su cuenta. */
.carta, .cartac1, .cartac2, .cartac3, .cartac4 {
    background: var(--surface);
    border-radius: 2px;
    padding: 28px;
    transition: 0.3s;
    border: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.carta:hover {
    border-color: var(--brand);
}

.carta h3 {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px;
}

.carta p {
    color: rgba(var(--co-navy-rgb), 0.75);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 14px;
}

/* BUTTONS --------------------------------------------------------------
   Rectangulares, versalitas espaciadas: sin esquinas redondeadas.        */
button, .btn {
    background: var(--brand);
    color: var(--co-blanco);
    border: 1px solid var(--brand);
    padding: 13px 22px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    cursor: pointer;
    transition: 0.25s;
    width: 100%;
}

button:hover:not(:disabled), .btn:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* Un botón apagado tiene que verse apagado. Lo decía un `style` escrito a
   mano en la plantilla, y dejó de valer en cuanto «Cerrar visita» empezó a
   habilitarse sin recargar: el atributo cambia, el estilo pegado al HTML
   no. */
button:disabled { opacity: 0.5; cursor: default; }

/* Variante secundaria: contorno carbon sobre crema */
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--rule);
}

.btn-ghost:hover {
    background: var(--text);
    color: var(--co-blanco);
    border-color: var(--text);
}


/* SEARCH & FILTERS */
.search-container {
  margin-bottom: 20px;
  width: 100%;
}

.search-container form {
    width: 100%;
}

.search-input {
  /* Mismo lenguaje visual que `.filter-select` para que el buscador
     y los desplegables de filtros se sientan parte del mismo set. */
  width: 100%;
  padding: 10px 14px;
  border-radius: 2px;
  border: 1px solid var(--brand-line);
  background: var(--surface);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  border-color: var(--brand);
  box-shadow: none;
}

.search-input::placeholder {
  color: rgba(var(--co-navy-rgb), 0.45);
}

/* DROPDOWN DE SUGERENCIAS DEL BUSCADOR
   Copia exacta del estilo de `.filter-options-wrapper` (los desplegables
   del sidebar de filtros) para mantener consistencia visual. */
.search-suggestions-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 2px;
  z-index: 1000;
  box-shadow: 0 6px 18px rgba(var(--co-navy-rgb), 0.10);
  padding: 5px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.search-suggestions-wrapper.active {
  display: block;
}

.search-suggestion-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  color: var(--text);
  user-select: none;
}

.search-suggestion-item:hover,
.search-suggestion-item.is-active {
  background: var(--brand-tint-12);
}

.search-suggestion-item .match {
  font-weight: 700;
  color: var(--brand);
}

.search-suggestion-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: rgba(var(--co-navy-rgb), 0.48);
  text-align: center;
}

.filters-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 0;
  margin: 0;
}

/* SIDEBAR FILTERS */
.sidebar {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100%;
  background: var(--surface);
  z-index: 1100;
  transition: right 0.3s ease-in-out;
  padding: 14px 16px;
  box-shadow: -8px 0 30px rgba(var(--co-navy-rgb), 0.12);
  overflow-y: auto;
}

.sidebar.active {
  right: 0;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}

.sidebar-header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}

.close-sidebar {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: rgba(var(--co-navy-rgb), 0.85);
  width: auto;
  padding: 0;
  line-height: 1;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  display: none;
}

.sidebar-overlay.active {
  display: block;
}

.hamburger-btn {
  background: var(--brand);
  color: var(--co-blanco);
  border: none;
  padding: 10px 15px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  transition: 0.3s;
}

.hamburger-btn:hover {
  background: var(--brand-hover);
}

.fixed-hamburger-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001; /* Above navbar */
  background: var(--brand);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--co-navy-rgb), 0.22);
  transition: all 0.3s ease;
  padding: 0;
  line-height: 0;
}

.fixed-hamburger-btn span:first-child {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translateY(-1px); /* Optical centering adjustment */
}

.fixed-hamburger-btn .btn-text {
  display: none;
}

.fixed-hamburger-btn:hover {
  background: var(--brand-hover);
  transform: scale(1.1);
}

/* On larger screens, we can show the text if desired, but keeping it small is safer */
@media (min-width: 1024px) {
    .fixed-hamburger-btn {
        width: auto;
        height: auto;
        padding: 12px 22px;
        border-radius: 50px;
        line-height: 1.2;
    }
    .fixed-hamburger-btn .btn-text {
        display: inline;
        margin-left: 8px;
        font-size: 16px;
    }
    .fixed-hamburger-btn span:first-child {
        font-size: 20px;
        width: auto;
        height: auto;
        transform: none;
        display: inline-block;
    }
}

.filter-select {
  padding: 8px 10px;
  border-radius: 2px;
  border: 1px solid var(--brand-line);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text);
  width: 100%;
}

/* PRODUCTS GRID */
.products-grid {
  display: grid;
  /* auto-fill (NO auto-fit): los tracks vacíos se mantienen, así una
     tarjeta sola conserva el mismo ancho que cuando la grid está llena
     en vez de estirarse a todo el contenedor y deformar la imagen. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
}

.product-card {
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: none;
  width: 100%;
  padding: 15px; 
  box-sizing: border-box;
  box-shadow: none;
  transition: all 0.3s ease;
}

.product-card:hover {
  box-shadow: none;
  border-color: var(--brand);
}

.product-image-wrapper {
  /* Fondo neutro para que el letterbox de imágenes con aspect ratio
     distinto al del contenedor (típicamente verticales en una tarjeta
     casi cuadrada) se vea intencional y no como "espacio vacío". */
  background: var(--surface-soft);
  position: relative;
  cursor: pointer;
}

.product-image {
  width: 100%;
  height: 250px;
  /* `contain` → muestra la imagen COMPLETA (no recorta nunca). Si el
     aspect ratio no coincide con el contenedor, deja letterbox (que
     queda con el fondo gris claro del wrapper). */
  object-fit: contain;
  display: block;
}

/* Subtítulo de edad debajo del nombre del producto en la cuadrícula */
.product-edad {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: rgba(var(--co-navy-rgb), 0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* En pantallas móviles las tarjetas se hacen más anchas que altas
   relativamente, así que damos un poco más de altura al área de imagen
   para que las prendas verticales se vean bien proporcionadas. */
@media (max-width: 640px) {
  .product-image {
    height: 320px;
  }
}

@media (max-width: 380px) {
  .product-image {
    height: 280px;
  }
}

/* FOOTER / DETAIL GRID */
.product-detail-grid {
  width: 100%;
  max-width: 1200px;
  flex: 1;
  min-height: 0;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: none;
}

/* CART ITEM CARD — mismo estilo que info.html */
.cart-item-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: none;
}

.cart-item-img-wrap {
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 10px;
}

.cart-item-img-wrap img {
    /* `contain` muestra la imagen completa sin recortes (con letterbox si
       hace falta). `max-*` evita estirarla por encima de su tamaño natural. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.cart-item-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-item-body h3 {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 21px;
    font-weight: 400;
    margin: 0 0 2px 0;
}

.cart-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.cart-item-precio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-item-precio .precio-antes {
    text-decoration: line-through;
    color: rgba(var(--co-navy-rgb), 0.48);
    font-size: 14px;
}

.cart-item-precio .precio-final {
    font-family: var(--font-display);
    color: var(--brand);
    font-size: 26px;
}

.cart-item-no-aplica {
    margin: 4px 0 0 0;
    padding: 4px 10px;
    background: var(--warn-soft);
    color: var(--warn-text);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    align-self: flex-start;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .cart-item-card {
        grid-template-columns: 1fr;
    }
    .cart-item-img-wrap {
        height: 260px;
        min-height: unset;
    }
    .cart-item-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .cart-item-footer .btn-eliminar {
        width: 100%;
    }
}

/* SELECTOR DE CANTIDAD en info.html — fixes para móvil */

/* El estilo global `button { width: 100% }` rompía los botones inline +/-.
   Aquí los forzamos a ancho automático y a NO crecer dentro del flex. */
#btn-cantidad-menos,
#btn-cantidad-mas {
    width: auto !important;
    flex: 0 0 auto;
}

/* Si el contenido del row no cabe, que el hint pase a otra línea
   en vez de empujar al botón "+" fuera del viewport. */
#cantidad-container {
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    /* En el detalle de producto el panel derecho tiene padding 20px 32px;
       en móvil reducimos los laterales para ganar ~32px de ancho útil. */
    .product-detail-grid > div + div {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Compactar el selector +/- para que quepa cómodo en pantallas estrechas */
    #cantidad-container {
        gap: 10px;
    }
    #btn-cantidad-menos,
    #btn-cantidad-mas {
        padding: 6px 14px !important;
        font-size: 20px !important;
    }
    #cantidad-valor {
        padding: 6px 14px !important;
        min-width: 32px !important;
        font-size: 16px !important;
    }
    /* El hint a otra línea: deja respirar al +/- y evita que se solape */
    #cantidad-hint {
        flex-basis: 100%;
        margin-top: -2px;
    }
}

/* MODAL DE RESERVA — compacto y sin scroll en ningún tamaño */
.reserva-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    /* SIN overflow: el modal cabe entero */
}

.reserva-modal-overlay.active {
    display: flex;
}

.reserva-modal-card {
    background: var(--surface);
    width: 100%;
    max-width: 520px;
    border-radius: 2px;
    padding: 18px 22px;
    box-shadow: 0 18px 50px rgba(var(--co-navy-rgb), 0.22);
    /* SIN max-height ni overflow */
}

.reserva-modal-card h2 {
    font-family: var(--font-display);
    color: var(--brand-deep);
    margin: 0 0 6px 0;
    font-size: 26px;
    font-weight: 400;
}

.reserva-subtitle {
    color: rgba(var(--co-navy-rgb), 0.85);
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

.reserva-form {
    display: grid;
    gap: 8px;
}

.reserva-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.reserva-form label.field {
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(var(--co-navy-rgb), 0.65);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.reserva-form label.field input {
    margin-top: 3px;
    padding: 8px 10px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    width: 100%;
    box-sizing: border-box;
}

.reserva-form label.field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: none;
}

.reserva-chk-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: rgba(var(--co-navy-rgb), 0.85);
    line-height: 1.35;
    margin-top: 2px;
}

.reserva-chk-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.reserva-warning {
    color: var(--danger);
    font-size: 11px;
    margin: 0;
    line-height: 1.3;
}

.reserva-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.reserva-btns button {
    padding: 9px 18px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 13px;
}

.reserva-btn-cancel {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--rule) !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    font-size: 11px;
    font-weight: 600;
}

.reserva-btn-confirm {
    background: var(--brand);
    color: var(--co-blanco);
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    font-size: 11px;
    font-weight: 600;
}

/* Pantallas muy estrechas: reducir aún más para que todo quepa */
@media (max-width: 380px) {
    .reserva-modal-card {
        padding: 14px 16px;
    }
    .reserva-form {
        gap: 6px;
    }
    .reserva-form .row-2 {
        gap: 6px;
    }
}

.footer {
    background: var(--footer-bg);
    color: var(--co-niebla);
    padding: 54px 15px 44px;
    text-align: center;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    line-height: 2;
}

.footer-logo {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: 0.04em;
    color: var(--co-cielo);
    margin-bottom: 18px;
    text-decoration: none;
}

/* TABLET: apila la imagen sobre los detalles para evitar que se recorte */
@media (min-width: 769px) and (max-width: 1100px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    .product-detail-grid > div:first-child {
        min-height: 420px;
    }
    .product-detail-grid > div:first-child img {
        width: 100%;
        height: 420px;
        object-fit: contain;
    }
}

/* RESPONSIVE AGRESIVO */
@media (max-width: 768px) {
    .btn-text {
        display: none;
    }
    .hamburger-btn {
        padding: 8px 12px;
    }
    .search-container form {
        flex-direction: row;
    }
    .search-container button {
        width: auto !important;
        margin-top: 0;
    }
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    .product-info h1 {
        font-size: 26px !important;
        border: 50px;
    }
    .fixed-hamburger-btn {
        top: auto;
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .contenedor {
        padding: 0 10px;
    }
    .logo-title h1 {
        font-size: 18px;
    }
    .filters-container {
        grid-template-columns: 1fr;
    }
    #hero {
        height: 50vh;
        border-radius: 0;
    }
    section {
        padding: 30px 0;
    }
}

/* Fix final para cualquier elemento que intente desbordar */
* {
    max-width: 100%;
}

/* =====================================================================
   TIPOGRAFIA DE LA CUADRICULA DE PRODUCTOS
   El nombre y el precio van en serif display; referencia y etiquetas,
   en versalitas espaciadas. Mismo contraste que el referente.
   ===================================================================== */
.product-info {
  /* Fondo propio: el tinte crema del wrapper es solo el letterbox de la
     imagen, el bloque de texto va sobre la superficie de la tarjeta. */
  background: var(--surface);
  padding: 14px 0 4px;
}

.product-ref {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--co-navy-rgb), 0.5);
}

.product-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 6px;
  color: var(--text);
}

.price-row {
  margin-top: 6px;
}

.old-price {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(var(--co-navy-rgb), 0.5);
}

.current-price {
  font-family: var(--font-display);
  font-size: 26px;
  margin-top: 6px;
  color: var(--brand);
}

.discount-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Divisor fino reutilizable */
.hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 100%;
}


/* ANCHO EN PANTALLAS ESTRECHAS ---------------------------------------- */
@media (max-width: 900px) {
    .contenedor { padding: 0 18px; }
}

/* ===========================================================================
   Cooper — identidad y disposición del panel
   =========================================================================== */

/* Isotipo junto al nombre, en el encabezado y el pie. `flex` para que el
   SVG y el texto compartan la línea base sin el hueco que deja un inline. */
.marca {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.marca-iso {
    /* Medido en `em`, no en píxeles: así crece y mengua con el tamaño del
       nombre, que es un `clamp()` dependiente del ancho de pantalla. Con un
       valor fijo, el isotipo quedaría diminuto en escritorio y enorme en
       móvil.

       1.08em deja el disco naranja a la altura de la «C» de Cooper: el SVG
       reserva un margen alrededor del disco para el anillo punteado, así que
       la caja tiene que ser algo mayor que la letra para que el disco mida
       lo mismo. */
    width: 1.08em;
    height: 1.08em;
    flex: 0 0 auto;
    display: block;
}

/* ---------------------------------------------------------------------------
   Panel: identidad a la izquierda, acciones a la derecha.

   Con `flex-wrap` y un ancho base en cada columna, el salto a una sola
   columna ocurre solo cuando de verdad no caben las dos — sin media query y
   sin un punto de quiebre arbitrario.
   --------------------------------------------------------------------------- */
/* Quién eres y, al otro extremo, lo único que se hace desde aquí todos
   los días: empezar una visita. */
.panel-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule-soft);
}

.panel-cabecera > div { flex: 1 1 auto; min-width: 0; }
.btn-cabecera { flex: 0 0 auto; width: auto; }

/* El logo lo sube el usuario: puede venir apaisado, cuadrado o vertical.
   `object-fit: contain` lo encaja respetando su proporción — sin esto, una
   imagen ancha sale aplastada. */
.logo-empresa {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 120px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

/* Las cuatro cifras. Dos y dos, y las cuatro en fila cuando hay sitio de
   verdad. `auto-fit` dejaba tres arriba y una suelta debajo en cuanto la
   ventana se estrechaba un poco — con cuatro cifras, tres y una se lee
   como si la última fuera otra cosa. */
.rejilla-cifras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 1180px) {
    .rejilla-cifras { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 520px) {
    .rejilla-cifras { grid-template-columns: 1fr; }
}

/* Cada cifra es un enlace entero, no un número con un enlace debajo: lo
   que se quiere al leer «3 tiendas sin visitar» es ir a verlas. */
.cifra {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-line);
    border-radius: 2px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.cifra:hover {
    border-top-color: var(--brand);
    box-shadow: 0 6px 18px rgba(var(--co-navy-rgb), 0.08);
}

.cifra-numero {
    display: block;
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.05;
    color: var(--brand-deep);
}

/* Acaraje no trae el signo de porcentaje: en su sitio dibujaba un adorno.
   La cifra se queda en la tipografía de titulares y la unidad pasa a la de
   texto, que sí lo tiene. */
.cifra-unidad {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    margin-left: 1px;
}

.cifra-texto {
    display: block;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cifra-pie {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.55;
}

/* Hay algo que atender, pero no es un problema: una visita a medias o una
   tienda por visitar son trabajo, no fallos. Rojo solo para lo que ya se
   paso de fecha. */
.cifra.avisa { border-top-color: var(--accent); }
.cifra.alarma { border-top-color: var(--danger); }
.cifra.alarma .cifra-pie { color: var(--danger); opacity: 1; }

.lista-rezagadas {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule-soft);
}

.rezagada {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--rule-soft);
    text-decoration: none;
    color: inherit;
}

.rezagada:hover { background: var(--brand-tint-08); }
.rezagada-nombre { font-weight: 600; }

.rezagada-cuando {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}

@media (max-width: 640px) {
    .panel-cabecera { flex-wrap: wrap; gap: 14px; }
    .btn-cabecera { width: 100%; }
    .logo-empresa { max-height: 48px; }
    .cifra-numero { font-size: 28px; }
}

/* ===========================================================================
   Formulario de visita: navegador de secciones
   =========================================================================== */

/* Selector de sección.

   `appearance: none` quita el control nativo —que cada sistema dibuja a su
   manera y rompe la coherencia de la página— y la flecha se repone como
   imagen de fondo. El relleno derecho le deja sitio para que el texto de
   una sección larga no se le monte encima. */
.selector-seccion {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 14px 44px 14px 18px;
    border: 1px solid var(--brand);
    border-radius: 2px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D36B35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.selector-seccion:hover { background-color: var(--surface-soft); }

.selector-seccion:focus-visible {
    border-color: var(--brand-hover);
    box-shadow: 0 0 0 3px var(--brand-tint-12);
}

/* El desplegable abierto lo dibuja el sistema y casi no admite estilos; lo
   único fiable entre navegadores es el color de las opciones. */
.selector-seccion option {
    background: var(--surface);
    color: var(--text);
    padding: 10px;
}

/* Anterior / Siguiente.

   `button, .btn` lleva `width: 100%` para los formularios de la página, y
   aquí son dos botones en una fila: sin devolverles el ancho automático
   cada uno ocupa el total y se desbordan del contenedor. */
.nav-secciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 24px 0 36px;
}

.nav-secciones .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
}

/* «Siguiente» se empuja a la derecha él mismo en vez de depender de
   `space-between`. Así cada botón queda en su lado aunque falte el otro: en
   la primera sección no hay «Anterior» y «Siguiente» sigue a la derecha; en
   la última no hay «Siguiente» y «Anterior» se queda a la izquierda.

   Atarlo a `:only-child` parecía más corto, pero manda el botón que quede
   al lado equivocado: en la última sección empujaba «Anterior» a la
   derecha. */
.nav-secciones .nav-siguiente { margin-left: auto; }

@media (max-width: 520px) {
    .nav-secciones .btn { flex: 1 1 0; text-align: center; }
}

/* ===========================================================================
   Lista de visitas
   =========================================================================== */

.lista-visitas {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
}

/* Cada fila es un enlace a su propia visita. El contorno al pasar por
   encima y la flecha de la derecha son lo que dice que se puede abrir:
   sin eso la lista parece un listado muerto, y con dos visitas casi
   idénticas no queda claro que cada una lleve a un sitio distinto. */
/* `.fila-registro` es la misma fila sin ser un enlace: la usan las listas
   de colaboradores y de invitaciones, donde no hay nada que abrir pero si
   hace falta saber de que fila son los botones que se estan mirando. Por
   eso comparte el realce y NO lleva la flecha, que prometeria navegar. */
.fila-visita,
.fila-tienda,
.fila-registro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--rule-soft);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.fila-visita:last-child,
.fila-tienda:last-child,
.fila-registro:last-child { border-bottom: none; }

.fila-visita:hover,
.fila-visita:focus-visible,
.fila-tienda:hover,
.fila-tienda:focus-visible,
.fila-registro:hover,
.fila-registro:focus-within {
    background: var(--surface-soft);
    border-left-color: var(--brand);
    outline: none;
}

/* Se queda a la derecha empujando lo demás, y no se encoge cuando el
   nombre de la tienda es largo. */
.fila-visita-estado {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* La fila de tienda la usa igual: es la misma flecha de «entra aquí». */
.fila-visita-flecha {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--brand);
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.fila-visita:hover .fila-visita-flecha,
.fila-tienda:hover .fila-visita-flecha {
    opacity: 1;
    transform: translateX(2px);
}

/* El nombre y la dirección, a la izquierda; lo demás lo empuja la flecha
   con su `margin-left: auto`. */
.fila-tienda-datos { flex: 1 1 auto; min-width: 0; }

/* La fila de registro lleva datos a la izquierda y acciones a la derecha;
   el bloque de datos se queda con el ancho sobrante. */
.fila-registro-datos { flex: 1 1 auto; min-width: 0; }
.fila-registro-acciones { display: flex; gap: 8px; flex: 0 0 auto; }

.fila-tienda.sin-acceso strong { opacity: 0.55; }

.fila-tienda-direccion {
    font-size: 13px;
    opacity: 0.65;
    margin-top: 2px;
}

.etiqueta-curso {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand);
}

/* Botón de acción junto a un título, sin el ancho completo que llevan los
   de formulario. */
.btn-compacto {
    width: auto;
    padding: 10px 20px;
    font-size: 11px;
    text-decoration: none;
}

@media (max-width: 560px) {
    .fila-visita { flex-wrap: wrap; gap: 8px; padding: 14px 18px; }
    .fila-visita-estado { margin-left: 0; text-align: left; }
    .fila-visita-flecha { display: none; }
}

/* ===========================================================================
   Pestañas, selección múltiple y barra de acciones
   =========================================================================== */

.pestanas {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 26px;
}

.pestana {
    padding: 0 0 12px;
    text-decoration: none;
    color: rgba(var(--co-navy-rgb), 0.55);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pestana:hover { color: var(--text); }

.pestana.activa {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* La casilla va FUERA del enlace de la fila: dentro, marcarla navegaría a
   la visita en vez de seleccionarla. */
.fila-visita-contenedor {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--rule-soft);
}

.fila-visita-contenedor:last-child { border-bottom: none; }
.fila-visita-contenedor .fila-visita { flex: 1 1 auto; border-bottom: none; }

.casilla-visita {
    display: flex;
    align-items: center;
    padding: 0 4px 0 18px;
    cursor: pointer;
}

.casilla-visita input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }

.marcar-todo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    color: rgba(var(--co-navy-rgb), 0.55);
    cursor: pointer;
}

.marcar-todo input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }

/* Barra de acciones.

   Flotante y fija abajo: con una lista larga, los botones tienen que estar
   donde la vista esté, no al final de la página. Aparece sola cuando hay
   algo marcado — si no hay nada seleccionado no hay nada que hacer con
   ella, y ocuparía sitio por ocuparlo. */
.barra-seleccion {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: calc(100vw - 30px);
    padding: 14px 20px;
    background: var(--text);
    color: var(--co-blanco);
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.barra-seleccion[hidden] { display: none; }

.barra-cuenta {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: var(--tracking);
    white-space: nowrap;
}

.barra-botones { display: flex; gap: 10px; }

.btn-barra {
    width: auto;
    padding: 9px 16px;
    font-size: 11px;
    background: transparent;
    color: var(--co-blanco);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.btn-barra:hover:not(:disabled) {
    background: var(--co-blanco);
    color: var(--text);
    border-color: var(--co-blanco);
}

.btn-barra:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-barra-peligro { border-color: rgba(255, 138, 148, 0.6); color: #ff8a94; }

.btn-barra-peligro:hover:not(:disabled) {
    background: var(--danger);
    color: var(--co-blanco);
    border-color: var(--danger);
}

.barra-cerrar {
    width: auto;
    padding: 0 2px;
    background: transparent;
    border: none;
    color: var(--co-blanco);
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
}

.barra-cerrar:hover { background: transparent; opacity: 1; }

@media (max-width: 560px) {
    .barra-seleccion { flex-wrap: wrap; gap: 12px; bottom: 12px; padding: 12px 16px; }
    .barra-botones { width: 100%; }
    .btn-barra { flex: 1 1 0; }
}

/* ===========================================================================
   Adjuntos de una respuesta
   =========================================================================== */

/* `hidden` pierde contra el display: flex de abajo; sin esto los adjuntos
   de una pregunta sin responder se verían igual. */
.adjuntos[hidden] { display: none; }

.adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-line);
}

.adjunto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--surface-soft);
    border-radius: 2px;
    font-size: 13px;
    max-width: 100%;
}

.adjunto-icono { font-size: 14px; line-height: 1; }

.adjunto-nombre {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--brand-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.adjunto-nombre:hover { border-bottom-color: var(--brand); }

.adjunto-peso { font-size: 11px; opacity: 0.5; white-space: nowrap; }

.adjunto-quitar {
    width: auto;
    padding: 0 4px;
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 17px;
    line-height: 1;
    opacity: 0.6;
}

.adjunto-quitar:hover { background: transparent; opacity: 1; }

/* El <input type="file"> nativo no se puede estilar, así que se tapa con la
   etiqueta y se deja ocupando toda la caja para que siga siendo el que
   recibe el clic. */
.adjuntar {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px dashed var(--brand-line);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.adjuntar:hover { border-color: var(--brand); background: var(--surface-soft); }

.adjuntar input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.adjuntar-texto {
    font-size: 12px;
    color: var(--brand);
    white-space: nowrap;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   ACCIONES Y EVIDENCIA

   Una accion es lo unico de la pagina que mira hacia AFUERA: sale por correo
   a la tienda y vuelve con la prueba de que se arreglo. Por eso se distingue
   del resto del checklist con una barra de color a la izquierda, del mismo
   grosor que la de la pregunta respondida pero en el tono de su prioridad.
   --------------------------------------------------------------------------- */
.accion {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border-left: 3px solid var(--brand-line);
    border-radius: 2px;
}

.accion-baja  { border-left-color: var(--brand-line); }
.accion-media { border-left-color: var(--brand); }
.accion-alta  { border-left-color: var(--danger); }

.accion-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.accion-titulo { font-size: 14px; font-weight: 600; }

.accion-estado {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--danger);
}

.accion-estado.resuelta { color: var(--brand); }

.accion-detalle {
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(var(--co-navy-rgb), 0.72);
}

.accion-pie {
    margin: 6px 0 0;
    font-size: 12px;
    opacity: 0.6;
}

/* El formulario va plegado: la mayoria de preguntas NO generan una accion,
   y abierto empujaria cada pregunta media pantalla hacia abajo. */
.accion-nueva {
    margin-top: 12px;
    border-top: 1px solid var(--brand-line);
    padding-top: 10px;
}

.accion-nueva > summary {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    cursor: pointer;
    list-style: none;
}

.accion-nueva > summary::-webkit-details-marker { display: none; }
.accion-nueva > summary::before { content: '+ '; }
.accion-nueva[open] > summary::before { content: '- '; }
.accion-nueva > form { margin-top: 12px; }

/* Prioridad y vencimiento caben juntos en escritorio y se apilan solos en
   el movil, que es donde se llena el checklist. */
.accion-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.accion-campos label { flex: 1 1 150px; min-width: 0; }
.accion-campos .label-caps { display: block; margin-bottom: 6px; font-size: 10px; opacity: 0.6; }
.accion-campos .search-input { font-size: 13px; }

/* Lo que mando la tienda, dentro de su accion. */
.evidencia {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--co-navy-rgb), 0.08);
    font-size: 13px;
}

.evidencia-comentario { color: rgba(var(--co-navy-rgb), 0.72); }
.evidencia-fecha { margin-left: auto; font-size: 12px; opacity: 0.55; }

/* Avisos de la pagina publica de la tienda. */
.aviso-ok,
.aviso-error {
    padding: 12px 16px;
    border-radius: 2px;
    font-size: 14px;
}

.aviso-ok    { background: var(--warn-soft); color: var(--warn-text); }
.aviso-error { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------------------
   EL CONSTRUCTOR DE CHECKLISTS

   Una pantalla densa: secciones, preguntas, opciones y valores a la vez.
   Lo que la ordena es la jerarquia visual, no las cajas: la seccion tiene
   fondo propio, la pregunta solo una linea que la separa de la siguiente, y
   los formularios de edicion viven plegados hasta que hacen falta.
   --------------------------------------------------------------------------- */

/* --------------------------- Lista de checklists --------------------------- */
.plantilla {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    padding: 22px 24px;
    margin-bottom: 12px;
}

.plantilla-archivada { opacity: 0.6; }

/* `.carta` es una columna flex y le pone margen inferior a cada <p>. Estas
   piezas traen su propia disposicion, asi que no heredan de ella: dentro de
   una tarjeta en columna, el `space-between` horizontal abria un hueco
   vertical en mitad del bloque. */
.plantilla p,
.seccion-editor p,
.conjunto-editor p { margin-bottom: 0; }
.plantilla-datos { flex: 1 1 280px; min-width: 0; }
.plantilla-nombre { margin: 0; font-size: 16px; font-weight: 600; }

.plantilla-descripcion {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(var(--co-navy-rgb), 0.72);
}

.plantilla-pie { margin: 8px 0 0; font-size: 12px; opacity: 0.6; }

.plantilla-acciones,
.editor-acciones,
.seccion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* --------------------------- Conjuntos y tablas ---------------------------- */
.conjunto-editor {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    padding: 20px 24px;
    margin-bottom: 14px;
}

.conjunto-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.conjunto-cabecera .search-input { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.conjunto-uso { font-size: 12px; opacity: 0.55; white-space: nowrap; }

.tabla-opciones,
.tabla-versiones {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-opciones th,
.tabla-versiones th {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    opacity: 0.55;
    padding: 0 6px 8px;
    font-weight: normal;
}

.tabla-opciones td { padding: 4px 6px; }
.tabla-opciones .search-input { font-size: 13px; padding: 7px 10px; }

.tabla-versiones td {
    padding: 8px 6px;
    border-top: 1px solid rgba(var(--co-navy-rgb), 0.08);
}

.tabla-versiones .version-actual { background: var(--surface-soft); }

/* El movil no cabe la tabla de opciones: se deja desplazarse en vez de
   apretar los campos hasta que no se pueda escribir en ellos. */
@media (max-width: 560px) {
    .conjunto-editor { overflow-x: auto; }
    .tabla-opciones { min-width: 420px; }
}

/* ---------------------------------------------------------------------------
   EL CONSTRUCTOR

   Una pantalla densa: secciones, preguntas, tipos de respuesta y valores a
   la vez. Lo que la ordena es la jerarquia, no las cajas. La seccion tiene
   fondo propio; la pregunta, solo una linea que la separa de la siguiente.
   --------------------------------------------------------------------------- */

.editor-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.editor-acciones,
.bloque-botones,
.celda-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* El estado del guardado, al lado del boton que lo provoca. Mas lejos no se
   lee: quien acaba de pulsar Guardar esta mirando ahi. */
.aviso-guardado {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

.aviso-guardado.ok    { color: var(--brand); opacity: 1; }

.aviso-guardado.error {
    color: var(--danger);
    opacity: 1;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

/* Mientras haya cambios sin guardar, el boton lo dice. Un boton que se ve
   igual con y sin trabajo pendiente no avisa de nada. */
body.hay-cambios #guardar::after { content: " \2022"; }

/* -------------------------------- Secciones -------------------------------- */
.bloque-seccion {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    margin-bottom: 16px;
}

.bloque-cabecera {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 18px 20px;
}

.bloque-titulo { flex: 1 1 auto; min-width: 0; }
.bloque-titulo h3 { margin: 0; }

.bloque-descripcion {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(var(--co-navy-rgb), 0.72);
}

.campo-titulo,
.campo-descripcion,
.campo-enunciado,
.campo-evaluar {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 2px;
    padding: 6px 8px;
    font-family: inherit;
    color: var(--text);
    resize: none;
    overflow: hidden;
}

.campo-titulo:hover, .campo-descripcion:hover,
.campo-enunciado:hover, .campo-evaluar:hover { border-color: var(--rule-soft); }

.campo-titulo:focus, .campo-descripcion:focus,
.campo-enunciado:focus, .campo-evaluar:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface-soft);
}

.campo-titulo {
    font-family: var(--font-display);
    font-size: 20px;
}

.campo-descripcion,
.campo-evaluar { font-size: 13px; color: rgba(var(--co-navy-rgb), 0.72); }

.plegar {
    width: auto;
    letter-spacing: 0;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
}

.plegar:hover { opacity: 1; background: transparent; }
.bloque-seccion.plegada .bloque-cuerpo { display: none; }

.bloque-cuerpo { padding: 0 20px 18px; }

.boton-icono {
    width: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 15px;
    line-height: 1;
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--brand-line);
    border-radius: 3px;
    cursor: pointer;
}

.boton-icono:hover { border-color: var(--brand); color: var(--brand); }
.boton-icono.peligro:hover { border-color: var(--danger); color: var(--danger); }

/* -------------------------------- Preguntas -------------------------------- */
.tabla-preguntas { border: 1px solid var(--rule-soft); border-radius: 2px; }

.fila-encabezado {
    display: grid;
    grid-template-columns: 1fr 280px 130px;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--surface-soft);
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.fila-pregunta {
    display: grid;
    grid-template-columns: 1fr 280px 130px;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule-soft);
    align-items: start;
}

.fila-pregunta:last-child { border-bottom: none; }
.fila-pregunta.es-instruccion { background: var(--warn-soft); }

.celda-enunciado { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }

.celda-enunciado > textarea,
.celda-enunciado > p { flex: 1 1 100%; min-width: 0; }

/* El asterisco de obligatoria va fuera del campo: dentro se perderia en
   cuanto el enunciado ocupa dos lineas. */
.marca-obligatoria {
    flex: 0 0 10px;
    color: var(--danger);
    font-size: 14px;
    line-height: 2;
}

.marca-obligatoria.vacia { color: transparent; }
.enunciado-fijo { margin: 0; font-size: 14px; }

.evaluar-fijo {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.65;
    white-space: pre-line;
}

.celda-tipo { min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }

/* Las etiquetas son lo que el colaborador vera como botones en la tienda:
   aqui se muestran del tamano que se leen, no como una anotacion al
   margen. */
.chip {
    font-size: 12px;
    padding: 5px 12px;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    white-space: nowrap;
    background: var(--surface);
}

.chip-na { opacity: 0.5; }
.chip-senala { border-color: var(--danger); color: var(--danger); }

.chip-tipo {
    flex: 1 1 auto;
    font-size: 13px;
    opacity: 0.85;
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.chip-tipo em {
    font-style: normal;
    font-size: 12px;
    opacity: 0.6;
    min-width: 20px;
}

/* El selector de tipo de respuesta es toda la caja, no un acento a su
   derecha. Lo que se quiere pulsar es «esta pregunta se responde asi», y
   un boton de 20px sin etiqueta no dice que ahi haya nada que abrir. */
.selector-tipo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: 3px;
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.selector-tipo:hover,
.selector-tipo:focus-visible {
    background: var(--surface-soft);
    border-color: var(--brand);
    outline: none;
}

/* En solo lectura es la misma caja sin nada que pulsar. */
.selector-tipo.sin-accion { cursor: default; background: transparent; }

.selector-tipo-pie {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    opacity: 0.7;
}

.selector-tipo:hover .selector-tipo-pie { opacity: 1; }
.selector-tipo-pie em { font-style: normal; font-size: 13px; line-height: 1; }

/* Los ajustes ocupan la fila entera, debajo de las tres columnas. */
.fila-ajustes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--co-navy-rgb), 0.06);
    font-size: 12px;
}

.ajuste, .ajuste-numero {
    display: flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
}

.ajuste-numero { opacity: 0.75; }
.ajuste-numero input { width: 64px; padding: 4px 6px; font-size: 12px; }

.ajuste-nota {
    flex: 1 1 240px;
    font-size: 11px;
    opacity: 0.6;
    white-space: normal;
}

.seccion-vacia {
    margin: 0;
    padding: 14px;
    font-size: 13px;
    font-style: italic;
    opacity: 0.6;
}

.agregar-nuevo {
    width: auto;
    margin-top: 12px;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed var(--brand-line);
    border-radius: 2px;
    color: var(--brand);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.agregar-nuevo:hover { border-color: var(--brand); background: var(--surface-soft); }

/* ------------------------ El selector de tipo ------------------------------ */
.panel-tipos {
    position: absolute;
    z-index: 60;
    display: flex;
    max-width: calc(100vw - 24px);
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(var(--co-navy-rgb), 0.18);
}

.panel-columna { padding: 14px; min-width: 0; }
.panel-columna + .panel-columna { border-left: 1px solid var(--rule-soft); }
.panel-otros { flex: 0 0 210px; }

.panel-titulo {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}

.panel-enlace {
    width: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--brand);
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.panel-enlace:hover { background: transparent; text-decoration: underline; }

.panel-lista { max-height: 280px; overflow-y: auto; width: 300px; max-width: 100%; }

.panel-conjunto {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 2px;
    cursor: pointer;
}

.panel-conjunto:hover { background: var(--surface-soft); }
.panel-conjunto.elegido { background: var(--brand-tint-12); }

.panel-tipo {
    display: flex;
    font-family: var(--font-sans);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.panel-tipo:hover { background: var(--surface-soft); color: var(--text); }
.panel-tipo.elegido { background: var(--brand-tint-12); }
.panel-tipo em { font-style: normal; opacity: 0.6; min-width: 20px; font-size: 12px; }

/* ----------------------------- El dialogo ---------------------------------- */
.dialogo {
    width: min(540px, calc(100vw - 32px));
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    color: var(--text);
}

.dialogo::backdrop { background: rgba(var(--co-navy-rgb), 0.45); }
.dialogo .tabla-opciones td { padding: 4px 6px; }

.dialogo .tabla-opciones input[type="text"],
.dialogo .tabla-opciones input[type="number"] {
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface);
    color: var(--text);
}

.dialogo .centrado { text-align: center; }

/* Entre el movil y el escritorio holgado, la lateral ya ocupa 216px y la
   columna del tipo de respuesta se come el ancho que necesita el enunciado:
   a 1024px —un portatil cualquiera— quedaban 295px para escribir la
   pregunta y 260 para cuatro etiquetas. Se estrecha el tipo, que es lo que
   menos ancho necesita de los dos. */
@media (max-width: 1140px) {
    .fila-encabezado,
    .fila-pregunta { grid-template-columns: 1fr 215px 120px; }
    .celda-botones { gap: 6px; }
    .boton-icono { padding: 6px 6px; }
}

/* En el movil las tres columnas no caben: se apilan. Apretarlas hasta que
   no se pueda escribir en el enunciado no es responsive, es ilegible. */
@media (max-width: 760px) {
    .fila-encabezado { display: none; }
    .fila-pregunta { grid-template-columns: 1fr; }
    .celda-tipo, .celda-botones { justify-content: flex-start; }
    .panel-tipos { flex-direction: column; }
    .panel-columna + .panel-columna { border-left: none; border-top: 1px solid var(--rule-soft); }
    .panel-lista { width: auto; }
}

/* ---------------------------------------------------------------------------
   RESPONDER UNA PREGUNTA

   Una pregunta ya no es solo botones: puede ser un texto, un numero, una
   fecha, una firma o unas coordenadas. Lo que no cambia es que se responde
   de pie en una tienda, con el telefono en una mano: todo lo pulsable mide
   lo que mide un dedo.
   --------------------------------------------------------------------------- */

.botones-respuesta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.boton-respuesta {
    flex: 1 1 auto;
    width: auto;
    text-transform: none;
    letter-spacing: 0.04em;
    min-width: 92px;
    padding: 11px 14px;
    font-size: 12px;
    background: var(--surface-soft);
    color: var(--text);
}

.boton-respuesta.elegida { background: var(--brand); color: var(--co-blanco); }
.boton-respuesta:disabled { opacity: 0.5; cursor: default; }

.casilla-respuesta {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    font-size: 13px;
    cursor: pointer;
}

.casilla-respuesta:hover { border-color: var(--brand); }

.fila-control {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.fila-control input[type="range"] { flex: 1 1 180px; min-width: 0; }
.fila-control .search-input { flex: 1 1 140px; min-width: 0; }

.valor-deslizante {
    min-width: 42px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--brand);
}

/* El lienzo se dibuja a 600x200 y se muestra al ancho que haya; la escala
   la corrige visita.js para que el trazo caiga donde esta el dedo. */
.lienzo-caja { display: flex; flex-direction: column; gap: 10px; }

.lienzo {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    background: var(--surface);
    border: 1px dashed var(--brand-line);
    border-radius: 2px;
    touch-action: none;
    cursor: crosshair;
}

.lienzo-botones { display: flex; gap: 8px; flex-wrap: wrap; }

.pista-respuesta { margin: 0; font-size: 13px; opacity: 0.65; }

.opcional {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-left: 6px;
}

/* Si la pregunta está respondida o no, a la derecha de su enunciado.

   El enunciado manda, así que la marca no compite con él: se queda arriba
   a la derecha, no se encoge por mucho que el enunciado ocupe, y en
   pantalla estrecha se pone debajo en vez de estrujarlo. */
.cabecera-pregunta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.marca-respuesta {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 2px;
    border: 1px solid;
}

/* El punto se dibuja, no se escribe. Un «✓» o un «○» dependen de que la
   tipografía los traiga, y Montserrat no trae el círculo: salía un
   cuadradito. Relleno cuando está respondida, hueco cuando falta. */
.marca-respuesta::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
}

.marca-respuesta.respondida {
    color: var(--brand);
    border-color: var(--brand-tint-18);
    background: var(--brand-tint-08);
}

.marca-respuesta.respondida::before { background: currentColor; }

.marca-respuesta.pendiente::before {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Lo que falta tiene que verse sin buscarlo, pero sin alarmar: una
   pregunta por responder no es un error, es trabajo pendiente. De ahí el
   contorno en vez del relleno, y el gris en vez del rojo. */
.marca-respuesta.pendiente {
    color: var(--muted);
    border-color: var(--brand-line);
    background: transparent;
}

@media (max-width: 560px) {
    .cabecera-pregunta { flex-direction: column; gap: 8px; }
}

/* El estado del guardado, junto al contador que cambia. Discreto: lo
   normal es que diga «Guardado» y nadie lo mire; solo tiene que saltar a
   la vista cuando algo no salio. */
.estado-guardado {
    margin-left: 10px;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.estado-guardado.ok { color: var(--brand); }

.estado-guardado.error {
    color: var(--danger);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Capa de «cargando» (static/carga.js)
   --------------------------------------------------------------------------- */

.capa-carga {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--co-navy-rgb), 0.35);
    cursor: progress;
}

.capa-carga-caja {
    background: var(--surface);
    padding: 28px 40px 24px;
    border-radius: 2px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(var(--co-navy-rgb), 0.25);
}

.capa-carga-caja p {
    margin: 0;
    font-size: 14px;
    color: rgba(var(--co-navy-rgb), 0.8);
}

.giro {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 4px solid rgba(var(--co-navy-rgb), 0.15);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: giro 0.8s linear infinite;
}

@keyframes giro {
    to { transform: rotate(360deg); }
}

/* Quien pide menos movimiento ve el mismo círculo, más despacio. */
@media (prefers-reduced-motion: reduce) {
    .giro { animation-duration: 2.4s; }
}