/* Portal de la agencia. Sistema Apple (Robmar, 27-oct: «un poco mas tech, tipo el look de Apple que
   tenemos»; el mismo de la plataforma de Omar Mata): pagina gris #F5F5F7, superficies blancas, tinta
   #1D1D1F, hairlines #E5E5EA, capsulas, esquinas de 12 a 18 px, barras translucidas con el contenido
   pasando por debajo y respuesta al pulsar. Una sola tinta de acento, la de la marca de la agencia
   (/marca/<id>/tema.css; por defecto el azul #0071E3). Sin degradados, brillos ni particulas.

   Las variables conservan su nombre: --fondo es la SUPERFICIE (blanca) y --pagina el gris de fondo. */

:root {
  --pagina: #f5f5f7;
  --fondo: #ffffff;
  --fondo-suave: #f5f5f7;
  --fondo-hundido: #e8e8ed;
  --fondo-hundido-hover: #dcdce1;
  --tinta: #1d1d1f;
  --tinta-suave: #6e6e73;  /* 4,9:1 sobre blanco, 4,5:1 sobre --pagina */
  --borde: #e5e5ea;
  --borde-fuerte: #d2d2d7;
  --flecha: #c7c7cc;
  --error: #b3261e;
  --error-fondo: #fdecec;
  --ok: #1f7a35;
  --ok-fondo: #e6f6ea;
  --aviso: #8a4a00;
  --aviso-fondo: #fff3e0;
  --ok-borde: #bfe6c8;
  --aviso-borde: #f5d9b0;
  --error-borde: #f5c2c2;
  --aviso-linea: #c47f00;
  --ok-sobre: #ffffff;
  --etiqueta-tinta: #3a3a3c;
  --hover-suave: rgba(0, 0, 0, .045);
  --hover-fuerte: rgba(0, 0, 0, .08);
  --campo-busqueda: rgba(118, 118, 128, .12);
  --segmento-activo: #ffffff;
  --segmento-hover: rgba(255, 255, 255, .55);
  --segmento-sombra: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
  --cristal-inferior: rgba(249, 249, 251, .8);
  --solido-barra: #f5f5f7;
  --solido-lateral: #fbfbfd;
  --solido-inferior: #f9f9fb;
  --radio: 12px;
  --radio-chico: 8px;
  --radio-grande: 18px;
  --capsula: 980px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 30px rgba(0, 0, 0, .06);
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, .05);
  --sombra-flotante: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  --cristal: rgba(245, 245, 247, .72);
  --cristal-lateral: rgba(251, 251, 253, .82);
  --cristal-linea: rgba(0, 0, 0, .08);
  --t-rapida: 120ms;
  --t-media: 200ms;
  --curva: cubic-bezier(.2, .6, .3, 1);
  color-scheme: light;
  --lateral: 252px;
  --alto-barra: 56px;
  --alto-inferior: 62px;
  /* El tema de la agencia las vuelve a definir; estos son los valores si no carga. */
  --acento: #0071e3;
  --acento-texto: #ffffff;
  --acento-enlace: #0066cc;
  --acento-fuerte: #0060c1;
  --acento-suave: #e3f0fd;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.47;
  color: var(--tinta);
  background: var(--pagina);
}

/* ------------------------------------------------------------------ modo oscuro */
/* Los mismos nombres con los valores oscuros de Apple: pagina negra, superficies #1c1c1e, hairlines
   claros. Manda lo que se eligio con el boton (data-tema en <html>, lo pone tema.js antes de pintar);
   si no se eligio nada, manda el sistema. El acento oscuro lo pone la hoja de la marca. */
:root[data-tema="oscuro"] {
  --pagina: #000000; --fondo: #1c1c1e; --fondo-suave: #2c2c2e; --fondo-hundido: #2c2c2e; --fondo-hundido-hover: #3a3a3c;
  --tinta: #f5f5f7; --tinta-suave: #98989d; --borde: #38383a; --borde-fuerte: #48484a; --flecha: #5a5a5e;
  --error: #ff6961; --error-fondo: rgba(255, 69, 58, .16); --ok: #30d158; --ok-fondo: rgba(48, 209, 88, .15);
  --aviso: #ffb340; --aviso-fondo: rgba(255, 159, 10, .15);
  --ok-borde: rgba(48, 209, 88, .35); --aviso-borde: rgba(255, 159, 10, .35); --error-borde: rgba(255, 69, 58, .4);
  --aviso-linea: #ff9f0a; --ok-sobre: #000000; --etiqueta-tinta: #e5e5ea;
  --hover-suave: rgba(255, 255, 255, .06); --hover-fuerte: rgba(255, 255, 255, .1); --campo-busqueda: rgba(118, 118, 128, .24);
  --segmento-activo: #636366; --segmento-hover: rgba(255, 255, 255, .06); --segmento-sombra: 0 1px 3px rgba(0, 0, 0, .5);
  --sombra: 0 1px 2px rgba(0, 0, 0, .6), 0 8px 30px rgba(0, 0, 0, .5); --sombra-suave: 0 0 0 transparent;
  --sombra-flotante: 0 12px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  --cristal: rgba(22, 22, 23, .72); --cristal-lateral: rgba(28, 28, 30, .78); --cristal-linea: rgba(255, 255, 255, .1);
  --cristal-inferior: rgba(22, 22, 23, .8); --solido-barra: #161617; --solido-lateral: #1c1c1e; --solido-inferior: #161617;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  --pagina: #000000; --fondo: #1c1c1e; --fondo-suave: #2c2c2e; --fondo-hundido: #2c2c2e; --fondo-hundido-hover: #3a3a3c;
  --tinta: #f5f5f7; --tinta-suave: #98989d; --borde: #38383a; --borde-fuerte: #48484a; --flecha: #5a5a5e;
  --error: #ff6961; --error-fondo: rgba(255, 69, 58, .16); --ok: #30d158; --ok-fondo: rgba(48, 209, 88, .15);
  --aviso: #ffb340; --aviso-fondo: rgba(255, 159, 10, .15);
  --ok-borde: rgba(48, 209, 88, .35); --aviso-borde: rgba(255, 159, 10, .35); --error-borde: rgba(255, 69, 58, .4);
  --aviso-linea: #ff9f0a; --ok-sobre: #000000; --etiqueta-tinta: #e5e5ea;
  --hover-suave: rgba(255, 255, 255, .06); --hover-fuerte: rgba(255, 255, 255, .1); --campo-busqueda: rgba(118, 118, 128, .24);
  --segmento-activo: #636366; --segmento-hover: rgba(255, 255, 255, .06); --segmento-sombra: 0 1px 3px rgba(0, 0, 0, .5);
  --sombra: 0 1px 2px rgba(0, 0, 0, .6), 0 8px 30px rgba(0, 0, 0, .5); --sombra-suave: 0 0 0 transparent;
  --sombra-flotante: 0 12px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  --cristal: rgba(22, 22, 23, .72); --cristal-lateral: rgba(28, 28, 30, .78); --cristal-linea: rgba(255, 255, 255, .1);
  --cristal-inferior: rgba(22, 22, 23, .8); --solido-barra: #161617; --solido-lateral: #1c1c1e; --solido-inferior: #161617;
  color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pagina); color: var(--tinta); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { max-width: 100%; }
/* La letra cambia de forma con el tamano: titulares grandes y apretados, cuerpo en 0. */
h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -.022em; margin: 0 0 .75rem; font-weight: 700; }
h2 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.012em; margin: 0 0 .75rem; font-weight: 600; }
h3 { font-size: 1.0625rem; letter-spacing: -.008em; font-weight: 600; }
p { margin: 0 0 1rem; }
small { font-size: .85rem; }
a { color: var(--acento-enlace); text-decoration: none; }
a:hover { color: var(--acento-fuerte); text-decoration: underline; text-underline-offset: 2px; }
p a, .ayuda a, .alerta a, .migas a, .sub a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: .9em; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--fondo); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); padding: .5rem .75rem; z-index: 50; }
.saltar:focus { left: .5rem; top: .5rem; }
.sub { color: var(--tinta-suave); margin-bottom: 1.25rem; font-size: 1.0625rem; }
h1 + .sub { margin-top: -.35rem; }
.tenue { color: var(--tinta-suave); }
.ayuda { color: var(--tinta-suave); font-size: .875rem; margin: .35rem 0 0; }
.migas { color: var(--tinta-suave); font-size: .875rem; margin-bottom: .35rem; }
.icono { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------ marca */
.marca-bloque { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca-bloque:hover { color: var(--tinta); text-decoration: none; }
.marca-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 9px; flex: none; }
.marca-inicial {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--acento-texto); font-weight: 700; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.marca-nombre { font-weight: 650; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-grande { justify-content: center; margin-bottom: 1.5rem; }
.marca-grande .marca-logo, .marca-grande .marca-inicial { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 13px; }
.marca-grande .marca-nombre { font-size: 1.3rem; }

/* ------------------------------------------------------------------ estructura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
/* La barra lateral es un material: claro, translucido y separado por un hairline. */
.lateral {
  border-right: 1px solid var(--cristal-linea); background: var(--cristal-lateral);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  padding: 1.1rem .75rem; display: flex; flex-direction: column; gap: 1.1rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca-bloque { padding: .25rem .5rem; }
.menu { display: flex; flex-direction: column; gap: 1px; }
.menu-enlace {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 10px;
  color: var(--tinta); text-decoration: none; font-size: .9375rem; width: 100%;
  transition: background-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.menu-enlace .icono { color: var(--tinta-suave); transition: color var(--t-rapida) var(--curva); }
.menu-enlace:hover { background: var(--hover-suave); color: var(--tinta); text-decoration: none; }
.menu-enlace:active { background: var(--hover-fuerte); }
.menu-enlace.activo { background: var(--acento-suave); color: var(--acento-enlace); font-weight: 600; }
.menu-enlace.activo .icono { color: var(--acento-enlace); }
.lateral-pie { margin-top: auto; border-top: 1px solid var(--cristal-linea); padding-top: .75rem; display: flex; flex-direction: column; gap: 1px; }
.lateral-pie .menu-enlace span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.como-enlace { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; color: inherit; padding: 0; }
.menu-enlace.como-enlace { padding: .5rem .7rem; }
.como-enlace.mostrar { display: block; margin: .3rem 0 0 auto; font-size: .85rem; color: var(--acento-enlace); text-decoration: underline; }
.contador {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--capsula);
  background: var(--acento); color: var(--acento-texto); font-size: .75rem; font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}

.columna { min-width: 0; display: flex; flex-direction: column; }
/* La barra de arriba flota sobre el contenido: el contenido pasa por debajo, desenfocado. */
.superior {
  height: var(--alto-barra); border-bottom: 1px solid var(--cristal-linea); background: var(--cristal);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  display: flex; align-items: center; gap: .75rem; padding: 0 2rem; position: sticky; top: 0; z-index: 20;
}
.marca-movil { display: none; }
.buscador { position: relative; flex: 1; max-width: 460px; }
.buscador .icono { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-suave); pointer-events: none; width: 18px; height: 18px; }
.buscador input[type="search"] {
  width: 100%; height: 36px; min-height: 36px; padding: 0 .75rem 0 36px; font: inherit; font-size: .9375rem;
  border: 1px solid transparent; border-radius: 10px; background: var(--campo-busqueda); color: var(--tinta);
  transition: background-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
.buscador input[type="search"]::placeholder { color: var(--tinta-suave); }
.buscador input[type="search"]:focus { background: var(--fondo); border-color: var(--borde-fuerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); outline: none; }
.contenido { padding: 2rem 2rem 3rem; max-width: 1040px; width: 100%; }

/* ------------------------------------------------------------------ modo claro / oscuro */
.tema-boton {
  margin-left: auto; width: 38px; height: 38px; border: 0; border-radius: var(--capsula); background: none; color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
}
.tema-boton:hover { background: var(--hover-fuerte); }
.tema-boton:active { transform: scale(.94); }
.tema-boton + .campana { margin-left: 0; }
/* En claro se ofrece la luna; en oscuro, el sol. */
.tema-boton .icono:last-child { display: none; }
:root[data-tema="oscuro"] .tema-boton .icono:first-child { display: none; }
:root[data-tema="oscuro"] .tema-boton .icono:last-child { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-boton .icono:first-child { display: none; }
  :root:not([data-tema="claro"]) .tema-boton .icono:last-child { display: inline; }
}

/* ------------------------------------------------------------------ campana */
.campana { position: relative; margin-left: auto; }
.campana summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: var(--capsula);
  display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--tinta);
  transition: background-color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
}
.campana summary::-webkit-details-marker { display: none; }
.campana summary:hover, .campana[open] summary { background: var(--hover-fuerte); }
.campana summary:active { transform: scale(.94); }
.contador-campana { position: absolute; top: 1px; right: -1px; margin: 0; min-width: 18px; height: 18px; font-size: .7rem; box-shadow: 0 0 0 2px var(--pagina); }
/* El panel nace de la campana (origen arriba a la derecha) y vuelve a ella. */
.campana-panel {
  position: absolute; right: 0; top: 46px; width: min(360px, calc(100vw - 2rem)); background: var(--fondo);
  border: 1px solid var(--cristal-linea); border-radius: 16px; padding: .9rem; z-index: 30; box-shadow: var(--sombra-flotante);
  transform-origin: top right; animation: aparecer var(--t-media) var(--curva);
}
@keyframes aparecer { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.campana-titulo { font-weight: 650; margin-bottom: .5rem; letter-spacing: -.01em; }
.campana-lista { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 320px; overflow-y: auto; }
.campana-lista li { padding: .55rem 0; border-top: 1px solid var(--borde); display: flex; flex-direction: column; font-size: .9rem; }
.campana-lista li.sin-leer a, .campana-lista li.sin-leer strong { font-weight: 650; }
.campana-lista span, .campana-lista time { color: var(--tinta-suave); font-size: .8rem; }
.campana-vacio { color: var(--tinta-suave); font-size: .9rem; }
.campana-todos { font-size: .9rem; }

/* ------------------------------------------------------------------ componentes */
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado h1 { margin: 0; }
.tarjeta {
  border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.5rem; margin-bottom: 1rem;
  background: var(--fondo); box-shadow: var(--sombra-suave);
}
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.acciones form { margin: 0; }

/* Botones: capsula, y la respuesta esta en el momento de pulsar, no al soltar. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem 1.3rem;
  border-radius: var(--capsula); border: 1px solid var(--acento); background: var(--acento); color: var(--acento-texto);
  font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: var(--acento-texto); text-decoration: none; }
.boton:active { transform: scale(.97); }
.boton.secundario { background: var(--fondo-hundido); color: var(--tinta); border-color: transparent; }
.boton.secundario:hover { background: var(--fondo-hundido-hover); color: var(--tinta); border-color: transparent; }
.boton.peligro { background: var(--error); border-color: var(--error); color: #fff; }
.boton.peligro:hover { background: #8f1d17; border-color: #8f1d17; color: #fff; }
.boton.ancho { width: 100%; }

.campo { margin-bottom: 1.1rem; }
.campo label, .etiqueta-fija { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9375rem; letter-spacing: -.005em; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .85rem; font: inherit; color: var(--tinta);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--fondo);
  transition: border-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
input::placeholder, textarea::placeholder { color: #8e8e93; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); }
input[type="file"] { width: 100%; font: inherit; padding: .4rem 0; color: var(--tinta-suave); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: .75rem; padding: .45rem 1rem; cursor: pointer;
  border: 0; border-radius: var(--capsula); background: var(--fondo-hundido); color: var(--tinta);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--acento); }
.con-error input, .con-error select, .con-error textarea { border-color: var(--error); }
.con-error input:focus, .con-error select:focus, .con-error textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 15%, transparent); }
.error { color: var(--error); font-size: .875rem; margin: .35rem 0 0; }
.formulario { max-width: 560px; }
.color-fila { display: flex; gap: .5rem; align-items: center; }
.color-selector { width: 52px !important; min-width: 52px; padding: 2px !important; cursor: pointer; }
.logo-actual img { max-width: 120px; max-height: 80px; border: 1px solid var(--borde); border-radius: var(--radio); padding: .25rem; background: var(--fondo); }
.valor-fijo { margin: 0; }
.casilla { display: flex; align-items: center; gap: .55rem; font-weight: 400 !important; margin-bottom: .35rem; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .1rem .75rem; margin-bottom: .75rem; }
.acceso { border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem 1rem; margin: 0 0 .75rem; background: var(--fondo); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); }

.alerta { border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; font-size: .9375rem; }
.alerta-error { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); }
.alerta-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.alerta-aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }

/* Estados: capsulas tintadas, con texto que pasa AA sobre su fondo. */
.etiqueta { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--capsula); font-size: .75rem; font-weight: 600; letter-spacing: .005em; border: 1px solid transparent; background: var(--fondo-hundido); color: var(--etiqueta-tinta); white-space: nowrap; }
.etiqueta-activo { background: var(--ok-fondo); color: var(--ok); }
.etiqueta-prueba { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta-pausado { background: var(--fondo-hundido); color: var(--tinta); }
.etiqueta-desactivado, .etiqueta-error { background: var(--error-fondo); color: var(--error); }
.etiqueta-rol { background: var(--fondo); border-color: var(--borde); color: var(--tinta-suave); }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex: none; }
.punto-ok { background: #34c759; }
.punto-aviso { background: #ff9f0a; }
.punto-error { background: #ff3b30; }

/* Listas agrupadas, como Ajustes: un bloque blanco, separadores y una flecha en lo que abre algo. */
.lista { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); overflow: hidden; box-shadow: var(--sombra-suave); }
.lista > li + li { border-top: 1px solid var(--borde); }
.fila { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; color: var(--tinta); text-decoration: none; width: 100%; min-height: 58px; transition: background-color var(--t-rapida) var(--curva); }
a.fila:hover, button.fila:hover { background: var(--fondo-suave); color: var(--tinta); text-decoration: none; }
a.fila:active, button.fila:active { background: var(--fondo-hundido); }
a.fila::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: .15rem; border-top: 2px solid var(--flecha); border-right: 2px solid var(--flecha); transform: rotate(45deg); }
.fila-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fila-texto strong { font-weight: 600; letter-spacing: -.008em; }
.fila-texto small { color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; }
.fila-meta { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.lista li form { margin: 0; }
.aviso.sin-leer { background: var(--acento-suave); }

/* Filtros: control segmentado. */
.filtros { display: inline-flex; gap: 2px; flex-wrap: wrap; margin-bottom: 1.1rem; padding: 3px; background: var(--fondo-hundido); border-radius: 11px; max-width: 100%; }
.filtros a { padding: .35rem .95rem; border-radius: 8px; text-decoration: none; color: var(--tinta); font-size: .875rem; font-weight: 500; transition: background-color var(--t-rapida) var(--curva), box-shadow var(--t-rapida) var(--curva); }
.filtros a:hover { background: var(--segmento-hover); color: var(--tinta); text-decoration: none; }
.filtros a.activo { background: var(--segmento-activo); color: var(--tinta); font-weight: 600; box-shadow: var(--segmento-sombra); }

/* Cifras del Inicio: mosaicos blancos, numeros tabulares y grandes. */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.75rem; }
.dato {
  border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.1rem 1.2rem; text-decoration: none; color: var(--tinta);
  display: flex; flex-direction: column; gap: .15rem; background: var(--fondo); box-shadow: var(--sombra-suave);
  transition: box-shadow var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
.dato:hover { color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); transform: translateY(-1px); }
.dato:active { transform: scale(.985); }
.dato-valor { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.dato-valor small { font-size: 1rem; font-weight: 500; color: var(--tinta-suave); letter-spacing: 0; }
.dato-nombre { color: var(--tinta-suave); font-size: .875rem; }
/* Las cifras sueltas en la pagina (Acerca, Clientes) tambien son mosaicos. */
.contenido > .cifras > div { background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; padding: .9rem 1.05rem; box-shadow: var(--sombra-suave); }
.contenido > .cifras { margin-bottom: 1.5rem; }

.vacio { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-grande); padding: 2.5rem 1.25rem; text-align: center; background: var(--fondo); }
.vacio-titulo { font-weight: 650; letter-spacing: -.01em; margin-bottom: .25rem; font-size: 1.0625rem; }
.vacio-texto { color: var(--tinta-suave); max-width: 46ch; margin: 0 auto; }

.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .9rem; }
.tarjeta-bot {
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 1.1rem 1.2rem; text-decoration: none; color: var(--tinta); height: 100%; background: var(--fondo); box-shadow: var(--sombra-suave);
  transition: box-shadow var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
.tarjeta-bot:hover { color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); transform: translateY(-1px); }
.tarjeta-bot:active { transform: scale(.985); }
.tarjeta-bot-nombre { font-weight: 650; font-size: 1.0625rem; letter-spacing: -.012em; }
.tarjeta-bot-rubro { color: var(--tinta-suave); font-size: .85rem; }
.tarjeta-bot-linea { font-size: .9rem; display: flex; align-items: center; }

.datos { margin: 0 0 1rem; }
.datos > div { display: flex; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
.datos > div:first-child { border-top: 0; }
.datos dt { width: 11rem; flex: none; color: var(--tinta-suave); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.comprobaciones { list-style: none; margin: 0 0 .75rem; padding: 0; }
.comprobaciones li { display: flex; align-items: flex-start; padding: .45rem 0; gap: .25rem; }
.comprobaciones .punto { margin-top: 7px; }
.confirmar { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: .75rem; }
.confirmar summary { cursor: pointer; color: var(--error); font-weight: 600; }

.temporal { margin: 1rem 0; }
.temporal code, .clave { display: inline-block; padding: .6rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); font-size: 1.15rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.pasos { padding-left: 1.25rem; margin: 0 0 1rem; }
.pasos li { margin-bottom: .35rem; }
.qr { width: 220px; max-width: 70%; margin: 0 0 1rem; border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.manual { margin-bottom: 1.25rem; }
.manual summary { cursor: pointer; color: var(--acento-enlace); }

/* ------------------------------------------------------------------ paginas publicas */
.publica { background: var(--pagina); }
.tarjeta-centrada { max-width: 420px; margin: 0 auto; padding: 10vh 1rem 2rem; }
.publica .tarjeta { padding: 2rem 1.75rem; border-radius: 22px; box-shadow: var(--sombra); border-color: transparent; }
.publica h1 { font-size: 1.75rem; }
.publica .boton { width: 100%; min-height: 48px; font-size: 1rem; }
.pie-ayuda { text-align: center; color: var(--tinta-suave); font-size: .875rem; margin-top: 1.25rem; }
.pie-ayuda .como-enlace { color: var(--acento-enlace); text-decoration: underline; }

/* ------------------------------------------------------------------ barra inferior (telefono) */
.inferior { display: none; }

@media (max-width: 899px) {
  .app { display: block; }
  .lateral { display: none; }
  .superior { padding: 0 .9rem; gap: .5rem; height: auto; min-height: var(--alto-barra); flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; }
  .marca-movil { display: flex; flex: 1; }
  .buscador { order: 3; flex: 1 0 100%; max-width: none; }
  .campana { margin-left: 0; }
  .tema-boton { margin-left: 0; }
  .campana-panel { right: -2.5rem; }
  .contenido { padding: 1.25rem 1rem calc(var(--alto-inferior) + 1.75rem); }
  /* La barra de pestanas, translucida como en iOS. */
  .inferior {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--cristal-inferior); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--cristal-linea); height: calc(var(--alto-inferior) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  .inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative;
    text-decoration: none; color: #8e8e93; font-size: .6875rem; font-weight: 500; min-height: 48px;
    transition: color var(--t-rapida) var(--curva), transform var(--t-rapida) var(--curva);
  }
  .inferior a:active { transform: scale(.94); }
  .inferior a.activo { color: var(--acento-enlace); font-weight: 600; }
  .contador-inferior { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; font-size: .65rem; padding: 0 4px; }
  .datos > div { flex-direction: column; gap: 0; }
  .aviso .fila { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .aviso a.fila::after { display: none; }
  .datos dt { width: auto; font-size: .85rem; }
  h1 { font-size: 1.75rem; }
  .tarjeta { padding: 1.15rem; border-radius: 16px; }
  .boton { min-height: 46px; }
  .encabezado .boton { width: auto; }
  .tarjeta-centrada { padding-top: 6vh; }
  .publica .tarjeta { padding: 1.5rem 1.25rem; }
}

@media (max-width: 380px) {
  .inferior a { font-size: .66rem; }
  .resumen { grid-template-columns: 1fr 1fr; }
  .dato-valor { font-size: 1.6rem; }
}

/* ------------------------------------------------------------------ preferencias de quien mira */
/* Menos movimiento: sin escalas ni desplazamientos; los cambios de color se quedan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
  .boton:active, .dato:hover, .dato:active, .tarjeta-bot:hover, .tarjeta-bot:active, .campana summary:active, .inferior a:active { transform: none; }
}
/* Menos transparencia: las barras se vuelven solidas. */
@media (prefers-reduced-transparency: reduce) {
  .superior { background: var(--solido-barra); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lateral { background: var(--solido-lateral); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .inferior { background: var(--solido-inferior); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Mas contraste: bordes definidos y texto secundario mas oscuro. */
@media (prefers-contrast: more) {
  :root { --borde: #8e8e93; --borde-fuerte: #636366; --tinta-suave: #3a3a3c; --cristal-linea: rgba(0, 0, 0, .35); }
  .superior, .lateral, .inferior { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}