/* Panel de ivandelgado.pe
 *
 * La paleta se construye como la de TECOMSER: una rampa de marca, una rampa
 * neutra y encima los nombres semanticos. Las pantallas no usan nunca un
 * color crudo, solo el nombre de su funcion. Cambiar el color de la marca es
 * tocar la rampa de arriba y nada mas.
 */

:root {
  /* Rampa de marca. Es negra: el panel se viste como el de TECOMSER, con
   * el azul marino cambiado por el negro de la marca. El 900 es el del
   * menu; el resto sale de el aclarando. */
  --marca-950: #000000;
  --marca-900: #0a0a0a;
  --marca-800: #18181b;
  --marca-700: #27272a;
  --marca-600: #3f3f46;
  --marca-500: #52525b;
  --marca-400: #71717a;
  --marca-300: #a1a1aa;
  --marca-200: #d4d4d8;
  --marca-100: #e4e4e7;
  --marca-50:  #f4f4f5;

  /* Rampa neutra: gris frio, de la misma familia que el negro. */
  --gris-900: #18181b;
  --gris-800: #27272a;
  --gris-700: #3f3f46;
  --gris-600: #52525b;
  --gris-500: #71717a;
  --gris-400: #a1a1aa;
  --gris-300: #d4d4d8;
  --gris-200: #e4e4e7;
  --gris-100: #f4f4f5;
  --gris-50:  #fafafa;

  /* Nombres semanticos: esto es lo unico que usan las pantallas. */
  --fondo: var(--gris-100);
  --panel: #ffffff;
  --panel-suave: var(--gris-50);

  --menu: var(--marca-900);
  --menu-texto: rgba(255, 255, 255, .72);
  --menu-activo: #ffffff;
  --menu-grupo: rgba(255, 255, 255, .42);

  /* La tinta del menu: blanco sobre fondo oscuro. La Apariencia la cambia a
   * casi negro si el fondo elegido es claro, y todo el menu la sigue. */
  --menu-tinta: 255, 255, 255;
  --menu-logo: none;

  --texto: var(--gris-900);
  --texto-suave: var(--gris-600);
  --texto-tenue: var(--gris-500);

  --borde: var(--gris-200);
  --borde-fuerte: var(--gris-300);

  --acento: var(--marca-700);
  --acento-hover: var(--marca-800);
  --acento-suave: var(--marca-50);
  --acento-borde: var(--marca-200);

  --ok: #087443;
  --ok-fondo: #edf9f2;
  --ok-borde: #b7e6ca;

  --peligro: #b42318;
  --peligro-fondo: #fff4f3;
  --peligro-borde: #f2c6c2;

  /* Escala de radios: tarjetas, campos y pastillas no comparten radio, y
   * cuando lo comparten el resultado se ve plano. */
  --radio-tarjeta: 14px;
  --radio-campo: 9px;
  --radio-pastilla: 999px;

  /* Sombras en capas. Una sola sombra se ve como un borde gris; varias capas
   * a distinta distancia es lo que da sensacion de altura. */
  --sombra-tarjeta:
    0 1px 2px rgba(9, 9, 11, .05),
    0 4px 12px rgba(9, 9, 11, .04);

  --sombra-alta:
    0 1px 2px rgba(9, 9, 11, .06),
    0 8px 20px rgba(9, 9, 11, .07),
    0 24px 48px rgba(9, 9, 11, .05);

  --sombra-boton: 0 1px 2px rgba(9, 9, 11, .18);

  --anillo: 0 0 0 3px var(--marca-200);

  --menu-ancho: 15.5rem;
}

/* Sin modo oscuro: el panel es siempre menu negro sobre area clara, como
 * TECOMSER. Con el oscuro del sistema, el negro del menu se fundia con el
 * fondo y se perdia el contraste que ordena la pantalla. */

* { box-sizing: border-box; }

html { background: var(--fondo); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

/* Un unico anillo de foco para todo lo enfocable. Sin esto, quien navega con
 * el teclado no sabe donde esta parado. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { letter-spacing: -.01em; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  color: var(--texto-suave);
}

.nowrap { white-space: nowrap; }
.vacio { color: var(--texto-tenue); }

.pista {
  color: var(--texto-suave);
  font-size: .85rem;
  margin: .4rem 0 0;
}

/* --- Controles --- */

button, .boton {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--acento);
  color: var(--acento-texto, #fff);
  border: 1px solid transparent;
  border-radius: var(--radio-campo);
  padding: .55rem 1.05rem;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--sombra-boton);
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}

button:hover, .boton:hover { background: var(--acento-hover); }

/* El boton se hunde en vez de moverse: confirma la pulsacion sin desplazar
 * lo que tiene al lado. */
button:active, .boton:active { transform: translateY(1px); box-shadow: none; }

.boton--sutil {
  background: var(--panel);
  color: var(--texto);
  border-color: var(--borde-fuerte);
  box-shadow: none;
}

.boton--sutil:hover { background: var(--panel-suave); border-color: var(--texto-tenue); }

.boton--peligro {
  background: transparent;
  color: var(--peligro);
  border-color: var(--peligro-borde);
  box-shadow: none;
}

.boton--peligro:hover { background: var(--peligro-fondo); border-color: var(--peligro); }

input, textarea, select {
  font: inherit;
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-campo);
  background: var(--panel);
  color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--anillo);
}

input::placeholder, textarea::placeholder { color: var(--texto-tenue); }

textarea { resize: vertical; line-height: 1.6; min-height: 7rem; }

label {
  display: grid;
  gap: .35rem;
  margin-bottom: 1.1rem;
  font-weight: 600;
  font-size: .8rem;
  color: var(--texto-suave);
}

label input, label textarea, label select {
  font-weight: 400;
  color: var(--texto);
}

label.casilla {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 400;
  color: var(--texto);
}

label.casilla input { width: auto; accent-color: var(--acento); }

fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 1.1rem;
  margin: 0 0 1.1rem;
  background: var(--panel-suave);
}

legend {
  font-weight: 700;
  font-size: .78rem;
  padding: 0 .45rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}

/* --- Avisos --- */

.aviso {
  padding: .75rem 1rem;
  border-radius: var(--radio-campo);
  border: 1px solid var(--borde);
  background: var(--panel);
  font-size: .9rem;
  margin: 0 0 1.25rem;
}

.aviso--ok {
  border-color: var(--ok-borde);
  background: var(--ok-fondo);
  color: var(--ok);
}

.aviso--error {
  border-color: var(--peligro-borde);
  background: var(--peligro-fondo);
  color: var(--peligro);
}

/* --- Acceso ----------------------------------------------------------------
 *
 * La unica pantalla del panel que ve alguien que todavia no ha entrado, asi
 * que lleva la marca encima. Como la de TECOMSER: fondo negro, una sola
 * tarjeta blanca con el logo arriba y el formulario debajo.
 *
 * La letra es Inter, servida desde el propio panel: la politica de
 * contenido no deja cargarla de otro dominio, y la del sistema cambia de
 * una computadora a otra. Va con nombre propio para no cambiarle la letra
 * al resto del panel sin querer.
 */

@font-face {
  font-family: 'Inter Acceso';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Acceso';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html.acceso-html { background: #000; }

.acceso {
  --acceso-tinta: #0a0a0a;
  --acceso-texto: #18181b;
  --acceso-suave: #52525b;
  --acceso-tenue: #8a8a93;
  --acceso-borde: #e4e4e7;
  --acceso-borde-fuerte: #d4d4d8;
  --acceso-campo: #fafafa;

  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem;
  overflow-x: hidden;
  background: #000;
  color: var(--acceso-texto);
  font-family: 'Inter Acceso', Inter, ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
}

/* El fondo es negro liso: la tarjeta es lo unico que hay que mirar. */
.acceso__fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

.acceso__caja {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: #fff;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 4px rgba(0, 0, 0, .3),
    0 24px 60px rgba(0, 0, 0, .55),
    0 60px 120px rgba(0, 0, 0, .45);
  overflow: hidden;
  animation: acceso-entra .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes acceso-entra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Cabecera con el logo --- */

.acceso__marca {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 2.1rem 2rem 0;
  text-align: center;
}

.acceso__logo-enlace { display: inline-block; border-radius: 6px; }
.acceso__logo-enlace:focus-visible { outline: 2px solid var(--acceso-tinta); outline-offset: 6px; }

.acceso__logo {
  display: block;
  width: auto;
  height: 46px;
  max-width: 100%;
}

.acceso__rotulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .2rem 0 0;
  color: var(--acceso-tenue);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.acceso__rotulo::before,
.acceso__rotulo::after {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--acceso-borde-fuerte);
}

/* --- Cuerpo --- */

.acceso__cuerpo { padding: 1.6rem 2.5rem 1.9rem; }

.acceso__titulo { margin-bottom: 1.35rem; text-align: center; }

.acceso__titulo h1 {
  margin: 0 0 .35rem;
  color: var(--acceso-tinta);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.acceso__titulo p {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--acceso-suave);
  font-size: .86rem;
  line-height: 1.55;
}

.acceso__aviso {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--acceso-borde);
  border-radius: 11px;
  background: #fafafa;
  color: var(--acceso-suave);
  font-size: .82rem;
  line-height: 1.5;
}

.acceso__aviso svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.acceso__aviso--error {
  border-color: #f5c2bd;
  background: #fff5f4;
  color: #b42318;
  animation: acceso-sacude .38s ease both;
}

.acceso__aviso--ok { border-color: #b7e6ca; background: #f0faf4; color: #087443; }

@keyframes acceso-sacude {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* --- Formulario --- */

.acceso__formulario { display: grid; gap: 1rem; }

.acceso__campo { display: grid; gap: .4rem; }

.acceso__campo label {
  display: block;
  margin: 0;
  color: var(--acceso-texto);
  font-size: .78rem;
  font-weight: 650;
}

.acceso__control { position: relative; }

.acceso__icono {
  position: absolute;
  top: 50%;
  left: .9rem;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--acceso-tenue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .15s ease;
}

.acceso .acceso__control input {
  width: 100%;
  height: 48px;
  padding: 0 .95rem 0 2.75rem;
  border: 1px solid var(--acceso-borde-fuerte);
  border-radius: 12px;
  background: var(--acceso-campo);
  color: var(--acceso-tinta);
  /* 16px: con menos, el telefono acerca la pantalla al tocar el campo. */
  font: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.acceso .acceso__control input[type="password"],
.acceso .acceso__control input[data-visible] { padding-right: 3rem; }

.acceso .acceso__control input::placeholder { color: #a1a1aa; }

.acceso .acceso__control input:hover { border-color: #a1a1aa; }

.acceso .acceso__control input:focus {
  outline: none;
  border-color: var(--acceso-tinta);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, .08);
}

.acceso__control:focus-within .acceso__icono { stroke: var(--acceso-tinta); }

.acceso .acceso__ver {
  position: absolute;
  top: 50%;
  right: .4rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--acceso-tenue);
  box-shadow: none;
  cursor: pointer;
}

.acceso .acceso__ver:hover { background: #f4f4f5; color: var(--acceso-tinta); }
.acceso .acceso__ver:active { transform: translateY(-50%); }
.acceso .acceso__ver:focus-visible { outline: 2px solid var(--acceso-tinta); outline-offset: 1px; }
.acceso .acceso__ver[hidden] { display: none; }

.acceso__ver svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acceso__ojo-tachado,
.acceso__ver[aria-pressed="true"] .acceso__ojo { display: none; }
.acceso__ver[aria-pressed="true"] .acceso__ojo-tachado { display: block; }

.acceso__pista {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  color: #b54708;
  font-size: .75rem;
  font-weight: 600;
}

.acceso__pista[hidden] { display: none; }

.acceso__pista svg { width: 14px; height: 14px; fill: currentColor; }

.acceso__enlaces {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: -.1rem 0 .15rem;
  font-size: .78rem;
}

.acceso__enlaces a,
.acceso__cifrado {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--acceso-suave);
  font-weight: 600;
  text-decoration: none;
}

.acceso__enlaces a:hover { color: var(--acceso-tinta); text-decoration: underline; text-underline-offset: 3px; }

.acceso__cifrado { color: var(--acceso-tinta); font-weight: 600; }

.acceso__enlaces svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Botones --- */

.acceso .acceso__entrar,
.acceso .acceso__huella {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  border-radius: 12px;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.acceso .acceso__entrar {
  border: 1px solid var(--acceso-tinta);
  background: linear-gradient(180deg, #27272a 0%, #0a0a0a 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 20px -8px rgba(0, 0, 0, .55);
}

.acceso .acceso__entrar:hover { background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 12px 26px -10px rgba(0, 0, 0, .7); }
.acceso .acceso__entrar:active { transform: translateY(1px); }
.acceso .acceso__entrar:focus-visible { outline: 3px solid rgba(10, 10, 10, .25); outline-offset: 2px; }

.acceso__flecha {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.acceso__entrar:hover .acceso__flecha { transform: translateX(3px); }

.acceso__girando {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: acceso-gira .7s linear infinite;
}

.acceso__entrar.esta-enviando { pointer-events: none; opacity: .9; }
.acceso__entrar.esta-enviando .acceso__flecha { display: none; }
.acceso__entrar.esta-enviando .acceso__girando { display: block; }

@keyframes acceso-gira { to { transform: rotate(360deg); } }

.acceso__huella-bloque[hidden] { display: none; }

.acceso__o {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.15rem 0;
  color: var(--acceso-tenue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.acceso__o::before,
.acceso__o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acceso-borde);
}

.acceso .acceso__huella {
  border: 1px solid var(--acceso-borde-fuerte);
  background: #fff;
  color: var(--acceso-tinta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.acceso .acceso__huella:hover { border-color: var(--acceso-tinta); background: #fafafa; }
.acceso .acceso__huella:active { transform: translateY(1px); }
.acceso .acceso__huella:focus-visible { outline: 3px solid rgba(10, 10, 10, .2); outline-offset: 2px; }
.acceso .acceso__huella:disabled { cursor: progress; opacity: .65; }

.acceso__huella svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.acceso__huella-bloque .acceso__aviso { margin: .85rem 0 0; }
.acceso__huella-bloque .acceso__aviso[hidden] { display: none; }

/* --- Pie --- */

.acceso__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .95rem 2.5rem;
  border-top: 1px solid #f0f0f2;
  background: #fafafa;
  color: var(--acceso-tenue);
  font-size: .7rem;
}

.acceso__pie span { display: inline-flex; align-items: center; gap: .35rem; }
.acceso__pie span:last-child { flex: none; white-space: nowrap; }

.acceso__pie svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 520px) {
  .acceso__marca { padding: 1.7rem 1.25rem 0; }
  .acceso__logo { height: 38px; }
  .acceso__cuerpo { padding: 1.35rem 1.25rem 1.5rem; }
  .acceso__titulo h1 { font-size: 1.32rem; }
  .acceso__pie { flex-direction: column; gap: .25rem; padding: .85rem 1.25rem; text-align: center; }
  .acceso__caja { border-radius: 18px; }
}

@media (max-width: 360px) {
  .acceso__enlaces { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso__caja,
  .acceso__aviso--error { animation: none; }
  .acceso__girando { animation-duration: 1.6s; }
}

/* --- Disposicion --- */

.disposicion { display: flex; min-height: 100vh; }

/* --- El menu --------------------------------------------------------------- */

.menu {
  width: var(--menu-ancho);
  flex-shrink: 0;
  background: var(--menu);
  color: var(--menu-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .2s ease;
}

.menu__cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem 1rem .9rem 1.35rem;
}

.menu__marca { display: block; min-width: 0; flex: 1; }

.menu__marca img { display: block; width: 100%; max-width: 9.5rem; height: auto; filter: var(--menu-logo); }

/* Plegar deja el menu en solo iconos. En un portatil, quince centimetros de
 * menu son quince que le faltan a la tabla. */
.menu__plegar {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: rgba(var(--menu-tinta), .1);
  color: rgb(var(--menu-tinta));
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, transform .2s ease;
}

.menu__plegar:hover { background: rgba(var(--menu-tinta), .2); }

.menu__plegar svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- El buscador ------------------------------------------------------------ */

.menu__buscador { position: relative; padding: 0 1rem 1rem; }

.menu__buscador svg {
  position: absolute;
  left: 1.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .6;
  pointer-events: none;
}

.menu__buscador input {
  width: 100%;
  padding: .5rem .7rem .5rem 2.3rem;
  border: 1px solid rgba(var(--menu-tinta), .14);
  border-radius: .6rem;
  background: rgba(var(--menu-tinta), .07);
  color: rgb(var(--menu-tinta));
  font-size: .85rem;
}

.menu__buscador input::placeholder { color: rgba(var(--menu-tinta), .5); }

.menu__buscador input:focus {
  outline: none;
  border-color: rgba(var(--menu-tinta), .4);
  background: rgba(var(--menu-tinta), .12);
  box-shadow: none;
}

/* --- Los enlaces ------------------------------------------------------------ */

/* La lista se desplaza sola: con quince modulos no caben todos en una
 * pantalla de portatil, y la marca y el pie tienen que quedarse fijos. */
.menu__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 .6rem;
  scrollbar-width: thin;
}

.menu__grupo-bloque { margin-bottom: .9rem; }

.menu__grupo {
  margin: 0 0 .35rem;
  padding: 0 .75rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--menu-grupo);
}

.menu__enlace {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  color: var(--menu-texto);
  text-decoration: none;
  font-size: .88rem;
  transition: background .15s ease, color .15s ease;
}

.menu__enlace:hover { color: rgb(var(--menu-tinta)); background: rgba(var(--menu-tinta), .07); }

.menu__enlace.activo {
  color: var(--menu-activo);
  background: rgba(var(--menu-tinta), .13);
  font-weight: 600;
}

.menu__icono {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icono-trazo, 1.7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu__vacio {
  padding: .75rem;
  margin: 0;
  font-size: .82rem;
  color: var(--menu-grupo);
}

/* --- El pie del menu -------------------------------------------------------- */

.menu__pie { padding: .9rem .6rem 1.1rem; border-top: 1px solid rgba(var(--menu-tinta), .1); }

/* --- Plegado ---------------------------------------------------------------- */

/* Plegado se queda en iconos. El texto se esconde con display:none y no con
 * opacidad: invisible pero presente, seguiria empujando el ancho. */
.menu--plegado { width: 4.25rem; }

.menu--plegado .menu__texto,
.menu--plegado .menu__grupo,
.menu--plegado .menu__buscador,
.menu--plegado .menu__marca,
.menu--plegado .pastilla { display: none; }

.menu--plegado .menu__cabecera { justify-content: center; padding-left: 1rem; }
.menu--plegado .menu__plegar { transform: rotate(180deg); }
.menu--plegado .menu__enlace { justify-content: center; padding-left: 0; padding-right: 0; }

.pastilla {
  background: var(--marca-500);
  color: #fff;
  border-radius: var(--radio-pastilla);
  padding: .05rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
}

.area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  padding: .9rem 1.75rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

.barra h1 { margin: 0; font-size: 1.15rem; font-weight: 700; }

.barra__usuario {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--texto-suave);
  font-size: .85rem;
}

.barra__entorno {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .67rem;
  font-weight: 700;
  color: var(--acento);
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  border-radius: var(--radio-pastilla);
  padding: .15rem .6rem;
}

.contenido { padding: 1.75rem; max-width: 80rem; width: 100%; }

/* --- Metricas --- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.metrica {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 1.15rem 1.25rem;
  color: var(--texto-suave);
  font-size: .82rem;
  text-decoration: none;
  display: block;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.metrica:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
  border-color: var(--acento-borde);
}

.metrica span {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Un cero no es una alerta: la plantilla solo pone esta clase cuando hay
 * algo que atender, y entonces la tarjeta se destaca de verdad. */
.metrica--alerta {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.metrica--alerta span { color: var(--acento); }

/* --- Bloques y tablas --- */

.bloque { margin-bottom: 2.25rem; }

.bloque__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.bloque__cabecera h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }

.acciones { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

/* border-collapse mata el radio del contenedor, por eso va separate con
 * separacion cero: se conserva el redondeo y las lineas no se duplican. */
.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  font-size: .88rem;
}

.tabla th, .tabla td {
  text-align: left;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

/* LA CABECERA, OSCURA
 *
 * Con la cabecera gris clara, la primera fila de datos y los rotulos se
 * parecen demasiado: el ojo tiene que buscar donde empieza la lista. En
 * oscuro, la separacion es inmediata y la tabla se lee como una tabla.
 *
 * Es lo que hace TECOMSER, en su azul; aqui en el negro de la marca. */
.tabla th {
  color: #fff;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--marca-900);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 0;
  padding: .8rem 1rem;
}

/* La primera y la ultima celda redondean con el contenedor. Sin esto, la
 * banda oscura sobresale por las esquinas de la tarjeta. */
.tabla thead tr:first-child th:first-child { border-top-left-radius: var(--radio-tarjeta); }
.tabla thead tr:first-child th:last-child { border-top-right-radius: var(--radio-tarjeta); }

.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: var(--marca-50); }

/* Un dato secundario debajo del principal, no pegado a su lado: sin esto se
 * lee "Tarapoto22 de agosto" como una sola palabra. */
.tabla td small {
  display: block;
  margin-top: .15rem;
  color: var(--texto-tenue);
  font-size: .78rem;
  line-height: 1.4;
}

/* La celda del dato principal, en negrita y sin partirse. */
.tabla td strong { font-weight: 600; color: var(--texto); }
.tabla tr:last-child td { border-bottom: 0; }

.tabla a { font-weight: 500; }

/* --- Estados --- */

/* Rellenos suaves en vez de solo borde: una columna de pastillas huecas se
 * lee como ruido, y con fondo el estado se distingue de un vistazo. */
.estado {
  display: inline-block;
  font-size: .7rem;
  padding: .18rem .6rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid var(--borde);
  background: var(--panel-suave);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  white-space: nowrap;
}

.estado--nuevo, .estado--publicado, .estado--ok {
  border-color: var(--ok-borde);
  background: var(--ok-fondo);
  color: var(--ok);
}

.estado--borrador, .estado--archivado {
  border-color: var(--borde-fuerte);
  background: var(--panel-suave);
  color: var(--texto-suave);
}

.estado--leido, .estado--respondido {
  border-color: var(--acento-borde);
  background: var(--acento-suave);
  color: var(--acento);
}

.estado--spam, .estado--error {
  border-color: var(--peligro-borde);
  background: var(--peligro-fondo);
  color: var(--peligro);
}

/* --- Filtros --- */

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.filtro {
  text-decoration: none;
  color: var(--texto-suave);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  padding: .25rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  background: var(--panel);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.filtro:hover { border-color: var(--acento); color: var(--acento); }

.filtro.activo {
  color: var(--acento-texto, #fff);
  background: var(--acento);
  border-color: var(--acento);
  font-weight: 600;
}

/* --- Formularios --- */

.formulario__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.5rem;
  align-items: start;
}

.formulario__principal, .panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 1.4rem;
}

.formulario__lateral { display: grid; gap: 1rem; }

/* El lateral acompaña al formulario mientras se baja por un cuerpo largo:
 * guardar no deberia obligar a volver arriba. */
@media (min-width: 62.01rem) {
  .formulario__lateral { position: sticky; top: 5.5rem; }
}

.panel h3 {
  margin: 0 0 .9rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
}

.panel__acciones { display: grid; gap: .6rem; margin-top: .5rem; }

.formulario-peligro { margin-top: 1.5rem; }

.rejilla-ajustes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 1.25rem;
  margin-bottom: 1.25rem;
}

/* --- Detalle de contacto --- */

.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.panel--ancho h2 { margin: 0 0 1rem; font-size: 1.1rem; }

.mensaje { white-space: pre-wrap; margin: 0; line-height: 1.7; }

.datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .9rem;
  margin: 0;
  font-size: .85rem;
}

.datos dt { color: var(--texto-suave); font-weight: 500; }
.datos dd { margin: 0; word-break: break-word; }

.enlace { font-weight: 600; font-size: .88rem; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* --- Pantallas estrechas --- */

@media (max-width: 62rem) {
  .formulario__columnas, .detalle { grid-template-columns: minmax(0, 1fr); }
  .contenido { padding: 1.25rem; }
  .barra { padding: .8rem 1.25rem; }
}

/* Por debajo de esto el menu lateral se come la pantalla: pasa a ser una
 * fila de pestañas arriba. */
@media (max-width: 48rem) {
  .disposicion { flex-direction: column; }

  .menu {
    width: 100%;
    height: auto;
    position: static;
    padding: 1rem 0 .75rem;
  }

  .menu__nav { flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  .menu__marca { padding-bottom: .9rem; }
  .menu__grupo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .metrica:hover { transform: none; }
}

/* --- Medios ------------------------------------------------------------- */

.subida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.25rem;
  align-items: start;
}

.subida__forma {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 1.4rem;
}

.subida__campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;
}

/* El selector de archivo del navegador no se puede estilar por dentro, pero
 * si su caja: sin esto se ve como un control de otro siglo al lado del
 * resto. */
input[type="file"] {
  padding: .45rem;
  background: var(--panel-suave);
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  margin-right: .75rem;
  padding: .35rem .8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-campo);
  background: var(--panel);
  color: var(--texto);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: var(--acento-suave); }

.cuota {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 1.4rem;
}

.cuota h3 {
  margin: 0 0 .5rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
}

.cuota__cifra {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.cuota__barra {
  margin-top: .9rem;
  height: 6px;
  border-radius: var(--radio-pastilla);
  background: var(--gris-200);
  overflow: hidden;
}

.cuota__barra span {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: inherit;
}

/* La rejilla se ajusta sola: con auto-fill las tarjetas mantienen su ancho
 * en vez de estirarse cuando quedan pocas en la ultima fila. */
.medios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.medio {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* El fondo a cuadros deja ver la transparencia: sin el, un PNG recortado
 * sobre blanco parece que tiene fondo blanco. */
.medio__vista {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background-color: var(--panel-suave);
  background-image:
    linear-gradient(45deg, var(--gris-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gris-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gris-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gris-200) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
}

/* contain y no cover: en una biblioteca hay que ver la foto entera, no un
 * recorte bonito. El encuadre se decide en la pagina que la use. */
.medio__vista img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.medio__icono {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--texto-tenue);
}

.medio__cuerpo { padding: .9rem; display: flex; flex-direction: column; gap: .1rem; }

.medio__nombre {
  margin: 0;
  font-weight: 600;
  font-size: .85rem;
  word-break: break-word;
}

.medio__meta {
  margin: 0 0 .8rem;
  font-size: .78rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.medio__cuerpo label { margin-bottom: .6rem; font-size: .72rem; }
.medio__cuerpo input { padding: .35rem .5rem; font-size: .85rem; }
.medio__cuerpo button { width: 100%; }

.medio__mas { margin-top: .9rem; font-size: .82rem; }

.medio__mas summary {
  cursor: pointer;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: .78rem;
}

.medio__mas summary:hover { color: var(--acento); }
.medio__mas .datos { margin: .75rem 0; font-size: .78rem; }
.medio__mas .mono { word-break: break-all; }
.medio__mas button { width: 100%; }

@media (max-width: 62rem) {
  .subida { grid-template-columns: minmax(0, 1fr); }
  .subida__campos { grid-template-columns: minmax(0, 1fr); }
}

/* --- Equipo ------------------------------------------------------------- */

/* El selector de rol y su boton en la misma linea: son un gesto solo, y
 * apilados hacen que la fila de la tabla crezca al doble. */
.fila-accion {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.fila-accion select { width: auto; min-width: 9rem; padding: .35rem .5rem; font-size: .85rem; }
.fila-accion button { white-space: nowrap; }

/* La explicacion del rol vive debajo del selector, no en una columna aparte:
 * asi se lee justo cuando se esta decidiendo. */
.tabla .pista { margin-top: .35rem; max-width: 22rem; font-size: .78rem; }

.tabla .estado + form { margin-top: .4rem; }

/* Los radios de rol en el alta llevan descripcion, asi que necesitan mas
 * aire que una casilla suelta y que el texto no se meta bajo el circulo. */
fieldset .casilla { align-items: start; margin-bottom: .9rem; }
fieldset .casilla input { margin-top: .35rem; }
fieldset .casilla span { line-height: 1.5; }

/* --- El logo -------------------------------------------------------------- */

/* El menu usa la version BLANCA y el login la negra, porque uno va sobre el
 * negro y el otro sobre una caja blanca.
 *
 * Son dos archivos y no uno invertido por CSS: invertir da un blanco
 * calculado a partir del negro, y el archivo blanco es el que dibujo quien
 * hizo la marca. Los dos salen del mismo sitio -Logos/- y se regeneran con
 * el mismo procedimiento, asi que no se desincronizan solos. */
.menu__marca {
  display: block;
  padding: 0 1.35rem 1.5rem;
}

.menu__marca img {
  display: block;
  width: 100%;
  max-width: 10.5rem;
  height: auto;
}

/* --- Modulos que se despliegan ---------------------------------------------- */

/* Son <details> nativos: el navegador ya sabe abrirlos y cerrarlos, y
 * funcionan sin JavaScript. El modulo activo llega abierto desde el
 * servidor.
 *
 * El nombre del modulo abre y cierra; para entrar a su pantalla esta la
 * primera subentrada, que apunta a la portada del modulo. Es lo que hace
 * TECOMSER y evita el problema del gesto doble: con el nombre navegando Y
 * desplegando, no se puede hacer una cosa sin la otra. */
.menu__modulo > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.menu__modulo > summary::-webkit-details-marker { display: none; }
.menu__modulo > summary::marker { content: ""; }

.menu__padre { padding-right: .5rem; }

.menu__flecha {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: .6;
  transition: transform .18s ease;
}

.menu__flecha svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__modulo[open] > summary .menu__flecha { transform: rotate(90deg); }
.menu__modulo[open] > summary { color: rgb(var(--menu-tinta)); }

/* Las hijas colgando de una linea vertical: dice que dependen de lo de
 * arriba sin sangrarlas el doble. */
.menu__hijas {
  display: grid;
  gap: .05rem;
  margin: .2rem 0 .4rem 1.5rem;
  padding-left: .55rem;
  border-left: 1px solid rgba(var(--menu-tinta), .14);
}

.menu__hija {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .6rem;
  border-radius: .4rem;
  color: var(--menu-texto);
  text-decoration: none;
  font-size: .82rem;
  transition: background .15s ease, color .15s ease;
}

.menu__hija:hover { color: rgb(var(--menu-tinta)); background: rgba(var(--menu-tinta), .07); }

/* La activa se marca por ruta ENTERA, con su interrogacion: /contactos y
 * /contactos?estado=nuevo son dos pantallas. */
.menu__hija.activo { color: rgb(var(--menu-tinta)); background: rgba(var(--menu-tinta), .11); font-weight: 600; }

/* La flechita de cada subentrada. Apagada, salvo en la activa: encendidas
 * todas, la columna se llena de flechas y ninguna dice nada. */
.menu__hija-flecha {
  display: grid;
  place-items: center;
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
  opacity: .35;
}

.menu__hija.activo .menu__hija-flecha { opacity: .9; }

.menu__hija-flecha svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El dibujo de cada subentrada: mas pequeño y mas tenue que el del modulo,
 * para que se lea como parte de el. La activa lo enciende. */
.menu__hija-icono {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: .55;
  transition: opacity .15s ease;
}

.menu__hija-icono .menu__icono { width: 100%; height: 100%; stroke-width: var(--icono-trazo, 1.8); }
.menu__hija:hover .menu__hija-icono,
.menu__hija.activo .menu__hija-icono { opacity: 1; }

/* Plegado no hay submenus: en una columna de iconos no cabe una lista de
 * nombres, y desplegarla dejaria el menu mas ancho que sin plegar. */
.menu--plegado .menu__flecha,
.menu--plegado .menu__hijas { display: none; }
.menu--plegado .menu__padre { padding-right: 0; }

/* --- El buscador, con la lupa a la derecha ----------------------------------- */

/* El bloque solo pone el margen; quien coloca la lupa es la caja de dentro.
 * Colgada del bloque, la lupa se situaba respecto al relleno y se salia por
 * la derecha del menu. */
.menu__buscador { padding: 0 .85rem 1rem; }

.menu__campo { position: relative; display: flex; }

.menu__buscador input {
  width: 100%;
  padding: .5rem 2.4rem .5rem .95rem;
  border: 1px solid rgba(var(--menu-tinta), .14);
  border-radius: 999px;
  background: rgba(var(--menu-tinta), .07);
  color: rgb(var(--menu-tinta));
  font-size: .85rem;
}

.menu__buscador input::placeholder { color: rgba(var(--menu-tinta), .5); }

.menu__buscador input:focus {
  outline: none;
  border-color: rgba(var(--menu-tinta), .35);
  background: rgba(var(--menu-tinta), .12);
  box-shadow: none;
}

/* La lupa en un circulo, a la derecha: es donde la pone el buscador del
 * sitio publico, y dos buscadores del mismo proyecto que se ven distintos
 * parecen dos programas. */
.menu__lupa {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marca-600);
  color: rgb(var(--menu-tinta));
  pointer-events: none;
}

.menu__lupa svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* --- La version, al pie ------------------------------------------------------ */

.menu__version {
  display: grid;
  gap: .1rem;
  padding: .75rem .75rem 0;
  margin: 0;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--menu-grupo);
  text-align: center;
}

.menu__version strong { color: rgba(var(--menu-tinta), .72); font-weight: 700; }

.menu--plegado .menu__version { display: none; }

/* --- El encabezado de cada pantalla ------------------------------------------ */

/* Titulo, una linea de que hace, y a la derecha lo que se puede hacer aqui.
 *
 * Va en el layout y no en cada pagina: doce pantallas escribiendo su propia
 * cabecera son doce oportunidades de que una quede distinta. */
.encabezado-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde);
}

.encabezado-pagina h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: -.02em;
  font-weight: 700;
}

/* La descripcion no es decoracion: "Publicaciones" no dice si son las del
 * blog o las de las redes, y "Actividad" no dice de quien. */
.encabezado-pagina p {
  margin: .35rem 0 0;
  color: var(--texto-suave);
  font-size: .92rem;
  max-width: 44rem;
  line-height: 1.55;
}

.encabezado-pagina__acciones { display: flex; gap: .6rem; flex-wrap: wrap; }

/* El contenido con ancho maximo y centrado. En una pantalla ancha, una tabla
 * de dos mil pixeles obliga a mover la cabeza para seguir una fila. */
.contenido__caja { max-width: 76rem; margin: 0 auto; width: 100%; }

/* --- La barra de arriba ------------------------------------------------------ */

/* La barra deja de repetir el titulo: ahora lo lleva el encabezado, mas
 * grande y con su descripcion. Aqui queda la miga, que dice donde se esta
 * sin competir con el. */
.barra__miga {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: var(--texto-suave);
  min-width: 0;
}

.barra__miga a { color: var(--texto-suave); text-decoration: none; }
.barra__miga a:hover { color: var(--acento); }
.barra__miga span[aria-hidden] { opacity: .5; }

/* --- Alineacion del menu ------------------------------------------------------ */

/* TODO EL MENU COMPARTE UNA REJILLA
 *
 * Cada elemento traia su propio relleno, y bastaba que uno estuviera un
 * cuarto de rem distinto para que la columna de iconos saliera en zigzag.
 * Aqui se fijan de una vez el sangrado lateral, el alto de cada fila y el
 * hueco entre icono y texto, y todo lo demas los hereda. */
:root {
  --menu-lado: .85rem;
  --menu-alto: 2.3rem;
  --menu-hueco: .7rem;
  --menu-icono: 1.15rem;
}

.menu__nav { padding: 0 var(--menu-lado); }

.menu__grupo {
  padding: 0 .6rem;
  margin: 1.15rem 0 .3rem;
}

.menu__grupo-bloque:first-child .menu__grupo { margin-top: 0; }

.menu__enlace {
  min-height: var(--menu-alto);
  gap: var(--menu-hueco);
  padding: 0 .6rem;
}

.menu__icono {
  width: var(--menu-icono);
  height: var(--menu-icono);
}

/* La linea de las hijas cae justo bajo el centro del icono de su modulo:
 * medio icono mas el hueco, mas el sangrado. Calculada, no tanteada. */
.menu__hijas {
  margin-left: calc(.6rem + var(--menu-icono) / 2);
  padding-left: calc(var(--menu-icono) / 2 + var(--menu-hueco) - .1rem);
}

.menu__hija { min-height: 1.9rem; padding: 0 .6rem; }

/* La pastilla y la flecha se separan del borde por igual. */
.menu__padre { padding-right: .45rem; }
.menu__padre .pastilla { margin-left: auto; }
.menu__enlace .pastilla { margin-left: auto; }

/* Cabecera y pie, con el mismo sangrado que las filas. */
.menu__cabecera { padding: 1.1rem var(--menu-lado) .9rem; }
.menu__pie { padding: .8rem var(--menu-lado) 1rem; }
.menu__version { padding: .7rem .6rem 0; }

/* --- Tablas dentro de su envoltura ------------------------------------------- */

/* UNA TABLA ANCHA SE DESPLAZA DENTRO DE SU CAJA, NO ARRASTRA LA PAGINA
 *
 * Con diez columnas, la tabla se hace mas ancha que la pantalla. Sin
 * envoltura, quien la desplaza mueve la pagina entera y pierde de vista el
 * menu y la cabecera; dentro de la caja, solo se mueve la tabla. */
.tabla-envoltura {
  overflow-x: auto;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-tarjeta);
  background: var(--panel);
  scrollbar-width: thin;
}

/* Dentro de la envoltura, la tabla pierde su propio marco: dos bordes
 * pegados se ven como una linea doble. */
.tabla-envoltura .tabla {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* --- Tarjetas de contenido ---------------------------------------------------- */

/* Lo que no es tabla va en una tarjeta con el mismo lenguaje: mismo radio,
 * mismo borde, misma sombra. Sin ella, un formulario o un bloque de texto
 * flotan sobre el fondo y no se sabe donde acaba uno y empieza otro. */
.tarjeta-panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 1.4rem;
}

.tarjeta-panel__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: -.25rem 0 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--borde);
}

.tarjeta-panel__cabecera h2,
.tarjeta-panel__cabecera h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

/* --- Fotos de un contenido ---------------------------------------------------- */

/* Una tarjeta por clase de foto -portada, album, cliente-, en rejilla. Lo que
 * ya esta puesto va arriba y en grande: es lo primero que se quiere
 * comprobar al abrir la pantalla. */
.fotos { margin-top: 1.5rem; }

.fotos__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.fotos__grupo h3 { margin: 0 0 .25rem; font-size: .95rem; }

.fotos__actuales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .75rem;
  margin: .9rem 0;
}

.fotos__actual {
  margin: 0;
  display: grid;
  gap: .4rem;
}

.fotos__actual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--panel-suave);
}

/* Un logo no se recorta: se ve entero sobre un fondo de cuadros, que es
 * como se nota si trae el fondo transparente o no. */
.fotos__actual--logo img {
  object-fit: contain;
  background-color: var(--panel-suave);
  background-image:
    linear-gradient(45deg, var(--gris-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gris-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gris-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gris-200) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.fotos__actual form { margin: 0; }
.fotos__actual button { width: 100%; }

.fotos__vacio {
  margin: .9rem 0;
  padding: 1rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 8px;
  color: var(--texto-tenue);
  text-align: center;
  font-size: .85rem;
}

.foto-poner {
  display: grid;
  gap: .75rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borde);
}

.foto-biblioteca summary {
  cursor: pointer;
  color: var(--acento);
  font-size: .85rem;
  font-weight: 600;
}

.foto-biblioteca__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: .5rem;
  max-height: 16rem;
  overflow-y: auto;
  margin-top: .6rem;
  padding: .25rem;
}

/* El boton de radio va escondido: se elige pulsando la foto, y la elegida
 * se marca con el borde de la marca. */
.foto-biblioteca__opcion {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.foto-biblioteca__opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.foto-biblioteca__opcion img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--panel-suave);
}

.foto-biblioteca__opcion input:checked + img {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.foto-biblioteca__opcion input:focus-visible + img {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* La miniatura del listado: pequeña, cuadrada y siempre del mismo tamaño,
 * haya foto o no, para que las filas no bailen. */
.tabla__foto { width: 3.25rem; padding-right: 0; }

.tabla__foto img,
.tabla__sin-foto {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  object-fit: cover;
  background: var(--panel-suave);
}

.tabla__sin-foto { border: 1px dashed var(--borde-fuerte); }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Libro de reclamaciones ------------------------------------------------- */

/* El plazo con su color: es lo primero que hay que ver en la bandeja. */
.plazo {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}

.plazo--a_tiempo { background: var(--acento-suave); color: var(--acento); }
.plazo--urgente  { background: #fff4e0; color: #9a5b00; }
.plazo--vencido  { background: #fde8e7; color: #b42318; }
.plazo--cerrado  { background: var(--gris-100); color: var(--texto-suave); }

.estado--pendiente { background: #fff4e0; color: #9a5b00; }
.estado--en_proceso { background: var(--acento-suave); color: var(--acento); }

.hoja-panel h3 { margin: 1.5rem 0 .6rem; font-size: .95rem; }

.hoja-panel__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}

.hoja-panel__cabecera h2 { margin: .15rem 0 0; }
.hoja-panel__cabecera .pista { margin: 0; }

/* --- Pedidos ------------------------------------------------------------------ */

.estado--pedido-nuevo      { background: #fff4e0; color: #9a5b00; }
.estado--pedido-pagado     { background: var(--acento-suave); color: var(--acento); }
.estado--pedido-preparando { background: #eef4ff; color: #3538cd; }
.estado--pedido-enviado    { background: #eef4ff; color: #3538cd; }
.estado--pedido-entregado  { background: var(--gris-100); color: var(--texto-suave); }
.estado--pedido-cancelado  { background: #fde8e7; color: #b42318; }

.totales-pedido { max-width: 18rem; margin-left: auto; margin-top: 1rem; }

/* --- Lo leido del sitio de un proyecto ---------------------------------------- */

.sitio-leido { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.sitio-leido__imagen { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 8px; border: 1px solid var(--borde); background: var(--panel-suave); }
.sitio-leido p { margin: 0 0 .4rem; }
.sitio-leido__nombre { display: flex; align-items: center; gap: .5rem; }
.sitio-leido__nombre img { border-radius: 4px; }

@media (max-width: 40rem) { .sitio-leido { grid-template-columns: 1fr; } }

/* ==========================================================================
 * EL PANEL COMO TECOMSER, EN NEGRO
 *
 * El mismo esqueleto que admin.tecomser.pe: menu oscuro a la izquierda, una
 * barra blanca de 72px con el titulo, la campana y quien ha entrado, y el
 * area de trabajo clara con tarjetas blancas. Donde TECOMSER pone su azul
 * marino, aqui va el negro de la marca.
 * ========================================================================== */

:root {
  --fondo: #f5f5f6;
  --panel-suave: #fafafa;

  --menu: #0a0a0a;
  --menu-texto: rgba(255, 255, 255, .66);
  --menu-grupo: rgba(255, 255, 255, .36);

  --acento: #0a0a0a;
  --acento-hover: #27272a;
  --acento-suave: #f4f4f5;
  --acento-borde: #d4d4d8;
  --anillo: 0 0 0 3px rgba(9, 9, 11, .12);

  --menu-ancho: 18.5rem;
  --barra-alto: 72px;
  --radio-tarjeta: 12px;
}

body.admin { font-size: 14.5px; }

/* --- El menu ---------------------------------------------------------------- */

.menu {
  background: var(--menu) linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, .06) 100%);
  border-right: 1px solid rgba(var(--menu-tinta), .06);
}

.menu__cabecera {
  min-height: var(--barra-alto);
  padding: 0 1rem 0 1.35rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(var(--menu-tinta), .07);
}

.menu__marca { padding: 0; }
.menu__marca img { max-width: 9.25rem; }

.menu__grupo { color: var(--menu-grupo); font-size: .64rem; letter-spacing: .14em; }

.menu__enlace { font-size: .87rem; padding: .55rem .75rem; }
.menu__enlace:hover { background: rgba(var(--menu-tinta), .05); }

/* Como en TECOMSER, lo activo se dice sin pintar un bloque: texto blanco,
 * icono encendido y una raya a la izquierda. */
/* Sin rayas: ni la del activo ni la que colgaba bajo cada modulo. Lo
 * activo se dice con el fondo y el texto blanco, y basta. */
.menu__enlace.activo {
  background: rgba(var(--menu-tinta), .1);
  color: rgb(var(--menu-tinta));
  box-shadow: none;
}

.menu__hijas { border-left: 0; }

.menu__hija.activo { color: rgb(var(--menu-tinta)); font-weight: 600; background: rgba(var(--menu-tinta), .06); }

.menu .pastilla { background: rgb(var(--menu-tinta)); color: var(--menu); }

.menu__cerrar { display: none; }

/* La lupa va dentro del campo. La regla vieja de ".menu__buscador svg" la
 * posicionaba respecto al buscador y la sacaba fuera: aqui vuelve a su
 * sitio, centrada en su circulo. */
.menu__lupa { background: rgba(var(--menu-tinta), .12); }
.menu__lupa svg { position: static; transform: none; opacity: 1; }

.menu__buscador input { border-radius: 10px; }

/* --- La barra superior -------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--barra-alto);
  padding: 0 2rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--borde);
}

.barra__izquierda, .barra__derecha { display: flex; align-items: center; min-width: 0; }
.barra__izquierda { gap: .75rem; }
.barra__derecha { gap: .6rem; }

.barra__titulo { display: grid; gap: 1px; min-width: 0; }

.barra__titulo span {
  color: var(--texto-tenue);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.barra__titulo strong {
  overflow: hidden;
  font-size: 1.12rem;
  font-weight: 750;
  color: var(--texto);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Los botones cuadrados de la barra: hamburguesa y campana. */
.barra__menu, .avisos__boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}

.barra__menu { display: none; }

.barra__menu:hover, .avisos__boton:hover { background: var(--panel-suave); border-color: var(--borde-fuerte); }

.barra svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra details > summary::-webkit-details-marker { display: none; }
.barra details > summary::marker { content: ""; }

.barra details { position: relative; }

.avisos__cuenta {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
}

/* Las cajas que se abren desde la barra comparten forma. */
.avisos__caja, .usuario__caja {
  position: absolute;
  right: 0;
  top: calc(100% + .55rem);
  z-index: 60;
  width: 19rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(9, 9, 11, .14), 0 2px 6px rgba(9, 9, 11, .06);
}

.avisos__titulo {
  margin: .3rem .55rem .45rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.avisos__linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .6rem;
  border-radius: 8px;
  color: var(--texto);
  font-size: .87rem;
  font-weight: 500;
  text-decoration: none;
}

.avisos__linea:hover { background: var(--panel-suave); }

.avisos__linea strong {
  min-width: 1.6rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto, #fff);
  font-size: .75rem;
  text-align: center;
}

.avisos__linea--urgente { color: #b42318; }
.avisos__linea--urgente strong { background: #dc2626; }

.avisos__vacio { margin: .2rem .55rem .6rem; color: var(--texto-suave); font-size: .85rem; }

.barra__sitio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.5rem;
  padding: 0 .9rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}

.barra__sitio:hover { background: var(--panel-suave); border-color: var(--borde-fuerte); }
.barra__sitio svg { width: 1rem; height: 1rem; }

.usuario__boton {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .2rem .4rem .2rem .2rem;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.usuario__boton:hover { background: var(--panel-suave); }

.usuario__avatar {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  border-radius: 10px;
  background: var(--acento);
  color: var(--acento-texto, #fff);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.usuario__nombre { display: grid; gap: 1px; max-width: 12rem; line-height: 1.25; }

.usuario__nombre strong {
  overflow: hidden;
  font-size: .86rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.usuario__nombre span { color: var(--texto-tenue); font-size: .72rem; font-weight: 600; }

.barra .usuario__flecha { width: .95rem; height: .95rem; color: var(--texto-tenue); }

.usuario__caja { width: 15rem; }

.usuario__correo {
  margin: .25rem .55rem .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
  color: var(--texto-suave);
  font-size: .78rem;
  text-overflow: ellipsis;
}

.usuario__caja a, .usuario__caja button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: .55rem .6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--texto);
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
}

.usuario__caja a:hover { background: var(--panel-suave); }
.usuario__caja button { color: #b42318; }
.usuario__caja button:hover { background: #fff4f3; }

/* --- El area de trabajo -------------------------------------------------------- */

.contenido { max-width: none; padding: 1.75rem 2rem 3.5rem; }
/* El area de trabajo usa todo el ancho de la pantalla, como TECOMSER: en
 * un monitor grande, una columna centrada deja media pantalla vacia. */
.contenido__caja { max-width: none; }

.menu__enlace { font-size: .92rem; padding: .6rem .85rem; }
.menu__marca img { max-width: 10.5rem; }

.encabezado-pagina h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }

.tabla tbody tr:hover { background: #fafafa; }

.filtro.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }

/* --- El movil: el menu pasa a cajon ---------------------------------------------- */

@media (max-width: 62rem) {
  .disposicion { flex-direction: row; }

  .menu, .menu.menu--plegado {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    width: 17.5rem;
    height: 100vh;
    padding: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 16px 0 45px rgba(0, 0, 0, .28);
  }

  body.menu-abierto .menu { transform: none; }
  body.menu-abierto { overflow: hidden; }

  .menu-velo {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
  }

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

  .menu__nav { display: block; }
  .menu__grupo { display: block; }
  .menu__plegar { display: none; }

  .menu__cerrar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(var(--menu-tinta), .1);
    color: rgb(var(--menu-tinta));
    box-shadow: none;
  }

  .menu__cerrar svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Plegado es cosa del escritorio: en el cajon siempre se ve todo. */
  .menu--plegado .menu__texto, .menu--plegado .menu__grupo, .menu--plegado .menu__buscador,
  .menu--plegado .pastilla, .menu--plegado .menu__flecha, .menu--plegado .menu__marca { display: revert; }

  .barra { padding: 0 1rem; }
  .barra__menu { display: grid; }
  .contenido { padding: 1.25rem 1rem 3rem; }
}

@media (max-width: 40rem) {
  :root { --barra-alto: 64px; }

  .usuario__nombre, .usuario__flecha, .barra__sitio span { display: none; }
  .barra__sitio { padding: 0; width: 2.5rem; justify-content: center; }
  .barra__titulo strong { font-size: 1rem; }
  .avisos__caja { position: fixed; left: .75rem; right: .75rem; top: calc(var(--barra-alto) + .25rem); width: auto; }
}

/* --- El tablero ------------------------------------------------------------------ */

/* El saludo va en negro, como la cabecera de bienvenida de TECOMSER: es lo
 * primero que se ve y ordena todo lo que viene debajo. */
.saludo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.6rem 1.75rem;
  border-radius: 16px;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255, 255, 255, .09), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--acento) 82%, #ffffff) 0%, var(--acento) 100%);
  color: var(--acento-texto, #fff);
}

.saludo__fecha {
  margin: 0 0 .3rem;
  color: rgba(255, 255, 255, .55);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.saludo__titulo { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.saludo__texto { margin: .35rem 0 0; color: rgba(255, 255, 255, .72); font-size: .92rem; }

.boton--claro { background: #fff; color: #0a0a0a; box-shadow: none; white-space: nowrap; }
.boton--claro:hover { background: #e4e4e7; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi {
  position: relative;
  display: grid;
  gap: .15rem;
  padding: 1.15rem 1.2rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--texto);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kpi:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-alta); transform: translateY(-1px); }

.kpi__icono {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: #f4f4f5;
  color: #0a0a0a;
}

.kpi__icono svg { width: 1.1rem; height: 1.1rem; }

.kpi__dato { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kpi__nombre { font-size: .86rem; font-weight: 600; color: var(--texto); }
.kpi__pie { margin-top: .35rem; font-size: .78rem; color: var(--texto-tenue); }

.kpi--alerta .kpi__icono { background: var(--acento); color: var(--acento-texto, #fff); }
.kpi--alerta .kpi__pie { color: #9a5b00; font-weight: 600; }

.kpi--peligro { border-color: #f2c6c2; }
.kpi--peligro .kpi__icono { background: #dc2626; color: #fff; }
.kpi--peligro .kpi__pie { color: #b42318; font-weight: 700; }

.atajos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.atajo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .8rem .5rem .5rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.atajo:hover { border-color: var(--acento); }

.atajo__icono {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: #f4f4f5;
}

.atajo__icono svg { width: 1rem; height: 1rem; }

.atajo__mas {
  margin-left: auto;
  width: .9rem;
  height: .9rem;
  fill: none;
  stroke: var(--texto-tenue);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(22rem, 26vw, 30rem);
  gap: 1.25rem;
  align-items: start;
}

.tablero__principal, .tablero__lateral { display: grid; gap: 1.25rem; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}

.tarjeta__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem .9rem;
  border-bottom: 1px solid var(--borde);
}

.tarjeta__cabecera h2 { margin: 0; font-size: .98rem; font-weight: 750; }
.tarjeta__cabecera p { margin: .15rem 0 0; font-size: .78rem; color: var(--texto-tenue); }
.tarjeta__cabecera .enlace { color: var(--texto); font-size: .8rem; white-space: nowrap; }

.tarjeta__vacio { margin: 0; padding: 1.4rem 1.2rem; color: var(--texto-tenue); font-size: .88rem; }

.lista-filas { display: grid; }

.fila-rapida {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid #f0f0f1;
  color: var(--texto);
  text-decoration: none;
  transition: background .12s ease;
}

.fila-rapida:last-child { border-bottom: 0; }
.fila-rapida:hover { background: #fafafa; }

.fila-rapida__principal {
  display: grid;
  flex: 1;
  min-width: 0;
  color: var(--texto);
  text-decoration: none;
}

.fila-rapida__principal strong {
  overflow: hidden;
  font-size: .9rem;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-rapida__principal small {
  overflow: hidden;
  color: var(--texto-tenue);
  font-size: .76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-rapida__monto { font-weight: 700; font-size: .9rem; white-space: nowrap; }

.fila-rapida--nueva .fila-rapida__principal strong::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
}

.fila-rapida__acciones { display: flex; align-items: center; gap: .35rem; }
.fila-rapida__acciones form { margin: 0; }

.icono-accion {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  color: var(--texto-suave);
  box-shadow: none;
}

.icono-accion:hover { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }

.icono-accion svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progreso__cifra { font-size: 1.25rem; font-weight: 800; }

.progreso { height: .4rem; margin: 1rem 1.2rem .35rem; border-radius: 999px; background: #f0f0f1; overflow: hidden; }
.progreso span { display: block; height: 100%; border-radius: inherit; background: var(--acento); }

.puesta { list-style: none; margin: 0; padding: .4rem .6rem .7rem; }

.puesta__item a {
  display: flex;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
}

.puesta__item a:hover { background: #fafafa; }

.puesta__item strong { display: block; font-size: .86rem; font-weight: 650; }
.puesta__item small { display: block; margin-top: .1rem; color: var(--texto-tenue); font-size: .76rem; line-height: 1.4; }

.puesta__marca {
  display: grid;
  place-items: center;
  flex: 0 0 1.3rem;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: .05rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 50%;
  color: transparent;
}

.puesta__marca svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.puesta__item--hecho .puesta__marca { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }
.puesta__item--hecho strong { color: var(--texto-tenue); font-weight: 500; text-decoration: line-through; }

.fechas, .numeros { list-style: none; margin: 0; padding: .35rem 0; }

.fechas a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1.2rem;
  color: var(--texto);
  text-decoration: none;
}

.fechas a:hover { background: #fafafa; }

.fechas__dia {
  display: grid;
  place-items: center;
  flex: 0 0 3rem;
  height: 3rem;
  border-radius: 10px;
  background: var(--acento);
  color: rgba(255, 255, 255, .7);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
}

.fechas__dia strong { color: #fff; font-size: 1.15rem; letter-spacing: 0; }

.fechas__texto { display: grid; min-width: 0; }
.fechas__texto strong { overflow: hidden; font-size: .87rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.fechas__texto small { color: var(--texto-tenue); font-size: .76rem; }

.numeros a {
  display: flex;
  justify-content: space-between;
  padding: .5rem 1.2rem;
  color: var(--texto-suave);
  font-size: .86rem;
  text-decoration: none;
}

.numeros a:hover { background: #fafafa; color: var(--texto); }
.numeros strong { color: var(--texto); }

@media (max-width: 75rem) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .tablero__lateral { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

@media (max-width: 40rem) {
  .kpis, .atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi { padding: .9rem; }
  .kpi__icono { top: .75rem; right: .75rem; width: 1.9rem; height: 1.9rem; }
  .kpi__dato { font-size: 1.2rem; padding-right: 2.2rem; overflow-wrap: anywhere; }
  .kpi__nombre { font-size: .8rem; padding-right: 1.5rem; }
  .kpi__pie { font-size: .72rem; }
  .atajo { font-size: .78rem; padding: .45rem .5rem; }
  .atajo__mas { display: none; }
  .saludo { flex-direction: column; align-items: flex-start; padding: 1.3rem; }
  .saludo__titulo { font-size: 1.35rem; }
  .fila-rapida { flex-wrap: wrap; gap: .5rem .75rem; }
  .fila-rapida__principal { flex-basis: 100%; }
}

/* --- Listados: buscador y acciones por fila -------------------------------------- */

.buscador-tabla {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 26rem;
  margin-bottom: 1rem;
}

.buscador-tabla[hidden] { display: none; }

.buscador-tabla svg {
  position: absolute;
  left: .8rem;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--texto-tenue);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.buscador-tabla input { padding-left: 2.3rem; padding-right: 5.5rem; background: #fff; }

.buscador-tabla__cuenta {
  position: absolute;
  right: .8rem;
  color: var(--texto-tenue);
  font-size: .76rem;
  pointer-events: none;
}

.tabla tbody tr[hidden] { display: none; }

.tabla__acciones { width: 1%; white-space: nowrap; text-align: right; }

/* La celda sigue siendo celda: los botones van en linea dentro de ella.
 * Una celda con display:flex deja de alinearse con las demas de su fila. */
.tabla__acciones > a, .tabla__acciones > form { display: inline-flex; vertical-align: middle; margin: 0 0 0 .3rem; }

.icono-accion--peligro:hover { background: #dc2626; border-color: #dc2626; }

.boton-mini {
  padding: .3rem .7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-size: .76rem;
  font-weight: 600;
  box-shadow: none;
}

.boton-mini:hover { background: #f4f4f5; }

.boton-mini--fuerte { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }
.boton-mini--fuerte:hover { background: #27272a; }

/* ==========================================================================
 * COMPACTO
 *
 * Menos aire en todo el panel: el area de trabajo pegada a 10-12px de los
 * bordes y cada bloque con el relleno justo. En un panel se trabaja con
 * listas y formularios; el espacio en blanco solo obliga a bajar mas.
 * ========================================================================== */

:root { --barra-alto: 60px; }

.contenido { padding: 10px 12px 24px; }

.barra { padding: 0 12px; }
.barra__titulo strong { font-size: 1rem; }
.barra__menu, .avisos__boton, .barra__sitio { height: 2.25rem; }
.barra__menu, .avisos__boton { width: 2.25rem; }
.usuario__avatar { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }

/* Encabezado de pantalla: una linea, sin raya ni margen grande. */
.encabezado-pagina {
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
  padding: 0;
  border-bottom: 0;
}

.encabezado-pagina h1 { font-size: 1.25rem; margin: 0; }
.encabezado-pagina p { margin: .1rem 0 0; font-size: .84rem; }
.encabezado-pagina .boton { padding: .45rem .9rem; }

.filtros { gap: .35rem; margin-bottom: .6rem; }
.filtro { padding: .25rem .7rem; font-size: .8rem; }

.buscador-tabla { margin-bottom: .6rem; }
.buscador-tabla input { padding-top: .4rem; padding-bottom: .4rem; }

.tabla th, .tabla td { padding: .5rem .7rem; }
.tabla th { font-size: .68rem; }

.aviso { margin-bottom: .6rem; padding: .55rem .8rem; }
.vacio { margin: .4rem 0; }

.bloque { margin-bottom: 1rem; }

/* Formularios y fichas. */
.formulario__principal, .panel { padding: 1rem; }
.formulario__columnas, .detalle { gap: .75rem; margin-bottom: .75rem; }
.formulario__lateral { gap: .75rem; }
label { margin-bottom: .7rem; }
fieldset { padding: .8rem; margin-bottom: .75rem; }
input, textarea, select { padding: .45rem .65rem; }
.rejilla-ajustes { gap: 0 .9rem; margin-bottom: .75rem; }

@media (min-width: 62.01rem) {
  .formulario__lateral { top: calc(var(--barra-alto) + 10px); }
}

/* Tablero. */
.saludo { padding: 1rem 1.25rem; margin-bottom: .6rem; border-radius: 12px; }
.saludo__titulo { font-size: 1.35rem; }
.saludo__texto { margin-top: .15rem; }
.kpis { gap: .6rem; margin-bottom: .6rem; }
.kpi { padding: .8rem .95rem; }
.kpi__icono { top: .75rem; right: .75rem; width: 2rem; height: 2rem; }
.kpi__dato { font-size: 1.45rem; }
.atajos { gap: .5rem; margin-bottom: .75rem; }
.atajo { padding: .35rem .6rem .35rem .35rem; }
.tablero, .tablero__principal, .tablero__lateral { gap: .75rem; }
.tarjeta__cabecera { padding: .7rem .9rem .6rem; }
.tarjeta__vacio { padding: .9rem; }
.fila-rapida { padding: .55rem .9rem; }
.progreso { margin: .7rem .9rem .2rem; }
.puesta { padding: .25rem .4rem .45rem; }
.puesta__item a { padding: .4rem .5rem; }
.fechas a { padding: .45rem .9rem; }
.numeros a { padding: .35rem .9rem; }

/* Menu: filas mas juntas. */
.menu__cabecera { margin-bottom: .6rem; }
.menu__buscador { padding-bottom: .6rem; }
.menu__grupo-bloque { margin-bottom: .5rem; }
.menu__enlace { padding: .45rem .8rem; }
.menu__hija { min-height: 1.7rem; }
.menu__pie { padding-top: .5rem; padding-bottom: .6rem; }

/* ==========================================================================
 * LA VENTANA DE CREAR Y EDITAR, Y LA FICHA
 * ========================================================================== */

html.con-ventana { overflow: hidden; }

.ventana {
  width: min(1180px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f5f5f6;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.ventana[open] { animation: ventana-entra .18s ease-out; }

.ventana::backdrop { background: rgba(9, 9, 11, .55); backdrop-filter: blur(3px); }

@keyframes ventana-entra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.ventana__marco { display: block; width: 100%; height: 100%; border: 0; }

/* Ajustada a su contenido: parte baja y crece hasta lo que mide la ficha. */
.ventana--ajustada { height: min(640px, calc(100vh - 32px)); transition: height .15s ease; }

html.ventana-ajustada .ventana-pagina { min-height: 0; }
html.ventana-ajustada .ventana-pagina__cuerpo { padding-bottom: 18px; }
html.ventana-ajustada .ficha__rejilla--sola { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 40rem) {
  .ventana,
  .ventana.ventana--ajustada { width: 100vw !important; height: 100dvh !important; border-radius: 0; }
}

/* Lo que se pinta dentro del iframe. */
body.admin--ventana { background: #f5f5f6; }

.ventana-pagina { min-height: 100vh; display: flex; flex-direction: column; }

.ventana-pagina__cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid var(--borde);
}

.ventana-pagina__cabecera h1 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.ventana-pagina__cabecera p { margin: .1rem 0 0; font-size: .8rem; color: var(--texto-tenue); }

.ventana-pagina__cerrar {
  display: grid;
  place-items: center;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  box-shadow: none;
}

.ventana-pagina__cerrar:hover { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }

.ventana-pagina__cerrar svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ventana-pagina__cuerpo { flex: 1; padding: 14px 18px 0; }

/* --- La ficha -------------------------------------------------------------------- */

.ficha__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 12px;
  align-items: start;
}

.ficha__principal, .ficha__lateral { display: grid; gap: 12px; }

/* Sin columna lateral (el alta todavia no tiene asistencia ni pagos): la
 * ficha ocupa todo el ancho en vez de dejar un hueco a la derecha. */
.ficha__rejilla--sola { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 62.01rem) {
  .ficha__lateral { position: sticky; top: calc(var(--barra-alto) + 10px); }
  .admin--ventana .ficha__lateral { top: 72px; }
}

.ficha__extra { margin-top: 12px; }

.seccion {
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .04);
}

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

.seccion__cabecera > div { flex: 1; min-width: 0; }
.seccion__cabecera h2 { margin: 0; font-size: .95rem; font-weight: 750; }
.seccion__cabecera p { margin: .1rem 0 0; font-size: .78rem; color: var(--texto-tenue); line-height: 1.4; }

.seccion__cabecera--simple { margin-bottom: 12px; }
.seccion__accion { margin: 0; }

.seccion__icono {
  display: grid;
  place-items: center;
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: #f4f4f5;
  color: #0a0a0a;
}

.seccion__icono svg { width: 1.1rem; height: 1.1rem; }

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
}

.campos--una { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }

.campo, .interruptor { margin: 0; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }

.campo__nombre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  color: var(--texto);
  font-size: .8rem;
  font-weight: 600;
}

.campo__nombre em { color: #b42318; font-style: normal; margin-left: .15rem; margin-right: auto; }

.campo__nombre small {
  margin-left: auto;
  color: var(--texto-tenue);
  font-size: .72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.campo__nombre small.cerca { color: #b45309; }

.campo__ayuda { color: var(--texto-tenue); font-size: .74rem; font-weight: 400; line-height: 1.4; }

.ficha input:not([type=checkbox]):not([type=radio]), .ficha select, .ficha textarea {
  min-height: 2.6rem;
  padding: .55rem .8rem;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  background: #fff;
  font-size: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ficha input:not([type=checkbox]):not([type=radio]):hover, .ficha select:hover, .ficha textarea:hover { border-color: #d4d4d8; }

.ficha input:focus, .ficha select:focus, .ficha textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(9, 9, 11, .08);
}

.ficha textarea { line-height: 1.6; min-height: 5rem; }
.ficha .campo__cuerpo { min-height: 14rem; }
.ficha input[name="titulo"] { font-size: 1.02rem; font-weight: 600; }

/* Un campo con algo fijo delante: la direccion del sitio o el "S/". */
.campo-prefijo {
  display: flex;
  align-items: stretch;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campo-prefijo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(9, 9, 11, .08); }

.campo-prefijo__texto {
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  background: #fafafa;
  border-right: 1px solid #e4e4e7;
  color: var(--texto-tenue);
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
}

.ficha .campo-prefijo input:not([type=checkbox]) {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* El estado como tres botones. */
.segmentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #f4f4f5;
}

.segmento { margin: 0; position: relative; display: block; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }

.segmento span {
  display: block;
  padding: .45rem .3rem;
  border-radius: 7px;
  color: var(--texto-suave);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.segmento span:hover { color: var(--texto); }
.segmento input:checked + span { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(9, 9, 11, .12); }
.segmento--publicado input:checked + span { background: #0a0a0a; color: #fff; }
.segmento input:focus-visible + span { outline: 2px solid #0a0a0a; outline-offset: 1px; }

/* Interruptor: una casilla con forma de llave de luz. */
.interruptor {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
}

/* La casilla va escondida dentro de su etiqueta: sin position relative en
 * la etiqueta, el width:100% de los inputs la estiraba al ancho de la
 * ventana y la pagina entera se desplazaba de lado. */
.interruptor { position: relative; }
.interruptor input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.interruptor__pista {
  position: relative;
  flex: 0 0 2.3rem;
  width: 2.3rem;
  height: 1.3rem;
  margin-top: .1rem;
  border-radius: 999px;
  background: #d4d4d8;
  transition: background .15s ease;
}

.interruptor__pista::after {
  content: "";
  position: absolute;
  top: .15rem;
  left: .15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}

.interruptor input:checked + .interruptor__pista { background: #0a0a0a; }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(1rem); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid #0a0a0a; outline-offset: 2px; }

.interruptor strong { display: block; color: var(--texto); font-size: .85rem; font-weight: 650; }
.interruptor small { display: block; color: var(--texto-tenue); font-size: .75rem; line-height: 1.4; }

/* Como sale en Google. */
.google {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
  font-family: Arial, sans-serif;
}

.google__url { color: #4d5156; font-size: .78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.google__titulo { color: #1a0dab; font-size: 1.1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.google__texto { color: #4d5156; font-size: .84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pistas { display: grid; gap: .4rem; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fafafa; font-size: .78rem; }
.pistas div { display: flex; gap: .4rem; }
.pistas dt { font-weight: 700; white-space: nowrap; }
.pistas dt::after { content: ":"; }
.pistas dd { margin: 0; color: var(--texto-suave); }

.ficha__datos { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); font-size: .8rem; }
.ficha__datos div { display: flex; justify-content: space-between; gap: .5rem; }
.ficha__datos dt { color: var(--texto-tenue); }
.ficha__datos dd { margin: 0; }
.ficha__datos a { color: var(--texto); font-weight: 600; }

.fotos-pendientes { display: flex; align-items: center; gap: 12px; border-style: dashed; background: #fafafa; }
.fotos-pendientes strong { font-size: .9rem; }
.fotos-pendientes p { margin: .1rem 0 0; font-size: .8rem; color: var(--texto-tenue); }

/* La barra de abajo: siempre visible. */
.ficha__pie {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 12px -12px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--borde);
}

.admin--ventana .ficha__pie { margin: 14px -18px 0; padding: 10px 18px; }

.ficha__pie-hueco { flex: 1; }
.ficha__pie .boton { padding: .55rem 1.1rem; }

@media (max-width: 62rem) {
  .ficha__rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 34rem) {
  .campos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .ventana-pagina__cuerpo { padding: 10px 10px 0; }
  .admin--ventana .ficha__pie { margin: 12px -10px 0; padding: 10px; }
  .seccion { padding: 14px; }
}

/* ==========================================================================
 * VENTAS: FACTURACION Y ENVIOS
 * ========================================================================== */

.kpis--fact { margin-bottom: .75rem; }
.tarjeta--margen { margin-bottom: .75rem; }

.aviso-grande {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: .75rem;
  padding: 14px 16px;
  border: 1px dashed #a1a1aa;
  border-radius: 12px;
  background: #fff;
}

.aviso-grande > div { flex: 1; }
.aviso-grande strong { font-size: .95rem; }
.aviso-grande p { margin: .15rem 0 0; color: var(--texto-suave); font-size: .84rem; }

.aviso-grande__icono, .vacio-grande__icono {
  display: grid;
  place-items: center;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: #0a0a0a;
  color: #fff;
}

.aviso-grande__icono svg, .vacio-grande__icono svg { width: 1.2rem; height: 1.2rem; }

.vacio-grande {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.vacio-grande p { margin: 0; color: var(--texto-tenue); font-size: .85rem; max-width: 30rem; }

.barra-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.barra-filtros .filtros { margin: 0; }

.buscador-servidor { position: relative; display: flex; align-items: center; margin: 0; width: min(22rem, 100%); }
.buscador-servidor svg {
  position: absolute; left: .75rem; width: 1rem; height: 1rem;
  fill: none; stroke: var(--texto-tenue); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.buscador-servidor input { padding: .4rem .7rem .4rem 2.2rem; background: #fff; }

.tabla__numero { text-align: right; font-variant-numeric: tabular-nums; }
.bloque-pequeno { display: block; color: var(--texto-tenue); font-size: .74rem; margin-top: .1rem; }
.alerta-texto { color: #b45309; font-weight: 600; }
.bloque-enlace { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .4rem; }

/* Estados de comprobante y de envio. */
.estado--cpe-pendiente, .estado--envio-pendiente { background: #fff4e0; color: #9a5b00; }
.estado--cpe-enviado, .estado--envio-en_ruta { background: #eef4ff; color: #3538cd; }
.estado--cpe-aceptado, .estado--envio-entregado { background: #ecfdf3; color: #067647; }
.estado--cpe-observado { background: #fefbe8; color: #854a0e; }
.estado--cpe-rechazado { background: #fde8e7; color: #b42318; }
.estado--cpe-anulado, .estado--envio-anulado { background: #f4f4f5; color: #52525b; text-decoration: line-through; }
.estado--grande { padding: .35rem .8rem; font-size: .78rem; }

/* La ficha del comprobante. */
.ficha-cpe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 12px;
  align-items: start;
  margin-bottom: .75rem;
}

.ficha-cpe__lateral { display: grid; gap: 12px; }

.cpe-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}

.cpe-cabecera__tipo { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.cpe-cabecera__numero { margin: .1rem 0 .2rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cpe-cabecera .pista { margin: 0; }

.cpe-receptor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 10px 16px;
  margin: 0 0 14px;
}

.cpe-receptor dt { font-size: .72rem; color: var(--texto-tenue); font-weight: 600; }
.cpe-receptor dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 600; }

.cpe-totales { display: grid; justify-content: end; gap: 4px; margin: 14px 0 0; }
.cpe-totales div { display: flex; justify-content: space-between; gap: 3rem; font-size: .88rem; }
.cpe-totales dt { color: var(--texto-suave); }
.cpe-totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.cpe-totales__total { margin-top: 4px; padding-top: 6px; border-top: 2px solid #0a0a0a; font-size: 1.05rem !important; font-weight: 800; }

.cpe-mensaje { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fafafa; font-size: .8rem; line-height: 1.5; }
.cpe-mensaje--error { background: #fff4f3; color: #b42318; }

.cpe-archivos { display: grid; gap: 6px; }
.cpe-archivos form { margin: 0; }
.cpe-archivos .boton { width: 100%; }

.cpe-anular summary { cursor: pointer; font-weight: 650; font-size: .88rem; color: #b42318; }
.cpe-anular[open] summary { margin-bottom: 12px; }

/* Pasos: la configuracion y el avance del envio. */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
}

.paso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
}

.paso strong { display: block; font-size: .86rem; }
.paso small { display: block; color: var(--texto-tenue); font-size: .75rem; }

.paso__numero {
  display: grid;
  place-items: center;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
  color: var(--texto-suave);
  font-size: .8rem;
  font-weight: 700;
}

.paso--hecho { border-color: #0a0a0a; }
.paso--hecho .paso__numero { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }

/* Opciones grandes: como se emite y el IGV. */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.opcion-tarjeta {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 12px 10px 36px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
}

.opcion-tarjeta input { position: absolute; left: 12px; top: 13px; width: auto; accent-color: #0a0a0a; }
.opcion-tarjeta strong { display: block; color: var(--texto); font-size: .86rem; }
.opcion-tarjeta small { display: block; color: var(--texto-tenue); font-size: .76rem; line-height: 1.4; }
.opcion-tarjeta:has(input:checked) { border-color: #0a0a0a; box-shadow: 0 0 0 1px #0a0a0a; }

/* La barra de botones dentro de una tarjeta, no pegada a la pantalla. */
.ficha__pie--dentro {
  position: static;
  margin: 16px -18px -18px;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  background: #fafafa;
}

.ficha.seccion { margin-bottom: 12px; }

/* La historia del envio. */
.historia { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.historia li { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.historia li span:nth-child(2) { flex: 1; color: var(--texto-suave); }
.historia time { color: var(--texto-tenue); font-size: .76rem; white-space: nowrap; }

@media (max-width: 62rem) {
  .ficha-cpe { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .pasos, .opciones-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .aviso-grande { flex-wrap: wrap; }
}

/* ==========================================================================
 * EL SUBIDOR: fotos y videos desde cada pantalla
 * ========================================================================== */

.fotos-modulo__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px;
}

.fotos-modulo__grupo--ancho { grid-column: 1 / -1; }
.fotos-modulo__grupo h3 { margin: 0; font-size: .86rem; font-weight: 700; }
.fotos-modulo__grupo .pista { margin: .15rem 0 .6rem; font-size: .76rem; }

.subidor { position: relative; display: grid; gap: 10px; }

.subidor__piezas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 8px;
}

.subidor__piezas:empty { display: none; }

.subidor--unica .subidor__piezas { grid-template-columns: minmax(0, 14rem); }

.pieza {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-conic-gradient(#f4f4f5 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

.pieza img, .pieza video { display: block; width: 100%; height: 100%; object-fit: cover; }

.subidor--unica .pieza { aspect-ratio: 4 / 3; }
.subidor--unica .pieza img { object-fit: contain; padding: 8px; }

.pieza__marca {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pieza__quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  box-shadow: none;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}

.pieza:hover .pieza__quitar, .pieza__quitar:focus-visible { opacity: 1; }
.pieza__quitar:hover { background: #dc2626; }
.pieza__quitar svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (hover: none) { .pieza__quitar { opacity: 1; } }

.pieza--subiendo img, .pieza--subiendo video { opacity: .55; filter: grayscale(.3); }

.pieza__progreso {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  overflow: hidden;
}

.pieza__progreso span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #0a0a0a;
  transition: width .15s linear;
}

.subidor__zona {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px dashed #d4d4d8;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s ease, background .15s ease;
}

.subidor__zona:hover, .subidor--encima .subidor__zona { border-color: #0a0a0a; background: #f4f4f5; }
.subidor--encima { outline: 2px solid #0a0a0a; outline-offset: 4px; border-radius: 12px; }

.subidor__archivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.subidor__zona:focus-within { border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(9, 9, 11, .08); }

.subidor__icono {
  display: grid;
  place-items: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: #0a0a0a;
  color: #fff;
}

.subidor__icono svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.subidor__texto strong { display: block; color: var(--texto); font-size: .86rem; font-weight: 650; }
.subidor__texto small { display: block; color: var(--texto-tenue); font-size: .75rem; }

.subidor--ocupado .subidor__icono { animation: subidor-late 1s ease-in-out infinite; }

@keyframes subidor-late { 50% { opacity: .45; } }

.subidor__biblioteca summary { cursor: pointer; color: var(--texto-suave); font-size: .8rem; font-weight: 600; }
.subidor__biblioteca[open] summary { margin-bottom: 8px; }

.subidor__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 6px;
  max-height: 14rem;
  overflow-y: auto;
  padding: 2px;
}

.subidor__opcion {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}

.subidor__opcion:hover { border-color: #0a0a0a; box-shadow: 0 0 0 2px #0a0a0a; }
.subidor__opcion img { width: 100%; height: 100%; object-fit: cover; }

.subidor__error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4f3;
  color: #b42318;
  font-size: .8rem;
}

.subida__forma .subidor__zona { padding: 26px 18px; }

/* ==========================================================================
 * GESTION: CAJA, TRABAJADORES Y REPORTES
 * ========================================================================== */

.kpi--positivo .kpi__icono { background: #ecfdf3; color: #067647; }

/* --- Caja --- */

.caja-cerrada {
  display: grid;
  justify-items: center;
  gap: .5rem;
  max-width: 34rem;
  margin: 1.5rem auto;
  padding: 2rem 1.5rem;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.caja-cerrada__icono {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 14px;
  background: #0a0a0a;
  color: #fff;
}

.caja-cerrada__icono svg { width: 1.5rem; height: 1.5rem; }
.caja-cerrada h2 { margin: .3rem 0 0; font-size: 1.25rem; }
.caja-cerrada p { margin: 0; color: var(--texto-suave); font-size: .9rem; }

.caja-cerrada__forma {
  display: grid;
  gap: .75rem;
  width: 100%;
  max-width: 20rem;
  margin-top: .75rem;
  text-align: left;
}

.caja-cerrada__forma .campo-prefijo { border: 1px solid #e4e4e7; border-radius: 9px; }
.caja-cerrada__forma input { font-size: 1.2rem; font-weight: 700; }

.tipo-movimiento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.tipo-movimiento__opcion { position: relative; margin: 0; }
.tipo-movimiento__opcion input { position: absolute; opacity: 0; pointer-events: none; }

.tipo-movimiento__opcion span {
  display: block;
  padding: .75rem;
  border: 1.5px solid #e4e4e7;
  border-radius: 10px;
  color: var(--texto-suave);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
}

.tipo-movimiento__opcion--ingreso input:checked + span { border-color: #067647; background: #ecfdf3; color: #067647; }
.tipo-movimiento__opcion--egreso input:checked + span { border-color: #b42318; background: #fff4f3; color: #b42318; }
.tipo-movimiento__opcion input:focus-visible + span { outline: 2px solid #0a0a0a; outline-offset: 2px; }

.campos--movimiento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campos--movimiento .campo--ancho { grid-column: 1 / -1; }
.campos--movimiento [hidden] { display: none; }

.movimiento { gap: .75rem; }

.movimiento__signo {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 800;
}

.movimiento__signo--ingreso { background: #ecfdf3; color: #067647; }
.movimiento__signo--egreso { background: #fff4f3; color: #b42318; }

.movimiento__monto--ingreso { color: #067647; }
.movimiento__monto--egreso { color: #b42318; }

.movimiento--anulado { opacity: .5; }
.movimiento--anulado .fila-rapida__principal strong,
.movimiento--anulado .fila-rapida__monto,
.fila-anulada td { text-decoration: line-through; color: var(--texto-tenue); }

.movimiento__anular { position: relative; }
.movimiento__anular summary { list-style: none; cursor: pointer; }
.movimiento__anular summary::-webkit-details-marker { display: none; }

.movimiento__anular form {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: flex;
  gap: 6px;
  width: 18rem;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(9, 9, 11, .14);
}

.movimiento__anular input { padding: .35rem .55rem; font-size: .82rem; }

.tabla-mini { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-mini th { padding: .3rem 0; color: var(--texto-tenue); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.tabla-mini td { padding: .45rem 0; border-top: 1px solid #f0f0f1; }
.tabla-mini .tabla__numero, .tabla-mini th:not(:first-child) { text-align: right; }

.diferencia { font-weight: 700; }
.diferencia--falta { color: #b42318; }
.diferencia--sobra { color: #b45309; }
.diferencia--cuadra { color: #067647; }

.arqueo {
  display: grid;
  gap: 4px;
  max-width: 30rem;
  margin-bottom: .75rem;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
}

.arqueo__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 4px 0; font-size: .9rem; }
.arqueo__fila span { color: var(--texto-suave); }
.arqueo__fila strong { font-variant-numeric: tabular-nums; }
.arqueo__fila--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borde); }
.arqueo__fila--diferencia { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #fafafa; font-size: 1rem; }
.arqueo__fila--diferencia span { color: inherit; font-weight: 700; }
.arqueo__notas { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #fafafa; font-size: .85rem; }

/* --- Trabajadores --- */

.personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 10px;
}

.persona {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .04);
}

/* El estado lo dice el borde entero, apenas teñido: sin raya al costado. */
.persona--trabajando { border-color: #c7c8f5; }
.persona--salio { border-color: #b7e6ca; }
.persona--ausente { border-color: #f2c6c2; }
.persona--baja { opacity: .6; }

.persona__cabecera { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }

.persona__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.persona__nombre { display: grid; min-width: 0; }
.persona__nombre strong { overflow: hidden; font-size: .95rem; white-space: nowrap; text-overflow: ellipsis; }
.persona__nombre small { color: var(--texto-tenue); font-size: .76rem; }
.persona__cabecera:hover strong { text-decoration: underline; }

.persona__hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 1.6rem; }
.persona__acciones form { margin: 0; }
.persona__boton { width: 100%; padding: .6rem; }

.campo-prefijo__texto--final { border-right: 0; border-left: 1px solid #e4e4e7; }

.tabla-envoltura--plana { border: 0; border-radius: 0; box-shadow: none; }

.corregir { padding: 12px 16px 16px; border-top: 1px solid var(--borde); }
.corregir summary { cursor: pointer; font-size: .86rem; font-weight: 650; }
.corregir[open] summary { margin-bottom: 12px; }
.campos--corregir { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pagos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pagos li { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; }
.pagos span { display: grid; }
.pagos small, .pagos time { color: var(--texto-tenue); font-size: .74rem; }

/* --- Periodo y reportes --- */

.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: .5rem;
}

.periodo__atajos { display: flex; flex-wrap: wrap; gap: .35rem; }
.periodo__fechas { display: flex; align-items: center; gap: 6px; }
.periodo__fechas input { width: auto; padding: .3rem .5rem; font-size: .82rem; background: #fff; }
.periodo__fechas span { color: var(--texto-tenue); font-size: .8rem; }

.periodo__nombre { margin: 0 0 .6rem; color: var(--texto-suave); font-size: .84rem; font-weight: 600; }

.variacion { font-weight: 700; }
.variacion--sube { color: #067647; }
.variacion--baja { color: #b42318; }

.reporte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.reporte__ancho { grid-column: 1 / -1; }
.reporte__nota { margin: 0; padding: 10px 16px 14px; color: var(--texto-suave); font-size: .82rem; }

.grafico {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 15rem;
  padding: 16px 16px 8px;
  overflow-x: auto;
}

.grafico__columna {
  display: flex;
  flex: 1 0 1.6rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 1.6rem;
}

.grafico__barra {
  width: 100%;
  max-width: 2.4rem;
  min-height: 1px;
  border-radius: 6px 6px 2px 2px;
  background: #0a0a0a;
  transition: background .15s ease;
}

.grafico__columna:hover .grafico__barra { background: #52525b; }

.grafico__valor {
  margin-bottom: 4px;
  color: var(--texto-tenue);
  font-size: .6rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}

.grafico__columna:hover .grafico__valor { opacity: 1; }

.grafico__etiqueta { margin-top: 6px; color: var(--texto-tenue); font-size: .62rem; white-space: nowrap; }

.barras-fila { list-style: none; margin: 0; padding: 12px 16px 16px; display: grid; gap: 12px; }
.barras-fila__texto { display: flex; justify-content: space-between; gap: .75rem; font-size: .86rem; }
.barras-fila__texto span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.barras-fila__pista { height: 6px; margin: 5px 0 3px; border-radius: 999px; background: #f0f0f1; overflow: hidden; }
.barras-fila__pista span { display: block; height: 100%; border-radius: inherit; background: #0a0a0a; }
.barras-fila small { color: var(--texto-tenue); font-size: .72rem; }

@media (max-width: 62rem) {
  .reporte { grid-template-columns: minmax(0, 1fr); }
  .campos--movimiento, .campos--corregir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .campos--movimiento, .campos--corregir { grid-template-columns: minmax(0, 1fr); }
  .periodo__fechas { width: 100%; }
  .periodo__fechas input { flex: 1; }
}

@media print {
  .menu, .barra, .periodo, .encabezado-pagina__acciones, .ficha__pie, .enlace { display: none !important; }
  .contenido { padding: 0; }
  body.admin { background: #fff; }
  .tarjeta, .kpi, .seccion { box-shadow: none; break-inside: avoid; }
}

/* --- Seguridad de la cuenta ------------------------------------------------ */

.seguridad-alta {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-suave) 100%);
}

.seguridad-alta__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--marca-900);
  color: #fff;
}

.seguridad-alta__icono svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.seguridad-alta__texto { flex: 1; min-width: 0; }
.seguridad-alta__texto > strong { display: block; font-size: .98rem; }
.seguridad-alta__texto > p { margin: .3rem 0 .9rem; max-width: 60ch; color: var(--texto-suave); font-size: .86rem; }

.seguridad-alta__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.seguridad-alta__nombre { flex: 1 1 14rem; margin: 0; max-width: 20rem; }
.seguridad-alta .aviso { margin: .9rem 0 0; }
.seguridad-alta .aviso[hidden] { display: none; }

.seguridad-nota { margin: .9rem 0 0; }

@media (max-width: 600px) {
  .seguridad-alta { flex-direction: column; }
  .seguridad-alta__nombre { max-width: none; }
}

/* --- Camara del rostro -------------------------------------------------------
 *
 * La usan el paso extra del acceso y el registro en Seguridad. El video va en
 * espejo: la gente se mueve como ante un espejo, y sin darle la vuelta gira
 * la cabeza al lado contrario del que ve.
 */

.rostro-camara {
  position: relative;
  width: min(240px, 72%);
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #27272a, #0a0a0a 70%);
  box-shadow: 0 0 0 4px #f4f4f5, 0 0 0 5px #e4e4e7;
  overflow: hidden;
  isolation: isolate;
}

.rostro-camara[hidden] { display: none; }

.rostro-camara__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* El ovalo marca donde poner la cara. */
.rostro-camara__guia {
  position: absolute;
  inset: 14% 22% 10%;
  border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: 50% / 45%;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.rostro-camara.esta-grabando .rostro-camara__guia { opacity: 1; }

/* El anillo gira mientras mira; al reconocer se queda verde. */
.rostro-camara::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
  z-index: 2;
}

.rostro-camara.esta-grabando::after,
.rostro-camara.esta-verificando::after {
  border-color: rgba(255, 255, 255, .18);
  border-top-color: #fff;
  animation: acceso-gira 1.1s linear infinite;
}

.rostro-camara.esta-aceptado { box-shadow: 0 0 0 4px #d1fadf, 0 0 0 5px #087443; }
.rostro-camara.esta-aceptado::after { border-color: #12b76a; animation: none; }

.rostro-camara__reposo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .8);
}

.rostro-camara__reposo[hidden] { display: none; }

.rostro-camara__reposo svg {
  width: 38%;
  height: 38%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rostro-pasos {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.rostro-pasos[hidden] { display: none; }

.rostro-pasos li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  color: #71717a;
  font-size: .72rem;
  font-weight: 600;
  counter-increment: paso;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rostro-pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #f4f4f5;
  font-size: .64rem;
}

.rostro-pasos li.esta-activo { border-color: #0a0a0a; color: #0a0a0a; }
.rostro-pasos li.esta-activo::before { background: #0a0a0a; color: #fff; }
.rostro-pasos li.esta-hecho { border-color: #b7e6ca; background: #f0faf4; color: #087443; }
.rostro-pasos li.esta-hecho::before { content: "✓"; background: #087443; color: #fff; }

.rostro-estado {
  min-height: 2.6em;
  margin: 0 0 1rem;
  color: #52525b;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.acceso__cuerpo .acceso__aviso[hidden] { display: none; }

.rostro-enlaces { margin: 1.1rem 0 0; }

.rostro-camara--panel { width: min(220px, 100%); margin: 1rem 0 .75rem; }
.rostro-pasos--panel { justify-content: flex-start; }

.seguridad-quitar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

@media (prefers-reduced-motion: reduce) {
  .rostro-camara.esta-grabando::after,
  .rostro-camara.esta-verificando::after { animation-duration: 2.4s; }
}

/* --- DNI con busqueda en RENIEC --------------------------------------------
 *
 * La lupa va DENTRO del campo, a la derecha: se escribe y se pulsa sin
 * mover la mano a otro sitio. Al usar los datos de RENIEC, el borde se
 * queda verde para que se vea que ese DNI esta comprobado.
 */

.campo > label.campo__nombre { margin: 0; }

.campo-buscar { position: relative; display: block; }

.campo-buscar input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
  padding-right: 2.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.campo-buscar .campo-buscar__boton {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--acento);
  color: var(--acento-texto, #fff);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: none;
  cursor: pointer;
}

.campo-buscar .campo-buscar__boton:hover { background: var(--acento-hover); }
/* Solo la lupa: el nombre de a donde se pregunta va en el title y en el
   aria-label, que es lo que se lee al pasar el raton y con lector. */
.campo-buscar__boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campo-buscar .campo-buscar__boton:active { transform: none; }
.campo-buscar .campo-buscar__boton:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }
.campo-buscar .campo-buscar__boton:disabled { opacity: .7; cursor: progress; }

.campo-buscar__boton svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.campo-buscar.esta-buscando .campo-buscar__boton svg { animation: dni-late 0.9s ease-in-out infinite; }

@keyframes dni-late { 50% { transform: scale(.8); } }

.campo-buscar.esta-verificado input { border-color: #12b76a; background: #f6fef9; }

.campo-buscar.esta-verificado::after {
  content: "✓ " attr(data-verificado);
  position: absolute;
  top: 50%;
  right: 3.1rem;
  transform: translateY(-50%);
  color: #087443;
  font-size: .7rem;
  font-weight: 700;
  pointer-events: none;
}

/* --- La ventana de RENIEC --- */

.dni-dialogo {
  width: min(440px, calc(100% - 2rem));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--texto);
}

.dni-dialogo::backdrop { background: rgba(9, 9, 11, .6); backdrop-filter: blur(3px); }

.dni-dialogo[open] { animation: dni-abre .22s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes dni-abre {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.dni-dialogo__caja {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.dni-dialogo__cabecera {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid #f0f0f2;
}

.dni-dialogo__cabecera h2 { margin: 0; font-size: 1rem; font-weight: 750; }
.dni-dialogo__cabecera p { margin: .1rem 0 0; color: var(--texto-suave); font-size: .8rem; }
.dni-dialogo__cabecera p strong { color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.dni-dialogo__sello {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  background: #0a0a0a;
  color: #fff;
}

.dni-dialogo__sello svg,
.dni-dialogo__cerrar svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dni-dialogo .dni-dialogo__cerrar {
  margin-left: auto;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-tenue);
  box-shadow: none;
}

.dni-dialogo .dni-dialogo__cerrar:hover { background: #f4f4f5; color: var(--texto); }

.dni-dialogo__cuerpo { padding: 1.2rem; min-height: 8.5rem; }

.dni-dialogo__cuerpo [hidden] { display: none !important; }

.dni-dialogo__cargando {
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: 1.2rem 0;
  color: var(--texto-suave);
  font-size: .86rem;
}

.dni-dialogo__cargando p { margin: 0; }

.dni-dialogo__girando {
  width: 28px;
  height: 28px;
  border: 3px solid #e4e4e7;
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: acceso-gira .7s linear infinite;
}

.dni-dialogo__nombre { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.dni-dialogo__nombre strong { display: block; font-size: 1.02rem; line-height: 1.3; }

.dni-dialogo__iniciales {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #f4f4f5;
  color: #0a0a0a;
  font-weight: 800;
  letter-spacing: .02em;
}

.dni-dialogo__verificado {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #ecfdf3;
  color: #087443;
  font-size: .72rem;
  font-weight: 700;
}

.dni-dialogo__verificado svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dni-dialogo__datos {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid #f0f0f2;
  border-radius: 12px;
  overflow: hidden;
}

.dni-dialogo__datos div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .85rem;
  font-size: .86rem;
}

.dni-dialogo__datos div + div { border-top: 1px solid #f0f0f2; }
.dni-dialogo__datos dt { color: var(--texto-suave); }
.dni-dialogo__datos dd { margin: 0; font-weight: 650; text-align: right; }

.dni-dialogo__aviso {
  margin: .85rem 0 0;
  padding: .55rem .75rem;
  border-radius: 9px;
  background: #fffaeb;
  color: #b54708;
  font-size: .78rem;
}

.dni-dialogo__error {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .85rem;
  border: 1px solid #f5c2bd;
  border-radius: 12px;
  background: #fff5f4;
  color: #b42318;
  font-size: .86rem;
}

.dni-dialogo__error p { margin: 0; }

.dni-dialogo__error svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dni-dialogo__pie {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid #f0f0f2;
  background: #fafafa;
}

.dni-dialogo__pie [hidden] { display: none; }

@media (max-width: 480px) {
  .dni-dialogo__pie { flex-direction: column-reverse; }
  .dni-dialogo__pie button { width: 100%; }
}

/* --- Avatar con foto y menu de usuario --------------------------------------- */

.usuario__avatar { overflow: hidden; }
.usuario__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.usuario__caja { width: 17rem; }

.usuario__ficha {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .15rem .15rem .45rem;
  padding: .5rem .45rem .75rem;
  border-bottom: 1px solid var(--borde);
}

.usuario__ficha > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.usuario__ficha strong { overflow: hidden; font-size: .88rem; white-space: nowrap; text-overflow: ellipsis; }
.usuario__ficha small { overflow: hidden; color: var(--texto-tenue); font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }

.usuario__avatar--grande { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; border-radius: 50%; font-size: .9rem; }

.usuario__caja a, .usuario__caja button { align-items: center; gap: .6rem; }
.usuario__caja .menu__icono { width: 1.05rem; height: 1.05rem; color: var(--texto-tenue); }
.usuario__caja button .menu__icono { color: currentColor; }
.usuario__caja form { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--borde); }

/* --- Mi perfil --------------------------------------------------------------- */

.perfil {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 72rem;
}

.perfil__lado,
.perfil__principal { display: grid; gap: 16px; }

@media (min-width: 62.01rem) {
  .perfil__lado { position: sticky; top: calc(var(--barra-alto) + 12px); }
}

.perfil__tarjeta { position: relative; padding: 0 0 1.1rem; overflow: hidden; text-align: center; }

.perfil__portada {
  height: 5.5rem;
  background:
    radial-gradient(260px 120px at 80% -20%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(135deg, #18181b 0%, #000 100%);
}

.perfil__foto-forma { display: flex; justify-content: center; margin-top: -3.5rem; }

.perfil__foto {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  margin: 0;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.perfil__foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.perfil__foto img[hidden],
.perfil__iniciales[hidden] { display: none; }

.perfil__iniciales { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .03em; }

.perfil__camara {
  position: absolute;
  right: .1rem;
  bottom: .1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}

.perfil__foto:hover .perfil__camara { transform: scale(1.08); }

.perfil__camara svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* El campo de archivo existe pero no se ve: la foto entera es el boton. */
.perfil__archivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.perfil__foto-forma.esta-subiendo .perfil__foto::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 3px solid transparent;
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: acceso-gira .8s linear infinite;
}

.perfil__foto:focus-within { outline: 2px solid #0a0a0a; outline-offset: 5px; }

.perfil__quien { padding: .8rem 1.1rem 0; }
.perfil__quien h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.perfil__cargo { margin: .15rem 0 0; color: var(--texto-suave); font-size: .86rem; }

.perfil__rol {
  display: inline-block;
  margin-top: .55rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.perfil__foto-acciones {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}

.perfil__nota { margin: .5rem 1.1rem 0; color: var(--texto-tenue); font-size: .74rem; }
.perfil__nota.es-error { color: #b42318; font-weight: 600; }

.perfil__datos {
  display: grid;
  margin: 1.1rem 1.1rem 0;
  border-top: 1px solid var(--borde);
  text-align: left;
}

.perfil__datos div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid #f4f4f5;
  font-size: .82rem;
}

.perfil__datos div:last-child { border-bottom: 0; }

.perfil__datos dt { display: inline-flex; align-items: center; gap: .45rem; color: var(--texto-tenue); white-space: nowrap; }
.perfil__datos dd { margin: 0; min-width: 0; overflow: hidden; font-weight: 600; text-align: right; text-overflow: ellipsis; }

.perfil__datos svg,
.perfil__metodos svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfil__accesos { padding-bottom: 1rem; }

.perfil__metodos { display: grid; gap: .45rem; margin: 0; padding: 0 1rem; list-style: none; }

.perfil__metodos li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto-tenue);
}

.perfil__metodos li svg { width: 1.2rem; height: 1.2rem; }
.perfil__metodos li span { display: grid; line-height: 1.3; }
.perfil__metodos li strong { color: var(--texto); font-size: .84rem; }
.perfil__metodos li small { font-size: .74rem; }

.perfil__metodos li.esta-activo { border-color: #b7e6ca; background: #f6fef9; }
.perfil__metodos li.esta-activo svg { color: #087443; }

.perfil__ir { display: flex; margin: .8rem 1rem 0; }

.perfil__fuerza {
  display: block;
  height: 4px;
  margin-top: .1rem;
  border-radius: 999px;
  background: #f4f4f5;
  overflow: hidden;
}

.perfil__fuerza i { display: block; width: 0; height: 100%; border-radius: inherit; background: #d4d4d8; transition: width .2s ease, background-color .2s ease; }
.perfil__fuerza i.nivel-1 { background: #d92d20; }
.perfil__fuerza i.nivel-2 { background: #f79009; }
.perfil__fuerza i.nivel-3 { background: #eaaa08; }
.perfil__fuerza i.nivel-4, .perfil__fuerza i.nivel-5 { background: #12b76a; }

.pista.es-ok { color: #087443; font-weight: 600; }
.pista.es-error { color: #b42318; font-weight: 600; }

.perfil .seccion[id] { scroll-margin-top: calc(var(--barra-alto) + 16px); }

@media (max-width: 62rem) {
  .perfil { grid-template-columns: minmax(0, 1fr); }
}

/* El alta del equipo: dos columnas iguales, DNI junto al nombre y el
 * correo junto a la contraseña. */
.rejilla-alta { align-items: start; }
.rejilla-alta .campo { margin-bottom: 1.1rem; }
.rejilla-alta .campo-buscar input { margin: 0; }
@media (min-width: 62rem) {
  .rejilla-alta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
 * Agencia & Publicidades (clases ag-)
 *
 * Portado del bloque "Agencia" de MANGORA (mangora-plata.css, clases ax- y
 * ag-) a los nombres semanticos de este panel. Los colores de los estados
 * del contenido son los mismos que alla: idea gris, produccion violeta, por
 * aprobar ambar, cambios rojo, aprobado azul, publicado verde.
 * ========================================================================== */

.ag-tenue { color: var(--texto-tenue); }
.ag-rojo { color: var(--peligro); font-weight: 650; }
.ag-derecha { text-align: right; white-space: nowrap; }
.ag-margen { margin-top: 1rem; }
.ag-margen-abajo { margin: -.25rem 0 1rem; }
.ag-relleno { padding: .9rem 1.2rem 1.1rem; }
.ag-relleno-lado { padding: 0 1.2rem; margin: 0 0 .6rem; }
.ag-saltos { white-space: pre-line; margin: 0; }
.ag-enlinea { display: inline; }
.ag-empuja { margin-left: auto; }
.ag-titulo-mes { margin: .25rem 0 .75rem; font-size: 1.15rem; letter-spacing: -.01em; }
.ag-insignias { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.25rem 0 1rem; }
.ag-numero { max-width: 6.5rem; }

/* Las pastillas de situacion y estado */
.ag-sit {
  display: inline-block; padding: .18rem .6rem; border-radius: var(--radio-pastilla);
  background: var(--gris-100); color: var(--texto-suave); font-size: .72rem; font-weight: 650; white-space: nowrap;
}
.ag-sit--pagado, .ag-sit--contrato-activo, .ag-sit--cobro-pagado { background: #ecfdf3; color: #067647; }
.ag-sit--al_dia, .ag-sit--contrato-pausado, .ag-sit--cobro-pendiente { background: #fff4e0; color: #9a5b00; }
.ag-sit--vencido, .ag-sit--por_pausar, .ag-sit--contrato-cancelado { background: #fde8e7; color: #b42318; }
.ag-sit--sin_cobro, .ag-sit--cobro-cancelado { background: var(--gris-100); color: var(--texto-tenue); }

.ag-chip-estado { display: inline-block; padding: .16rem .55rem; border-radius: 7px; font-size: .72rem; font-weight: 650; background: var(--gris-100); color: var(--texto-suave); }
.ag-chip-estado--produccion { background: #f0f0fd; color: #3538cd; }
.ag-chip-estado--por_aprobar { background: #fff4e0; color: #9a5b00; }
.ag-chip-estado--cambios { background: #fde8e7; color: #b42318; }
.ag-chip-estado--aprobado { background: #e8f2fe; color: #175cd3; }
.ag-chip-estado--publicado { background: #ecfdf3; color: #067647; }

.ag-barra { display: block; height: 5px; margin: .2rem 0 .15rem; border-radius: 3px; background: #ececf0; overflow: hidden; min-width: 5rem; }
.ag-barra span { display: block; height: 100%; border-radius: inherit; background: var(--marca-600); }

.ag-red {
  flex: 0 0 30px; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 9px;
  background: var(--marca-800); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: -.02em;
}
.ag-fila-red { display: flex; align-items: center; gap: .5rem; }

/* El enlace recien creado */
.ag-listo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: 1rem; border-color: var(--ok-borde); background: var(--ok-fondo); }
.ag-listo p { margin: .2rem 0 .5rem; color: var(--texto-suave); font-size: .85rem; }
.ag-listo__enlace { min-width: min(30rem, 80vw); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; cursor: copy; }

/* Lista de clientes */
.ag-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.ag-cliente {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem; border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); background: var(--panel); box-shadow: var(--sombra-tarjeta);
  color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.ag-cliente:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.ag-cliente--sin { opacity: .82; }
.ag-cliente__cabeza { display: flex; align-items: center; gap: .75rem; }
.ag-cliente__cabeza strong { display: block; font-size: .95rem; }
.ag-cliente__cabeza small { display: block; color: var(--texto-tenue); font-size: .75rem; margin-top: 2px; }
.ag-avatar {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(180deg, var(--marca-700), var(--marca-900)); color: #fff; font-weight: 700; font-size: .85rem;
}
.ag-avatar--grande { flex-basis: 60px; width: 60px; height: 60px; border-radius: 17px; font-size: 1.15rem; }
.ag-cliente__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.ag-cliente__datos div { padding: .55rem .65rem; border-radius: 10px; background: var(--panel-suave); }
.ag-cliente__datos dt { color: var(--texto-tenue); font-size: .68rem; font-weight: 600; }
.ag-cliente__datos dd { margin: 2px 0 0; font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cliente__datos dd small { font-weight: 500; color: var(--texto-tenue); }
.ag-cliente__datos .alerta { background: var(--peligro-fondo); }
.ag-cliente__datos .alerta dd { color: var(--peligro); }
.ag-cliente__datos .aviso { background: #fff4e0; }
.ag-cliente__datos .aviso dd { color: #8a5800; }
.ag-cliente__marca { display: grid; gap: .3rem; color: var(--texto-tenue); font-size: .72rem; font-weight: 560; }

/* Ficha del cliente */
.ag-quien { display: flex; align-items: center; gap: 1rem; margin: -.25rem 0 1rem; }
.ag-quien p { margin: 0 0 .15rem; }
.ag-pestanas { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid var(--borde); }
.ag-pestanas a { padding: .55rem .9rem; border-bottom: 2px solid transparent; color: var(--texto-suave); font-weight: 600; font-size: .88rem; text-decoration: none; }
.ag-pestanas a:hover { color: var(--texto); }
.ag-pestanas a.activa { color: var(--texto); border-bottom-color: var(--marca-900); }
.ag-cabeza-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ag-cabeza-seccion h2 { margin: 0; font-size: 1.1rem; }
.ag-cabeza-seccion p { margin: .25rem 0 0; color: var(--texto-tenue); font-size: .85rem; }
.ag-proximas { margin: 0; padding: .4rem .9rem .9rem; list-style: none; display: grid; gap: .4rem; }
.ag-proximas li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 11px; background: var(--panel-suave); }
.ag-proximas li div { flex: 1; min-width: 0; }
.ag-proximas strong { display: block; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-proximas small { color: var(--texto-tenue); font-size: .75rem; }
.ag-breve { display: grid; grid-template-columns: max-content 1fr; gap: .5rem .9rem; margin: 0; padding: .4rem 1.2rem 1rem; font-size: .85rem; }
.ag-breve dt { color: var(--texto-tenue); font-weight: 600; }
.ag-breve dd { margin: 0; line-height: 1.45; }
.ag-colores { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ag-colores span { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.ag-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: 0; padding: .4rem 1.2rem 1rem; }
.ag-datos div { padding: .6rem .75rem; border-radius: 10px; background: var(--panel-suave); }
.ag-datos dt { color: var(--texto-tenue); font-size: .72rem; font-weight: 600; }
.ag-datos dd { margin: .15rem 0 0; font-weight: 650; font-size: .88rem; }

/* El mes: cobros */
.ag-acciones-cobro { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center; }
.ag-pagar { display: flex; gap: .35rem; align-items: center; }
.ag-pagar select { width: auto; padding: .25rem .5rem; font-size: .8rem; }

/* Formularios */
.ag-doc { display: flex; gap: .4rem; }
.ag-doc input { flex: 1; min-width: 0; }
.ag-doc .boton { flex: 0 0 auto; }
.ag-nuevo { margin: 0 1.2rem 1rem; padding: 1rem 0 .25rem; border-radius: 12px; background: var(--panel-suave); box-shadow: inset 0 0 0 1px var(--borde); }
.ag-nuevo__titulo { margin: 0 1.2rem .5rem; font-size: .88rem; color: var(--texto-suave); }
.ag-check { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .8rem; color: var(--texto-suave); cursor: pointer; }
.ag-check input { width: auto; }
.ag-arte { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; object-fit: contain; background: var(--panel-suave); }
.ag-filtro { display: flex; align-items: center; gap: .6rem; max-width: 28rem; margin: 0 0 .9rem; }
.ag-filtro label { color: var(--texto-tenue); font-size: .85rem; font-weight: 600; }
.ag-estado-rapido select { width: auto; padding: .25rem .5rem; font-size: .8rem; }

/* Boveda */
.ag-pedir { display: grid; gap: .75rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.ag-chips-check { display: flex; flex-wrap: wrap; gap: .35rem; }
.ag-chips-check label { cursor: pointer; }
.ag-chips-check input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.ag-chips-check span { display: inline-block; padding: .4rem .75rem; border-radius: 999px; background: var(--gris-100); color: var(--texto-suave); font-size: .82rem; font-weight: 560; transition: background .15s; }
.ag-chips-check input:checked + span { background: var(--marca-900); color: #fff; }
.ag-chips-check input:focus-visible + span { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.ag-pedir__pie { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ag-pedir__pie label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--texto-tenue); }
.ag-pedir__pie input { width: 11rem; }

.ag-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.ag-acceso { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--panel); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.ag-acceso--revisar { box-shadow: inset 3px 0 0 #ff9f0a, var(--sombra-tarjeta); }
.ag-acceso--apagado { opacity: .6; }
.ag-acceso header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem .6rem; }
.ag-acceso header strong { display: block; font-size: .9rem; }
.ag-acceso header small { display: block; color: var(--texto-tenue); font-size: .78rem; margin-top: 1px; }
.ag-acceso__datos { display: grid; margin: 0; padding: 0 1.1rem .5rem; }
.ag-acceso__datos div { display: grid; grid-template-columns: 6rem 1fr; gap: .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--borde); }
.ag-acceso__datos dt { color: var(--texto-tenue); font-size: .75rem; font-weight: 600; }
.ag-acceso__datos dd { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; font-size: .82rem; }
.ag-acceso__datos code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; }
.ag-secreto { letter-spacing: .08em; }
.ag-secreto.visible { letter-spacing: 0; padding: 3px 8px; border-radius: 7px; background: #fff8ec; color: var(--texto); }
[data-notas].visible { display: block; white-space: pre-wrap; padding: 6px 8px; border-radius: 7px; background: #fff8ec; color: var(--texto); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .75rem; }
.ag-copiar { flex: 0 0 auto; width: auto; padding: .2rem .6rem; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: #fff; color: var(--texto-suave); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.ag-copiar:hover { color: var(--texto); border-color: var(--texto-tenue); }
.ag-copiar.copiado { border-color: var(--ok-borde); color: var(--ok); }
.ag-acceso footer { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding: .75rem 1.1rem 1rem; background: var(--panel-suave); }
.ag-acceso footer small { color: var(--texto-tenue); font-size: .72rem; }

/* El calendario */
.ag-cal-barra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.ag-cal-barra strong { min-width: 9.5rem; text-align: center; font-size: 1rem; }
.ag-cal-leyenda { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.ag-cal-leyenda .ag-chip { padding: .15rem .55rem; font-size: .68rem; }
.ag-cal { display: grid; gap: 1px; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--borde); box-shadow: var(--sombra-tarjeta); }
.ag-cal__fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.ag-cal__dias div { padding: .5rem .6rem; background: var(--panel-suave); color: var(--texto-tenue); font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.ag-cal__dia { min-height: 7rem; padding: .35rem; background: var(--panel); display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ag-cal__dia.fuera { background: var(--panel-suave); }
.ag-cal__dia.fuera .ag-cal__num span { color: var(--gris-300); }
.ag-cal__num { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.ag-cal__num span { font-size: .78rem; font-weight: 650; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ag-cal__dia.hoy .ag-cal__num span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--marca-900); color: #fff; }
.ag-cal__mas { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--texto-tenue); text-decoration: none; font-size: 1rem; opacity: 0; transition: opacity .15s, background .15s; }
.ag-cal__dia:hover .ag-cal__mas, .ag-cal__mas:focus { opacity: 1; }
.ag-cal__mas:hover { background: var(--gris-100); color: var(--texto); }
.ag-chip {
  display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .25rem .4rem .25rem .3rem; border-radius: 8px;
  background: var(--gris-100); color: var(--texto); font-size: .72rem; line-height: 1.25; text-decoration: none;
}
.ag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-chip .ag-red { flex-basis: 18px; width: 18px; height: 18px; border-radius: 5px; font-size: 8px; }
.ag-chip:hover { filter: brightness(.97); }
.ag-chip--produccion { border-color: #5e5ce6; background: #f0f0fd; }
.ag-chip--por_aprobar { border-color: #ff9f0a; background: #fff4e0; }
.ag-chip--cambios { border-color: #ff3b30; background: #fdecea; }
.ag-chip--aprobado { border-color: #0a84ff; background: #e8f2fe; }
.ag-chip--publicado { border-color: #34c759; background: #e8f7ec; }
.ag-atrasada td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }

@media (max-width: 68rem) {
  .ag-cal__dia { min-height: 5.5rem; }
  .ag-cal-leyenda { display: none; }
}

@media (max-width: 48rem) {
  .ag-cal__fila { grid-template-columns: 1fr; }
  .ag-cal__dias { display: none; }
  .ag-cal__dia { min-height: 0; }
  .ag-cal__dia.fuera { display: none; }
  .ag-cal__dia:not(:has(.ag-chip)):not(.hoy) { display: none; }
  .ag-quien { align-items: flex-start; }
  .ag-listo__enlace { min-width: 0; }
}
.aviso-grande--peligro { border-color: var(--peligro-borde); background: var(--peligro-fondo); }
.ag-pedir[hidden], .ag-nuevo[hidden] { display: none; }
a.boton-mini { text-decoration: none; }

/* ===== Ajustes, como los del iPhone ======================================
   Las filas de la Configuracion de MANGORA y TECOMSER (icono de color, que
   es, como esta y la flecha) sobre el fondo y el ancho de cualquier otro
   modulo del panel. */
.aj {
  --aj-tarjeta: #ffffff;
  --aj-linea: rgba(60, 60, 67, .14);
  --aj-texto: #1c1c1e;
  --aj-suave: #6e6e73;
  --aj-flecha: #c4c4c7;

  color: var(--aj-texto);
}
.aj-buscar { position: relative; display: block; width: 320px; max-width: 100%; }
.aj-buscar svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: #8e8e93; stroke-width: 2; stroke-linecap: round; }
.aj-buscar input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; border: 0; border-radius: 10px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--borde); font-size: 15px; color: var(--texto); outline: none;
}
.aj-buscar input:focus { box-shadow: inset 0 0 0 1px var(--borde-fuerte), 0 0 0 3px rgba(10, 132, 255, .25); }

.aj-cuenta {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 28px;
  background: var(--aj-tarjeta); border-radius: var(--radio-tarjeta); text-decoration: none; color: inherit;
  box-shadow: var(--sombra-tarjeta); transition: background .15s;
}
.aj-cuenta:hover { background: #fafafa; text-decoration: none; }
.aj-cuenta[hidden] { display: none; }
.aj-logo {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #000; color: #fff; font-size: 22px; font-weight: 700;
}
.aj-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.aj-cuenta-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-cuenta-texto strong { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.aj-cuenta-texto small { font-size: 13px; color: var(--aj-suave); }

.aj-grupos { columns: 2 440px; column-gap: 28px; }
.aj-grupo { break-inside: avoid; margin: 0 0 26px; }
.aj-grupo[hidden] { display: none; }
.aj-grupo h2 {
  margin: 0 0 7px 16px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; color: var(--aj-suave);
}
.aj-lista { background: var(--aj-tarjeta); border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: var(--sombra-tarjeta); }
.aj-fila {
  position: relative; display: flex; align-items: center; gap: 13px;
  min-height: 56px; padding: 9px 14px; text-decoration: none; color: inherit; transition: background .12s;
}
.aj-fila:hover { background: #f5f5f7; text-decoration: none; }
.aj-fila:active { background: #e9e9ee; }
.aj-fila[hidden] { display: none; }
/* La linea entre filas empieza despues del icono, como en iOS. */
.aj-fila + .aj-fila::before {
  content: ""; position: absolute; top: 0; right: 0; left: 57px; height: 1px;
  background: var(--aj-linea); transform: scaleY(.6);
}
.aj-icono { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.aj-icono svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aj-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.aj-texto strong { font-size: 15px; font-weight: 500; line-height: 1.3; }
.aj-texto small { font-size: 12.5px; color: var(--aj-suave); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-valor { flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--aj-suave); white-space: nowrap; }
.aj-valor--aviso { color: #c93400; }
.aj-flecha { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--aj-flecha); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aj-nada { text-align: center; color: var(--aj-suave); padding: 30px 0; font-size: 15px; }

/* Una seccion abierta: «‹ Ajustes» para volver a la portada. */
.aj-volver-barra { display: flex; align-items: center; margin: 0 0 14px; }
.aj-volver {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 4px; border-radius: 10px;
  color: #0a84ff; font-size: 16px; font-weight: 500; text-decoration: none;
}
.aj-volver:hover { background: rgba(10, 132, 255, .08); text-decoration: none; }
.aj-volver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aj-seccion { max-width: 760px; }
.aj-seccion .panel { display: grid; gap: .9rem; margin-bottom: 1rem; }

@media (max-width: 640px) {
  .aj-buscar { width: 100%; }
  .aj-texto small { white-space: normal; }
}

/* ===== Verificacion en dos pasos ==========================================
   El QR con su clave al lado, los pasos numerados y los codigos de
   respaldo en una rejilla que se copia de un vistazo. */
.acceso__codigo { font-size: 1.25rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }

.dos-pasos-pasos { margin: .75rem 0; padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--texto-suave); font-size: .9rem; }

.dos-pasos-qr { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.dos-pasos-qr__imagen {
  width: 176px; height: 176px; flex: 0 0 auto; padding: 6px; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--radio-campo);
}
.dos-pasos-qr__imagen svg { display: block; width: 100%; height: 100%; }
.dos-pasos-qr__clave {
  display: block; margin-top: .3rem; font-size: 1rem; letter-spacing: .08em; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dos-pasos-activar { align-items: end; }
.dos-pasos-acciones { display: grid; gap: 1rem; margin-top: .75rem; }

.dos-pasos-respaldos {
  margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radio-tarjeta);
  background: var(--ok-fondo); border: 1px solid var(--ok-borde);
}
.dos-pasos-respaldos p { margin: .3rem 0 .75rem; font-size: .9rem; }
.dos-pasos-respaldos__lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem .9rem;
  margin: 0 0 .9rem; padding-left: 1.4rem;
}
.dos-pasos-respaldos__lista code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .04em; }

/* Las vistas del modulo van arriba y en primer plano; el estado, debajo,
   afina dentro de la vista. */
.filtros--vistas { margin-bottom: .5rem; }
.filtros--vistas + .filtros .filtro { font-size: .78rem; padding-top: .2rem; padding-bottom: .2rem; }

/* ===== Notificaciones =====================================================
   Lo que pasa al guardar sale abajo a la derecha, flotando sobre la
   pantalla, y no empuja el contenido: tarjeta blanca, icono de color en un
   circulo y una X. La de exito se va sola; la de error se queda hasta
   cerrarla, para que se pueda leer con calma. */
.notas {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.nota {
  pointer-events: auto; width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 16px; border-radius: 14px;
  background: #fff; color: var(--texto);
  border: 1px solid rgba(9, 9, 11, .08);
  box-shadow: 0 1px 2px rgba(9, 9, 11, .06), 0 12px 32px rgba(9, 9, 11, .14);
  font-size: .9rem; line-height: 1.4;
  animation: nota-entra .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.nota[data-saliendo] { animation: nota-sale .22s ease-in both; }
.nota__icono {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.nota__icono svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nota--ok .nota__icono { background: #12b76a; }
.nota--error .nota__icono { background: #f04438; }
.nota__texto { flex: 1; min-width: 0; padding-top: 3px; }
.nota__texto strong { display: block; font-weight: 600; margin-bottom: 1px; }
.nota__texto span { color: var(--texto-suave); }
.nota__cerrar {
  flex: 0 0 auto; width: 26px; height: 26px; margin: -2px -4px 0 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto-tenue); cursor: pointer;
}
.nota__cerrar:hover { background: var(--gris-100); color: var(--texto); }
.nota__cerrar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* La barrita de abajo dice cuanto le queda a la de exito. */
.nota--ok { position: relative; overflow: hidden; }
.nota--ok::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: #12b76a; opacity: .5; transform-origin: left;
  animation: nota-tiempo 5s linear forwards;
}
.nota--ok:hover::after { animation-play-state: paused; }

@keyframes nota-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nota-sale { to { opacity: 0; transform: translateX(24px); } }
@keyframes nota-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .notas { right: 16px; left: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nota, .nota[data-saliendo] { animation: none; }
}

/* ===== La firma de MANGORA ================================================
   Al pie de la barra: el logotipo en blanco tenue, la linea del producto y
   la edicion en una pastilla. Al pie de cada pantalla: "Desarrollado por"
   y el logotipo en gris, que se enciende al pasar el raton. */
.logo-mangora { display: block; height: auto; }

.menu__firma {
  display: grid; justify-items: center; gap: .45rem;
  padding: .85rem .5rem .2rem; text-decoration: none;
  color: rgba(var(--menu-tinta), .78); transition: color .2s;
}
.menu__firma:hover { color: rgb(var(--menu-tinta)); text-decoration: none; }
.menu__firma .logo-mangora { width: 118px; }
.menu__producto {
  display: flex; align-items: center; gap: .45rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--menu-tinta), .5);
}
.menu__edicion {
  padding: .12rem .45rem; border-radius: 999px; letter-spacing: .08em;
  color: rgb(var(--menu-tinta)); background: rgba(var(--menu-tinta), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--menu-tinta), .14);
}
/* Plegada, en la barra no cabe la firma: queda la del pie de la pantalla. */
.menu--plegado .menu__firma { display: none; }

/* El pie va abajo del todo aunque la pantalla tenga poco contenido. */
main.contenido { flex: 1 0 auto; display: flex; flex-direction: column; }
main.contenido > .contenido__caja { flex: 1 0 auto; width: 100%; }

.pie-panel {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 3rem; padding: 1.25rem 0 .25rem;
  border-top: 1px solid var(--borde);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.pie-panel a { display: inline-flex; color: var(--gris-500); transition: color .2s, transform .2s; }
.pie-panel a:hover { color: var(--marca-900); transform: translateY(-1px); }
.pie-panel .logo-mangora { width: 104px; }

@media print { .pie-panel { display: none; } }

/* ===== Apariencia =========================================================
   Lo que se elige en Ajustes > Apariencia llega como variables (ver
   internal/ajustes/apariencia.go). Sin ellas, cada regla cae en lo de
   siempre. */
body.admin {
  font-family: var(--fuente, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: calc(14.5px * var(--escala, 1));
}
html:not(.acceso-html) { font-size: calc(16px * var(--escala, 1)); }
.menu__buscador { display: var(--buscador-menu, block); }

/* --- La pantalla de Apariencia --------------------------------------------- */
.apa__columnas { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.apa__controles { display: grid; gap: 1.25rem; }
.apa__bloque {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta); padding: 1.25rem 1.35rem; display: grid; gap: 1.1rem;
}
.apa__bloque header h2 { margin: 0; font-size: 1rem; }
.apa__bloque header p { margin: .2rem 0 0; color: var(--texto-suave); font-size: .85rem; }

.apa__color {
  display: grid; grid-template-columns: minmax(10rem, 1fr) auto auto; align-items: center; gap: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--borde);
}
.apa__bloque header + .apa__color { border-top: 0; padding-top: 0; }
.apa__color-nombre { display: grid; }
.apa__color-nombre small { color: var(--texto-tenue); font-size: .8rem; }
.apa__muestras { display: flex; gap: .4rem; flex-wrap: wrap; }
.apa__muestra {
  width: 1.65rem; height: 1.65rem; padding: 0; border-radius: 50%;
  background: var(--c); border: 1px solid rgba(9, 9, 11, .15);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .0); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.apa__muestra:hover { background: var(--c); transform: scale(1.1); }
.apa__muestra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--texto); }
.apa__propio { display: flex; align-items: center; gap: .4rem; }
.apa__propio input[type="color"] {
  width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-campo); background: none; cursor: pointer;
}
.apa__propio input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.apa__propio input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radio-campo) - 3px); }
.apa__propio input[type="text"] {
  width: 6.2rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; text-transform: lowercase;
}
.apa__hex--malo { border-color: var(--peligro) !important; }

.apa__campo { display: grid; gap: .5rem; }
.apa__etiqueta { font-size: .85rem; font-weight: 600; }

.apa__fuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.apa__fuente input, .apa__segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.apa__fuente span {
  display: grid; gap: .1rem; padding: .7rem .8rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-campo); background: var(--panel);
  transition: border-color .12s, box-shadow .12s;
}
.apa__fuente b { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.apa__fuente small { color: var(--texto-suave); font-size: .78rem; }
.apa__fuente span:hover { border-color: var(--borde-fuerte); }
.apa__fuente input:checked + span { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.apa__fuente input:focus-visible + span, .apa__segmentos input:focus-visible + span { box-shadow: var(--anillo); }

.apa__segmentos {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; width: fit-content; max-width: 100%;
  background: var(--gris-100); border: 1px solid var(--borde); border-radius: calc(var(--radio-campo) + 3px);
}
.apa__segmentos label { display: block; }
.apa__segmentos span {
  display: block; padding: .4rem .9rem; border-radius: var(--radio-campo); cursor: pointer;
  font-size: .85rem; font-weight: 500; color: var(--texto-suave); transition: background .12s, color .12s;
}
.apa__segmentos span:hover { color: var(--texto); }
.apa__segmentos input:checked + span { background: var(--panel); color: var(--texto); box-shadow: 0 1px 2px rgba(9, 9, 11, .12); }

.apa__muestra-panel { position: sticky; top: calc(var(--barra-alto, 72px) + 1rem); display: grid; gap: .6rem; }
.apa__previa {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta); padding: 1.15rem; display: grid; gap: .75rem;
}
.apa__previa-rotulo { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); }
.apa__previa h3 { margin: 0; font-size: 1.05rem; }
.apa__previa p { margin: 0; color: var(--texto-suave); font-size: .85rem; }
.apa__previa .filtros { margin: 0; }
.apa__previa .campo { display: grid; gap: .3rem; font-size: .85rem; }
.apa__previa-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.apa__previa-botones .boton { cursor: default; }

.apa__barra {
  position: sticky; bottom: 1rem; z-index: 20; margin-top: 1.25rem;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .8rem .7rem 1rem; border-radius: var(--radio-tarjeta);
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
}
.apa__estado { flex: 1; text-align: right; color: var(--texto-tenue); font-size: .85rem; }
.apa--cambiado .apa__estado { color: var(--texto); font-weight: 500; }

@media (max-width: 1100px) {
  .apa__columnas { grid-template-columns: 1fr; }
  .apa__muestra-panel { position: static; }
}
@media (max-width: 640px) {
  .apa__color { grid-template-columns: 1fr; gap: .6rem; }
  .apa__barra { flex-wrap: wrap; }
  .apa__estado { flex-basis: 100%; text-align: left; order: -1; }
}

/* ===== Finanzas =============================================================
   El dinero de la marca: verde lo que entra, rojo apagado lo que sale, y
   todo lo demas en los grises del panel. Los numeros van en cifras de
   ancho fijo para que las columnas se lean de un vistazo. */
.fin-rotulo { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); }
.fin-monto, .fin-caja__monto, .fin-totales strong, .fin-tabla td, .kpi__dato, .fin-tarjeta-cuenta__saldo, .fin-fijos dd { font-variant-numeric: tabular-nums; }
.fin-monto--entra { color: #067647; }
.fin-monto--sale { color: #b42318; }
.fin-negativo { color: #b42318; }
.fin-sub { display: block; font-size: .75rem; color: var(--texto-tenue); font-weight: 400; }
.fin-derecha { text-align: right; }
.fin-punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; background: var(--gris-400); }
.fin-punto--entra { background: #12b76a; }
.fin-punto--sale { background: #f97066; }

/* El dinero disponible: la cifra grande y una tarjetita por cuenta. */
.fin-caja {
  display: grid; grid-template-columns: minmax(14rem, auto) 1fr; gap: 1.5rem; align-items: center;
  padding: 1.35rem 1.5rem; margin-bottom: 1.25rem;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
}
.fin-caja--simple { grid-template-columns: 1fr; }
.fin-caja__total { display: grid; gap: .2rem; }
.fin-caja__monto { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.fin-caja__nota { font-size: .8rem; color: var(--texto-suave); }
.fin-caja__cuentas { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.fin-cuenta {
  display: grid; gap: .1rem; min-width: 9.5rem; padding: .7rem .85rem; border-radius: var(--radio-campo);
  background: var(--panel-suave); border: 1px solid var(--borde); color: var(--texto); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.fin-cuenta:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); text-decoration: none; }
.fin-cuenta__nombre { font-size: .75rem; color: var(--texto-suave); }
.fin-cuenta strong { font-size: 1rem; }
.fin-cuenta small { font-size: .72rem; color: var(--texto-tenue); }
.fin-cuenta--vacia { color: var(--texto-suave); font-size: .85rem; }

.fin-periodo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fin-periodo .filtros { margin-bottom: .5rem; }
.fin-rango { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--texto-suave); margin-bottom: .5rem; }
.fin-rango input { width: auto; padding: .35rem .5rem; }

.fin-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fin-ancho { grid-column: 1 / -1; }

/* El grafico: dos barras por tramo, lo que entro y lo que salio. */
.fin-leyenda { display: flex; gap: 1rem; font-size: .8rem; color: var(--texto-suave); }
.fin-grafico {
  display: flex; align-items: stretch; gap: 4px; height: 15rem; padding-top: .5rem;
  border-bottom: 1px solid var(--borde); overflow-x: auto;
}
.fin-grafico__col { flex: 1 0 1.4rem; display: grid; grid-template-rows: 1fr auto; gap: .35rem; min-width: 1.4rem; }
.fin-grafico__barras { display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-radius: 6px; transition: background .15s; }
.fin-grafico__col:hover .fin-grafico__barras { background: var(--gris-100); }
.fin-grafico__barra { flex: 0 1 .7rem; min-height: 0; border-radius: 4px 4px 1px 1px; }
.fin-grafico__barra--entra { background: linear-gradient(180deg, #32d583, #12b76a); }
.fin-grafico__barra--sale { background: linear-gradient(180deg, #fda29b, #f97066); }
.fin-grafico__etiqueta { font-size: .68rem; color: var(--texto-tenue); text-align: center; white-space: nowrap; padding-bottom: .3rem; }
.fin-grafico--mes .fin-grafico__barra, .fin-grafico--año .fin-grafico__barra { flex-basis: 1.1rem; }

/* De donde viene y en que se va: barras finas del color de la categoria. */
.fin-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fin-partes__fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin-bottom: .3rem; }
.fin-partes__fila strong { font-variant-numeric: tabular-nums; }
.fin-partes__barra { height: 6px; border-radius: 3px; background: var(--gris-100); overflow: hidden; }
.fin-partes__barra span { display: block; height: 100%; border-radius: 3px; background: var(--acento); min-width: 2px; }

.fin-consejos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fin-consejo { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .8rem .9rem; border-radius: var(--radio-campo); background: var(--panel-suave); }
.fin-consejo__marca { width: .6rem; height: .6rem; margin-top: .4rem; border-radius: 50%; }
.fin-consejo--bien .fin-consejo__marca { background: #12b76a; }
.fin-consejo--ojo .fin-consejo__marca { background: #f79009; }
.fin-consejo--alerta { background: #fef3f2; }
.fin-consejo--alerta .fin-consejo__marca { background: #f04438; }
.fin-consejo strong { font-size: .9rem; }
.fin-consejo p { margin: .15rem 0 .25rem; font-size: .84rem; color: var(--texto-suave); }

.fin-lista { list-style: none; margin: 0; padding: 0; }
.fin-lista li + li { border-top: 1px solid var(--borde); }
.fin-lista a { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; color: var(--texto); text-decoration: none; }
.fin-lista a:hover { text-decoration: none; }
.fin-lista a:hover strong { text-decoration: underline; }
.fin-lista__texto { flex: 1; min-width: 0; display: grid; }
.fin-lista__texto strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-lista__texto small { font-size: .76rem; color: var(--texto-tenue); }
.fin-fecha {
  flex: 0 0 auto; padding: .2rem .5rem; border-radius: 6px; background: var(--gris-100);
  font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--texto-suave);
}
.fin-fecha--vencida { background: #fef3f2; color: #b42318; }

.fin-fijos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.fin-fijos div { padding: .75rem .85rem; border-radius: var(--radio-campo); background: var(--panel-suave); }
.fin-fijos dt { font-size: .75rem; color: var(--texto-tenue); }
.fin-fijos dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 700; }

/* El libro. */
.fin-filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
  padding: .75rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
}
.fin-filtros select, .fin-filtros input[type="date"] { width: auto; padding: .4rem .55rem; font-size: .85rem; }
.fin-filtros__buscar { position: relative; flex: 1 1 14rem; }
.fin-filtros__buscar svg { position: absolute; left: .65rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); fill: none; stroke: var(--texto-tenue); stroke-width: 2; stroke-linecap: round; }
.fin-filtros__buscar input { width: 100%; padding: .45rem .6rem .45rem 2rem; font-size: .85rem; }

.fin-totales { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: baseline; margin-bottom: 1rem; }
.fin-totales div { display: grid; }
.fin-totales span { font-size: .72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .08em; }
.fin-totales strong { font-size: 1.25rem; }
.fin-totales p { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--texto-tenue); }

.fin-tabla td { vertical-align: middle; }
.fin-detalle { display: grid; gap: .1rem; color: var(--texto); text-decoration: none; }
a.fin-detalle:hover strong { text-decoration: underline; }
.fin-detalle small { font-size: .76rem; color: var(--texto-tenue); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fin-origen { padding: .05rem .4rem; border-radius: 999px; background: var(--gris-100); color: var(--texto-suave); font-size: .7rem; font-weight: 600; }
.fin-origen--pendiente { background: #fffaeb; color: #b54708; }
.fin-origen--entra { background: #ecfdf3; color: #067647; }
.fin-origen--sale { background: #fef3f2; color: #b42318; }
.fin-categoria { white-space: nowrap; font-size: .85rem; }
.fin-fila--pendiente td { background: #fffcf5; }
.fin-fila--vencida td { background: #fff8f7; }
.fin-fila--apagada { opacity: .55; }

/* Las cuentas, como tarjetas. */
.fin-cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.fin-tarjeta-cuenta {
  display: grid; gap: .3rem; padding: 1.1rem 1.2rem; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
}
.fin-tarjeta-cuenta--apagada { opacity: .55; }
.fin-tarjeta-cuenta header { display: flex; justify-content: space-between; align-items: center; }
.fin-tarjeta-cuenta__tipo { font-size: .72rem; color: var(--texto-tenue); }
.fin-moneda { padding: .1rem .45rem; border-radius: 6px; background: var(--gris-100); font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.fin-tarjeta-cuenta h3 { margin: .2rem 0 0; font-size: 1rem; }
.fin-tarjeta-cuenta__saldo { font-size: 1.5rem; letter-spacing: -.01em; }
.fin-medios { margin: .2rem 0 0; font-size: .76rem; color: var(--texto-suave); }
.fin-tarjeta-cuenta footer { display: flex; gap: 1rem; margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--borde); }

/* Los formularios en ventana. */
.fin-form { display: grid; gap: 1rem; }
.fin-tipo { width: 100%; }
.fin-tipo label { flex: 1; }
.fin-tipo span { text-align: center; }
.fin-monto-campo { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .75rem; align-items: end; }
.fin-monto-campo__monto input { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-conversion {
  margin: -.25rem 0 0; padding: .6rem .8rem; border-radius: var(--radio-campo);
  background: #eff8ff; color: #175cd3; font-size: .85rem;
}
.fin-conversion strong { font-size: .95rem; }
.fin-pendiente { display: grid; gap: .75rem; padding: .85rem .95rem; border-radius: var(--radio-campo); background: var(--panel-suave); border: 1px solid var(--borde); }
.fin-interruptor { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.fin-interruptor input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--acento); }
.fin-interruptor span { display: grid; }
.fin-interruptor strong { font-size: .9rem; }
.fin-interruptor small { font-size: .78rem; color: var(--texto-suave); }
.fin-form__pie { display: flex; justify-content: flex-end; gap: .6rem; padding-top: .5rem; border-top: 1px solid var(--borde); }
.fin-medios-campo { border: 1px solid var(--borde); border-radius: var(--radio-campo); padding: .8rem .95rem; margin: 0; }
.fin-medios-campo legend { padding: 0 .3rem; font-size: .85rem; font-weight: 600; }
.fin-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.fin-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fin-chip span {
  display: inline-block; padding: .3rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde-fuerte); font-size: .82rem; transition: background .12s, color .12s;
}
.fin-chip input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }
.fin-chip input:focus-visible + span { box-shadow: var(--anillo); }

/* La ficha de un movimiento. */
.fin-ficha { display: grid; gap: 1.1rem; }
.fin-ficha__monto { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: var(--radio-tarjeta); background: var(--panel-suave); }
.fin-ficha__monto strong { font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fin-ficha__monto small { color: var(--texto-suave); }
.fin-datos { margin: 0; display: grid; gap: .1rem; }
.fin-datos div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.fin-datos dt { font-size: .82rem; color: var(--texto-tenue); }
.fin-datos dd { margin: 0; font-size: .9rem; }
.fin-pagar { display: grid; gap: .8rem; padding: 1rem 1.1rem; border-radius: var(--radio-tarjeta); border: 1px solid #abefc6; background: #f6fef9; }
.fin-pagar h3 { margin: 0; font-size: 1rem; }
.fin-pagar button { justify-self: start; }
.fin-anular summary { cursor: pointer; font-size: .85rem; color: var(--texto-tenue); }
.fin-anular form { display: grid; gap: .6rem; margin-top: .6rem; }
.fin-anular button { justify-self: start; }

/* Las categorias, editables en su linea. */
.fin-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.fin-cat-lista { list-style: none; margin: 0 0 .75rem; padding: 0; }
.fin-cat-lista li + li { border-top: 1px solid var(--borde); }
.fin-cat { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; }
.fin-cat__color { width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: 0 0 auto; }
.fin-cat__color::-webkit-color-swatch-wrapper { padding: 2px; }
.fin-cat__color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.fin-cat__nombre { flex: 1; min-width: 0; padding: .35rem .5rem; font-size: .88rem; }
.fin-cat__activa { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }
.fin-cat .fin-sub { display: inline; white-space: nowrap; }
.fin-cat--nueva { padding-top: .75rem; border-top: 1px dashed var(--borde-fuerte); }

a.kpi { color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
a.kpi:hover { transform: translateY(-1px); border-color: var(--borde-fuerte); text-decoration: none; }

@media (max-width: 1000px) {
  .fin-caja { grid-template-columns: 1fr; }
  .fin-caja__cuentas { justify-content: flex-start; }
  .fin-rejilla, .fin-categorias { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fin-monto-campo { grid-template-columns: 1fr 1fr; }
  .fin-monto-campo__monto { grid-column: 1 / -1; }
  .fin-datos div { grid-template-columns: 1fr; gap: .1rem; }
  .fin-cat { flex-wrap: wrap; }
  .fin-grafico { height: 11rem; }
}

/* Lo que se esconde con el atributo hidden se esconde de verdad, aunque su
   clase le de display: grid o flex (los campos de Finanzas y Apariencia
   aparecen y desaparecen segun lo elegido). */
.fin-form [hidden], .fin-ficha [hidden], .fin-conversion[hidden] { display: none !important; }

/* El celular: la bandera y el +51 delante, fino, y los digitos separados. */
.campo-celular .campo-prefijo__texto { gap: .4rem; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.campo-celular__bandera { width: 1.05rem; height: .7rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(9, 9, 11, .12); }
.campo-celular input { letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* Facturacion: el aviso de que se conecta desde MANGORA. */
.fact-mangora { display: grid; gap: .6rem; padding: 1rem 1.1rem; border-radius: var(--radio-campo); background: var(--panel-suave); border: 1px dashed var(--borde-fuerte); }
.fact-mangora p { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.fact-mangora .boton { justify-self: start; }
.fact-mangora__comando {
  margin: 0; padding: .7rem .9rem; border-radius: var(--radio-campo); background: #0a0a0a; color: #e4e4e7;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; overflow-x: auto; user-select: all;
}


/* ===== Plantillas de la boleta y la factura ================================
   Compacta, como un editor: los controles en una columna a la izquierda y
   la hoja grande a la derecha, en su proporcion de papel y con su sombra. */
.pla { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.pla__panel {
  position: sticky; top: 1rem; display: grid; gap: 0; max-height: calc(100vh - 7rem); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
}
.pla__grupo { padding: .9rem 1rem; border-bottom: 1px solid var(--borde); display: grid; gap: .55rem; }
.pla__titulo { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.pla__ayuda { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--texto-suave); }
.pla__ayuda a { color: var(--texto); }
.pla__ancho { width: 100%; }
.pla__ancho label { flex: 1; }
.pla__ancho span { text-align: center; padding-left: .4rem; padding-right: .4rem; }
.pla__grupo input[type="text"] { width: 100%; }

.pla__modelos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.pla__modelo { position: relative; display: grid; gap: .35rem; padding: .4rem; cursor: pointer; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--radio-campo); transition: border-color .15s, box-shadow .15s; }
.pla__modelo:hover { border-color: var(--borde-fuerte); }
.pla__modelo input { position: absolute; opacity: 0; pointer-events: none; }
.pla__modelo:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.pla__modelo:has(input:focus-visible) { box-shadow: var(--anillo); }
.pla__modelo strong { font-size: .76rem; }

.pla__miniatura { position: relative; display: block; height: 3.4rem; border-radius: 4px; background: #fff; border: 1px solid var(--borde); overflow: hidden; }
.pla__miniatura i { position: absolute; display: block; border-radius: 1px; background: #d4d4d8; }
.pla__miniatura i:nth-child(1) { left: 8%; top: 10%; width: 32%; height: 13%; }
.pla__miniatura i:nth-child(2) { right: 8%; top: 8%; width: 32%; height: 22%; background: none; border: 1.5px solid #a1a1aa; }
.pla__miniatura i:nth-child(3) { left: 8%; right: 8%; top: 42%; height: 9%; background: #071457; }
.pla__miniatura i:nth-child(4) { left: 8%; right: 8%; top: 56%; height: 32%; background: repeating-linear-gradient(180deg, #e4e4e7 0 1.5px, transparent 1.5px 5px); }
.pla__miniatura--MODERNO i:nth-child(1) { left: 0; right: 0; top: 0; width: auto; height: 25%; border-radius: 0; background: #eef2f7; }
.pla__miniatura--MODERNO i:nth-child(2) { top: 25%; right: 0; left: 0; width: auto; height: 3%; border: 0; border-radius: 0; background: #ef5a24; }
.pla__miniatura--MAYORISTA i:nth-child(3) { height: 6%; background: #3f3f46; }
.pla__miniatura--MAYORISTA i:nth-child(4) { top: 50%; height: 42%; background: repeating-linear-gradient(180deg, #e4e4e7 0 1px, transparent 1px 3px); }

.pla__color { display: grid; gap: .4rem; }
.pla__color + .pla__color { margin-top: .35rem; }
.pla__color-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pla__color-cabeza span { display: grid; }
.pla__color-cabeza strong { font-size: .84rem; }
.pla__color-cabeza small { font-size: .72rem; color: var(--texto-tenue); }
.pla__color-cabeza input[type="color"] { width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.pla__color-cabeza input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.pla__color-cabeza input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.pla__muestras { display: flex; flex-wrap: wrap; gap: .3rem; }
.pla__muestras .apa__muestra { width: 1.4rem; height: 1.4rem; }

.pla__interruptores { display: grid; gap: .1rem; }
.pla__si { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; cursor: pointer; font-size: .86rem; }
.pla__si input { position: absolute; opacity: 0; pointer-events: none; }
.pla__si i { flex: 0 0 auto; position: relative; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--gris-300); transition: background .15s; }
.pla__si i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(9, 9, 11, .25); transition: transform .15s; }
.pla__si input:checked + i { background: var(--acento); }
.pla__si input:checked + i::after { transform: translateX(.9rem); }
.pla__si input:focus-visible + i { box-shadow: var(--anillo); }
.pla__si input:disabled + i { opacity: .5; }

.pla__datos dl { margin: 0; display: grid; gap: .2rem; }
.pla__datos dl div { display: flex; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.pla__datos dt { color: var(--texto-tenue); }
.pla__datos dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }

.pla__guardar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; background: var(--panel); border-top: 1px solid var(--borde); }
.pla__estado { font-size: .78rem; color: var(--texto-tenue); }
.pla__estado--cambiado { color: #b54708; font-weight: 600; }

.pla__vista { display: grid; justify-items: center; gap: .6rem; min-width: 0; padding: 1.25rem; border-radius: var(--radio-tarjeta); background: #e4e4e7; }
.pla__papel { position: relative; width: min(100%, 46rem); background: #fff; box-shadow: 0 1px 3px rgba(9, 9, 11, .12), 0 20px 44px rgba(9, 9, 11, .16); }
.pla__papel--A5 { width: min(100%, 34rem); }
.pla__papel--80 { width: min(100%, 20rem); }
.pla__papel img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.pla__papel iframe { display: block; width: 100%; aspect-ratio: 210 / 297; border: 0; }
.pla__papel--80 iframe { aspect-ratio: 80 / 220; }
.pla__papel--cargando img { opacity: .35; }
.pla__cargando { position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%;
  border: 3px solid var(--gris-300); border-top-color: var(--acento); opacity: 0; animation: pla-girar .8s linear infinite; pointer-events: none; }
.pla__papel--cargando .pla__cargando { opacity: 1; }
@keyframes pla-girar { to { transform: rotate(360deg); } }

.pla-falta { margin-bottom: 1rem; padding: .7rem 1rem; border-radius: var(--radio-campo); background: #fffaeb; border: 1px solid #fedf89; color: #93370d; font-size: .86rem; }
.pla-falta a { color: #93370d; font-weight: 600; }

@media (max-width: 1050px) {
  .pla { grid-template-columns: 1fr; }
  .pla__panel { position: static; max-height: none; }
}

/* ===== Ventanas, mas pulidas ===============================================
   Para todas: sin scroll de costado, cabecera con aire y el titulo firme,
   y las dos columnas de campos hasta el celular (antes se apilaban a los
   640 px, que es justo lo que mide una ventana de formulario). */
body.admin--ventana { overflow-x: hidden; }
.ventana-pagina__cabecera { padding: 16px 22px; box-shadow: 0 1px 0 var(--borde), 0 6px 16px -12px rgba(9, 9, 11, .18); border-bottom: 0; }
.ventana-pagina__cabecera h1 { font-size: 1.18rem; letter-spacing: -.015em; }
.ventana-pagina__cabecera p { margin-top: .2rem; font-size: .82rem; line-height: 1.4; color: var(--texto-suave); max-width: 40rem; }
.ventana-pagina__cuerpo { padding: 18px 22px 0; }
.ventana-pagina__cerrar { border-radius: 50%; }

/* ===== El formulario de un movimiento ======================================
   Primero que paso y cuanto, grande; luego de donde y en que, en dos
   columnas; al final lo pendiente. El color sigue al tipo: verde si entra,
   rojo si sale, azul si se mueve. */
.fm { --fm-color: #067647; --fm-suave: #ecfdf3; display: grid; gap: 16px; }
.fm[data-tipo="egreso"] { --fm-color: #b42318; --fm-suave: #fef3f2; }
.fm[data-tipo="transferencia"] { --fm-color: #175cd3; --fm-suave: #eff8ff; }

.fm-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fm-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.fm-tipo span {
  display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .5rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-campo); background: var(--panel);
  font-weight: 600; font-size: .88rem; color: var(--texto-suave); transition: all .15s;
}
.fm-tipo svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fm-tipo span:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.fm-tipo--entra input:checked + span { background: #ecfdf3; border-color: #12b76a; color: #067647; box-shadow: 0 0 0 1px #12b76a; }
.fm-tipo--sale input:checked + span { background: #fef3f2; border-color: #f04438; color: #b42318; box-shadow: 0 0 0 1px #f04438; }
.fm-tipo--mueve input:checked + span { background: #eff8ff; border-color: #2e90fa; color: #175cd3; box-shadow: 0 0 0 1px #2e90fa; }
.fm-tipo input:focus-visible + span { box-shadow: var(--anillo); }

.fm-monto {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
  border-radius: var(--radio-tarjeta); background: var(--fm-suave); border: 1px solid transparent; transition: background .15s;
}
.fm-monto__campo { flex: 1 1 14rem; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.fm-monto__simbolo { font-size: 1.5rem; font-weight: 700; color: var(--fm-color); }
.fm-monto__campo input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none !important;
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; outline: none;
}
.fm-monto__campo input::placeholder { color: color-mix(in srgb, var(--fm-color) 35%, transparent); }
.fm-monedas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--borde); }
.fm-monedas input { position: absolute; opacity: 0; pointer-events: none; }
.fm-monedas span { display: block; min-width: 2.6rem; padding: .3rem .6rem; border-radius: 999px; text-align: center; cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--texto-suave); }
.fm-monedas input:checked + span { background: var(--panel); color: var(--texto); box-shadow: 0 1px 2px rgba(9, 9, 11, .14); }
.fm-monedas input:focus-visible + span { box-shadow: var(--anillo); }
.fm-cambio { display: grid; gap: 2px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); }
.fm-cambio input { width: 6.5rem; padding: .35rem .5rem; font-variant-numeric: tabular-nums; }
.fm-conversion { margin: -8px 0 0; padding: .5rem .8rem; border-radius: var(--radio-campo); background: #eff8ff; color: #175cd3; font-size: .84rem; }

.fm-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fm-rejilla .campo--ancho { grid-column: 1 / -1; }
.fm-saldo { font-size: .76rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fm-con-atajos { display: flex; gap: 6px; align-items: center; }
.fm-con-atajos input { flex: 1; min-width: 0; }
.fm-atajo {
  flex: 0 0 auto; padding: .42rem .6rem; border-radius: var(--radio-campo); box-shadow: none;
  background: var(--panel-suave); color: var(--texto-suave); border: 1px solid var(--borde); font-size: .78rem; font-weight: 600;
}
.fm-atajo:hover { background: var(--panel); color: var(--texto); border-color: var(--borde-fuerte); }

.fm-pendiente { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radio-tarjeta); background: var(--panel); border: 1px solid var(--borde); }
.fm-pendiente__si { padding: 0; }
.fm-pendiente__si span { display: grid; gap: 1px; }
.fm-pendiente__si strong { font-size: .9rem; }
.fm-pendiente__si small { font-size: .78rem; color: var(--texto-suave); font-weight: 400; }
.fm-vence { display: grid; gap: 6px; }
.fm [hidden] { display: none !important; }

.fm-pie {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  margin: 0 -22px; padding: 12px 22px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--borde);
}
.fm-pie__ayuda { flex: 1; font-size: .74rem; color: var(--texto-tenue); }
.fm-pie__ayuda kbd { padding: .05rem .35rem; border-radius: 4px; border: 1px solid var(--borde-fuerte); background: var(--panel-suave); font-family: inherit; font-size: .7rem; }
.fm-pie button[type="submit"] { background: var(--fm-color, var(--acento)); color: var(--acento-texto, #fff); min-width: 9rem; }
.fm-pie button[type="submit"]:hover { filter: brightness(.92); background: var(--fm-color, var(--acento)); }

@media (max-width: 34rem) {
  .fm-rejilla { grid-template-columns: minmax(0, 1fr); }
  .fm-tipo span { font-size: .78rem; padding: .55rem .3rem; }
  .fm-monto__campo input { font-size: 1.7rem; }
  .fm-pie__ayuda { display: none; }
}

/* Los demas formularios de Finanzas en ventana: el pie fijo abajo, como el
   del movimiento, para no tener que bajar a buscar Guardar. */
.admin--ventana .fin-form__pie {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -22px; padding: 12px 22px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
}

/* ===== Mi empresa ===========================================================
   Tres tarjetas: SUNAT, RENIEC y contacto. El RUC y el DNI con su boton de
   buscar al lado; los sellos ACTIVO / HABIDO en verde si estan bien. */
.aj-sello { display: inline-block; margin-left: .3rem; padding: .02rem .4rem; border-radius: 999px; background: #fef3f2; color: #b42318; font-size: .66rem; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
.aj-sello--bien { background: #ecfdf3; color: #067647; }
.aj-cuenta-falta { color: #b54708 !important; font-weight: 600; }

/* El pie y su boton toman el color del formulario de movimientos
   (--fm-color); aqui es el del acento del panel. Sin esto el boton salia
   sin fondo: blanco sobre blanco. */
.emp { --fm-color: var(--acento); display: grid; gap: 14px; max-width: 52rem; }
.emp__tarjeta { display: grid; gap: 14px; padding: 18px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.emp__cabeza { display: flex; align-items: center; gap: 12px; }
.emp__cabeza h2 { margin: 0; font-size: 1rem; }
.emp__cabeza p { margin: .1rem 0 0; font-size: .8rem; color: var(--texto-suave); }
.emp__cabeza > div { flex: 1; }
.emp__icono { flex: 0 0 auto; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; color: #fff; font-weight: 800; font-size: .95rem; }
.emp__icono--sunat { background: linear-gradient(135deg, #e11d48, #1d4ed8); }
.emp__icono--reniec { background: #0f766e; }
.emp__icono--contacto { background: #0a0a0a; }
.emp__estado { display: flex; gap: .25rem; }
.emp__buscar { max-width: 20rem; }
.emp__buscar input { font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; }
.emp__aviso { margin: -4px 0 0; padding: .5rem .75rem; border-radius: var(--radio-campo); font-size: .84rem; }
.emp__aviso--bien { background: #ecfdf3; color: #067647; }
.emp__aviso--mal { background: #fef3f2; color: #b42318; }
.emp__nota { margin: 0; font-size: .76rem; color: var(--texto-tenue); }
.emp [hidden] { display: none !important; }
.emp__pie { margin: 0; border-radius: var(--radio-tarjeta); border: 1px solid var(--borde); }
@media (max-width: 34rem) {
  .emp__buscar { max-width: none; }
}

/* ===== Lineas de negocio en el resumen =====================================
   Una tarjeta por linea: el color en el punto y en la barra (nunca una raya
   al costado), el monto grande y si crece contra el periodo anterior. */
.lin { margin-bottom: 1.25rem; }
.lin__cabeza { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.lin__cabeza h2 { margin: 0; font-size: 1rem; }
.lin__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
.lin__tarjeta {
  display: grid; gap: .35rem; padding: .9rem 1rem; color: var(--texto); text-decoration: none;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
  transition: transform .15s, border-color .15s;
}
.lin__tarjeta:hover { transform: translateY(-1px); border-color: var(--lin); text-decoration: none; }
.lin__nombre { font-size: .8rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin__monto { font-size: 1.35rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lin__barra { height: 5px; border-radius: 3px; background: var(--gris-100); overflow: hidden; }
.lin__barra span { display: block; height: 100%; border-radius: 3px; background: var(--lin); min-width: 2px; }
.lin__pie { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--texto-tenue); }
.lin-admin { margin-bottom: 1.25rem; }
.fin-cat__linea { flex: 0 1 11rem; min-width: 0; padding: .35rem .5rem; font-size: .82rem; }

/* ===== Clientes ==============================================================
   Compacto: una fila por cliente con su avatar, su contacto y lo que hace
   contigo en etiquetas cortas. */
.cli-cifras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-bottom: 1rem; overflow: hidden;
  background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.cli-cifras div { display: grid; gap: .15rem; padding: .75rem .95rem; background: var(--panel); }
.cli-cifras span { font-size: .72rem; color: var(--texto-tenue); }
.cli-cifras strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cli-cifras--ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cli-aviso { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; margin-bottom: 1rem; padding: .7rem 1rem;
  border-radius: var(--radio-campo); background: #eff8ff; border: 1px solid #b2ddff; color: #175cd3; text-decoration: none; font-size: .88rem; }
.cli-aviso:hover { text-decoration: none; background: #e0f2fe; }
.cli-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cli-barra .filtros { margin: 0; }
.cli-buscar { position: relative; flex: 0 1 20rem; }
.cli-buscar svg { position: absolute; left: .65rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); fill: none; stroke: var(--texto-tenue); stroke-width: 2; stroke-linecap: round; }
.cli-buscar input { width: 100%; padding-left: 2rem; }
.cli-tabla td { vertical-align: middle; padding-top: .55rem; padding-bottom: .55rem; }
.cli-quien { display: flex; align-items: center; gap: .65rem; color: var(--texto); text-decoration: none; }
.cli-quien:hover strong { text-decoration: underline; }
.cli-quien__texto { display: grid; min-width: 0; }
.cli-quien__texto strong { font-size: .9rem; }
.cli-quien__texto small { font-size: .75rem; color: var(--texto-tenue); }
.cli-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--gris-100); color: var(--texto-suave); font-size: .78rem; font-weight: 700; }
.cli-avatar--empresa { border-radius: 9px; background: #eef2ff; color: #3538cd; }
.cli-avatar--grande { width: 4rem; height: 4rem; font-size: 1.3rem; }
.cli-ok { color: #067647; font-weight: 700; }
.cli-contacto { font-size: .8rem; }
.cli-contacto a { display: block; color: var(--texto-suave); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.cli-contacto a:hover { color: var(--texto); text-decoration: underline; }
.cli-wa::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; border-radius: 50%; background: #25d366; }
.cli-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cli-chip { padding: .12rem .5rem; border-radius: 999px; background: var(--gris-100); color: var(--texto-suave); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.cli-chip--agencia { background: #fdf2f8; color: #c11574; }
.cli-chip--tienda { background: #ecfdf3; color: #067647; }
.cli-ficha { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cli-ficha__quien { display: grid; justify-items: center; gap: .4rem; padding: 1.25rem; text-align: center;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.cli-ficha__quien h2 { margin: .3rem 0 0; font-size: 1.1rem; }
.cli-ficha__quien .fin-datos { width: 100%; text-align: left; margin-top: .5rem; }
.cli-ficha__quien .fin-datos div { grid-template-columns: 6.5rem 1fr; }
.cli-notas { margin: .5rem 0 0; padding: .6rem .75rem; border-radius: var(--radio-campo); background: var(--panel-suave); font-size: .82rem; text-align: left; width: 100%; }
.cli-ficha__actividad { display: grid; gap: 1rem; }
.cli-ficha__actividad .cli-cifras { margin: 0; }
@media (max-width: 1000px) {
  .cli-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-ficha { grid-template-columns: 1fr; }
}

/* --- Agencia: formularios con ayuda en vivo ------------------------------------------
   Publicacion en varias redes, contrato con su resumen, plan con su costo
   por pieza. Lo que pinta agencia.js nace con hidden: sin guion no se ve y
   el formulario sirve igual. */
form[data-agencia] [hidden], .ag-resumen[hidden] { display: none !important; }

.ag-redes, .ag-planes { border: 0; margin: 0; padding: 0; min-width: 0; }
.ag-redes legend, .ag-planes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ag-redes__lista { margin-top: 0; }
.ag-red-chip { position: relative; }
.ag-red-chip span { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .3rem; }
.ag-red--mini { flex-basis: 20px; width: 20px; height: 20px; border-radius: 6px; font-size: 8px; }
.ag-red-chip input:checked + span .ag-red--mini { background: var(--panel); color: var(--texto); }
.ag-red-chip__suya { font-style: normal; font-weight: 800; color: var(--acento); margin-left: -.15rem; }
.ag-red-chip input:checked + span .ag-red-chip__suya { color: inherit; }

.ag-atajos { display: flex; flex-wrap: wrap; gap: .3rem; }
.ag-atajos .fm-atajo { padding: .28rem .55rem; font-size: .74rem; }
.ag-atajos .fm-atajo.activo { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento); }

/* Contadores del texto, uno por red elegida. */
.ag-contadores { display: grid; gap: .45rem; }
.ag-contadores__redes { display: flex; flex-wrap: wrap; gap: .35rem; }
.ag-contador {
  display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem .18rem .2rem; border-radius: 999px;
  background: var(--panel-suave); border: 1px solid var(--borde); font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--texto-suave);
}
.ag-contador .ag-red--mini { flex-basis: 18px; width: 18px; height: 18px; }
.ag-contador--cerca { border-color: #f5c46b; color: #9a5b00; }
.ag-contador--pasa { border-color: var(--peligro-borde); background: var(--peligro-fondo); color: var(--peligro); font-weight: 650; }
.ag-contadores__nota { margin: 0; font-size: .74rem; color: var(--texto-tenue); }
.ag-contadores__nota--mal { color: var(--peligro); }
.ag-contadores__mas { margin: 0; padding: .5rem .65rem; border-radius: var(--radio-campo); background: var(--panel-suave); border: 1px solid var(--borde); font-size: .8rem; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.ag-contadores__mas small { display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 650; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.ag-contadores__mas em { font-style: normal; color: var(--texto-tenue); }

/* Arte con su vista previa al lado. */
.ag-pub__arte { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 14px; align-items: start; margin-bottom: 18px; }
.ag-pub__arte-campos { margin-top: 0; }
.ag-previa { display: grid; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: var(--sombra-tarjeta); }
.ag-previa__cabeza { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; }
.ag-previa__avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto, #fff); font-size: .68rem; font-weight: 700;
}
.ag-previa__quien { display: grid; min-width: 0; }
.ag-previa__quien strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-previa__quien small { font-size: .7rem; color: var(--texto-tenue); }
.ag-previa__arte { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--panel-suave); border-block: 1px solid var(--borde); overflow: hidden; }
.ag-previa__arte img { width: 100%; height: 100%; object-fit: cover; }
.ag-previa__arte span { font-size: .75rem; color: var(--texto-tenue); }
.ag-previa__texto { margin: 0; padding: .55rem .7rem .7rem; font-size: .78rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ag-previa__texto em { font-style: normal; color: var(--texto-tenue); }
.ag-previa--vertical .ag-previa__arte { aspect-ratio: 9 / 16; max-height: 22rem; }

/* El plan del contrato, en tarjetas. */
.ag-planes__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.ag-plan { position: relative; display: block; }
.ag-plan input { position: absolute; opacity: 0; pointer-events: none; }
.ag-plan__caja {
  display: grid; gap: .35rem; height: 100%; padding: .75rem .85rem; cursor: pointer; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio-campo); transition: border-color .12s, box-shadow .12s;
}
.ag-plan__caja:hover { border-color: var(--borde-fuerte); }
.ag-plan input:checked + .ag-plan__caja { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.ag-plan input:focus-visible + .ag-plan__caja { box-shadow: var(--anillo); }
.ag-plan__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ag-plan__cabeza strong { font-size: .9rem; }
.ag-plan__cabeza b { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-plan__cabeza b small { font-weight: 500; color: var(--texto-tenue); }
.ag-plan__igv { font-size: .72rem; color: var(--texto-tenue); }
.ag-plan__items { display: grid; gap: .15rem; padding-top: .4rem; border-top: 1px solid var(--borde); font-size: .76rem; color: var(--texto-suave); }
.ag-plan__items b { color: var(--texto); font-variant-numeric: tabular-nums; }
.ag-plan__items small { color: var(--texto-tenue); }

/* El resumen en vivo del contrato y del plan. */
.ag-resumen { margin-top: 18px; padding: .85rem 1rem; border-radius: var(--radio-tarjeta); background: var(--panel-suave); border: 1px solid var(--borde); }
.ag-resumen h3 { margin: 0 0 .5rem; font-size: .88rem; }
.ag-resumen dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.25rem; }
.ag-resumen dl div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--borde); }
.ag-resumen dt { font-size: .76rem; color: var(--texto-tenue); white-space: nowrap; }
.ag-resumen dd { margin: 0; font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.ag-resumen dd small { display: block; font-size: .7rem; color: var(--texto-tenue); }
.ag-resumen__fuerte dd { font-size: .95rem; font-weight: 750; }
.ag-resumen__dif { display: inline-block; margin-left: .25rem; padding: .05rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 650; background: var(--gris-100); color: var(--texto-suave); }
.ag-resumen__dif--menos { background: var(--ok-fondo); color: var(--ok); }
.ag-resumen__dif--mas { background: var(--acento-suave); color: var(--acento); }

/* Cantidades con − y +. */
.ag-paso { display: flex; gap: 6px; align-items: stretch; }
.ag-paso input { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.ag-paso .fm-atajo { min-width: 2.4rem; font-size: 1rem; line-height: 1; }

@media (max-width: 40rem) {
  .ag-pub__arte { grid-template-columns: minmax(0, 1fr); }
  .ag-previa { max-width: 20rem; }
  .ag-resumen dl { grid-template-columns: minmax(0, 1fr); }
}

/* El saludo en gris claro, al estilo Apple: fondo #f5f5f7, letra casi negra y
 * el boton con el color del panel. */
.saludo {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
  color: #1d1d1f;
  border: 1px solid #e8e8ed;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.saludo__fecha { color: #86868b; }
.saludo__titulo { color: #1d1d1f; font-weight: 700; }
.saludo__texto { color: #6e6e73; }
.saludo .boton--claro { background: var(--acento); color: var(--acento-texto, #fff); border-radius: 980px; padding-inline: 1.1rem; }
.saludo .boton--claro:hover { background: color-mix(in srgb, var(--acento) 85%, #fff); }

/* Categoria nueva dentro del formulario: un campo bajo la lista. */
.fin-catnueva { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; padding: .45rem .5rem; border: 1px solid #e8e8ed; border-radius: 10px; background: #fbfbfd; }
.fin-catnueva input { flex: 1 1 10rem; min-width: 0; }
.fin-catnueva__punto { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.fin-catnueva__error { flex-basis: 100%; color: #d70015; font-size: .78rem; }

/* ==========================================================================
 * ESTILO APPLE
 *
 * Negro solo en lo principal: el boton que guarda o crea. Lo demas -filtros,
 * cabeceras de tabla, iconos de tarjeta, botones secundarios- va en blanco y
 * grises claros, como en las Configuraciones de un iPhone o una Mac. Va al
 * final y con los tokens, asi la Apariencia sigue mandando sobre el color.
 * ========================================================================== */
:root {
  --fondo: #f5f5f7;
  --panel-suave: #fbfbfd;
  --borde: #e8e8ed;
  --borde-fuerte: #d2d2d7;
  --texto: #1d1d1f;
  --texto-suave: #6e6e73;
  --texto-tenue: #86868b;
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Los secundarios, casi blancos. */
.boton--sutil, .boton-mini, .boton--claro {
  background: #fff;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  box-shadow: none;
}
.boton--sutil:hover, .boton-mini:hover, .boton--claro:hover { background: #f5f5f7; border-color: #c7c7cc; }

/* "Ver" junto a las fechas, en un filtro, no es una accion principal. */
.fin-rango .boton-mini--fuerte, .periodo__fechas .boton-mini--fuerte {
  background: #f5f5f7; color: #1d1d1f; border-color: #d2d2d7;
}
.fin-rango .boton-mini--fuerte:hover, .periodo__fechas .boton-mini--fuerte:hover { background: #e8e8ed; }

/* Las cabeceras de tabla, claras: un rotulo gris sobre blanco humo. */
.tabla th {
  background: #fbfbfd;
  color: #86868b;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid #e8e8ed;
}
.tabla tbody tr:hover { background: #fafafc; }

/* Los filtros, como el control segmentado de iOS: el elegido en blanco con
 * sombra sobre el gris, nunca en negro. */
.filtro { background: #fff; border-color: #e8e8ed; color: #424245; }
.filtro:hover { background: #f5f5f7; border-color: #d2d2d7; color: #1d1d1f; }
.filtro.activo {
  background: #e8e8ed;
  border-color: #e8e8ed;
  color: #1d1d1f;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

/* Los iconos de las tarjetas, en gris; el aviso lo dice el color del pie. */
.kpi__icono, .kpi--alerta .kpi__icono { background: #f5f5f7; color: #1d1d1f; }
.kpi--peligro .kpi__icono { background: #fff1f0; color: #d70015; }
.kpi { border-color: #e8e8ed; }

.aviso-grande__icono, .vacio-grande__icono, .subidor__icono, .caja-cerrada__icono {
  background: #f5f5f7; color: #1d1d1f;
}
.icono-accion:hover, .ventana-pagina__cerrar:hover { background: #f5f5f7; border-color: #d2d2d7; color: #1d1d1f; }

/* Los campos, como en macOS: blancos, borde fino y un halo suave al
 * escribir. */
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.campo select, .campo textarea {
  background: #fff;
  border-color: #d2d2d7;
  border-radius: 10px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: color-mix(in srgb, var(--acento) 55%, #d2d2d7);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 12%, transparent);
  outline: none;
}
.campo__nombre small { color: #86868b; font-weight: 400; margin-left: .25rem; }

/* --- Un recurrente --------------------------------------------------------- */
.rec-bloque {
  margin: .9rem 0;
  padding: .85rem .95rem .95rem;
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  background: #fbfbfd;
}
.rec-bloque__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.rec-bloque__titulo { font-size: .8rem; font-weight: 600; color: #1d1d1f; }

.rec-modo { display: inline-flex; padding: 2px; border-radius: 9px; background: #e8e8ed; }
.rec-modo label { position: relative; }
.rec-modo input { position: absolute; opacity: 0; pointer-events: none; }
.rec-modo span { display: block; padding: .28rem .8rem; border-radius: 7px; font-size: .8rem; font-weight: 500; color: #424245; cursor: pointer; }
.rec-modo input:checked + span { background: #fff; color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rec-modo input:focus-visible + span { box-shadow: var(--anillo); }

.rec-monto { display: grid; grid-template-columns: 1.3fr 1fr; gap: .7rem; }
.rec-monto__campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rec-monto__etiqueta { font-size: .76rem; font-weight: 500; color: #6e6e73; }
.rec-monto__fila { display: flex; align-items: stretch; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; overflow: hidden; }
.rec-monto__fila:focus-within { border-color: color-mix(in srgb, var(--acento) 55%, #d2d2d7); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 12%, transparent); }
.rec-monto__fila select { width: auto; border: 0; border-right: 1px solid #e8e8ed; border-radius: 0; background: #f5f5f7; padding: 0 .55rem; font-weight: 600; box-shadow: none; }
.rec-monto__fila input { flex: 1; min-width: 0; border: 0; padding: .55rem .7rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; background: transparent; box-shadow: none; outline: none; }
.rec-monto__campo > select { border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; padding: .6rem .7rem; height: 100%; }

.rec-dias { margin-top: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.rec-dias[hidden] { display: none; }
.rec-dias__fila { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.rec-dias__casillas { display: flex; gap: .3rem; }
.rec-dias__casillas label { position: relative; }
.rec-dias__casillas input { position: absolute; opacity: 0; pointer-events: none; }
.rec-dias__casillas span {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid #d2d2d7; background: #fff; color: #424245; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rec-dias__casillas input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-texto, #fff); }
.rec-dias__casillas input:focus-visible + span { box-shadow: var(--anillo); }
.rec-dias__atajos { display: flex; gap: .3rem; }
.rec-dias__atajos button {
  padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 500;
  background: #fff; color: #424245; border: 1px solid #d2d2d7; box-shadow: none;
}
.rec-dias__atajos button:hover { background: #f5f5f7; }

.rec-cuenta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid #e8e8ed;
  font-size: .86rem; color: #424245; font-variant-numeric: tabular-nums;
}
.rec-cuenta[hidden] { display: none; }
.rec-cuenta strong { color: #1d1d1f; font-weight: 700; }
.rec-cuenta span { color: #86868b; font-size: .8rem; }

.rec-sufijo { display: flex; align-items: center; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; overflow: hidden; }
.rec-sufijo input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.rec-sufijo span { padding: 0 .7rem; color: #86868b; font-size: .82rem; }
.rec-dias-texto { display: block; }

@media (max-width: 560px) {
  .rec-monto { grid-template-columns: 1fr; }
  .rec-dias__casillas span { width: 1.9rem; height: 1.9rem; }
}

/* ===== Categorias y conceptos ===============================================
   Listas agrupadas como los Ajustes de un iPhone: cada fila es un punto de
   color, el nombre, una linea gris debajo y un chevron; tocarla abre su
   ventana. Sin franjas de color a los lados: el color va en el punto. */
.cat-pagina { display: grid; gap: 28px; max-width: 760px; }
.cat-pagina [hidden], .cat-form [hidden] { display: none !important; }

.cat-buscar {
  position: relative; display: block; margin: 0; max-width: 420px;
}
.cat-buscar svg {
  position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  fill: none; stroke: #86868b; stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.cat-buscar input {
  height: 38px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid transparent;
  background: #e8e8ed80; color: #1d1d1f; font-size: .9rem;
}
.cat-buscar input:focus { background: #fff; border-color: #d2d2d7; }

.cat-seccion { display: grid; gap: 10px; }
.cat-seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; }
.cat-seccion__cabecera h2 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: #1d1d1f; display: flex; align-items: center; gap: 8px; }
.cat-seccion__cabecera p { margin: 2px 0 0; font-size: .8rem; color: #6e6e73; }

.cat-cuenta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: #e8e8ed; color: #6e6e73; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.cat-nueva {
  flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid #d2d2d7; color: #1d1d1f; font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.cat-nueva:hover { background: #f5f5f7; border-color: #c7c7cc; color: #1d1d1f; }

.cat-grupo { display: grid; gap: 6px; }
.cat-grupo + .cat-grupo { margin-top: 8px; }
.cat-grupo__titulo {
  margin: 0; padding: 0 16px; display: flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6e6e73;
}

.cat-lista {
  list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #e8e8ed; border-radius: 14px; overflow: hidden;
}
.cat-fila + .cat-fila { border-top: 1px solid #e8e8ed; }
.cat-fila__enlace {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 14px 9px 16px;
  color: #1d1d1f; text-decoration: none; transition: background .12s ease;
}
a.cat-fila__enlace:hover { background: #f5f5f7; color: #1d1d1f; }
a.cat-fila__enlace:active { background: #e8e8ed; }
a.cat-fila__enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.cat-fila__texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cat-fila__texto strong { font-size: .92rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-fila__texto small { font-size: .76rem; color: #86868b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-fila--apagada .cat-fila__texto strong { color: #86868b; }
.cat-fila--apagada .cat-punto { opacity: .45; }
.cat-fila--vacia { padding: 16px; font-size: .85rem; color: #86868b; }
.cat-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: #c7c7cc; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cat-punto { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cat-punto--chico { width: 8px; height: 8px; }
.cat-punto--vacio { background: #fff; box-shadow: inset 0 0 0 1.5px #c7c7cc; }

.cat-pill {
  flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: #f5f5f7; border: 1px solid #e8e8ed; color: #6e6e73; font-size: .7rem; font-weight: 600;
}
.cat-pill--caja { background: #fff; border-color: #d2d2d7; color: #1d1d1f; }

.cat-sin { margin: 0; padding: 14px 16px; border-radius: 14px; background: #fbfbfd; border: 1px dashed #d2d2d7; font-size: .85rem; color: #86868b; text-align: center; }

/* --- La ventana de una categoria o una linea --- */
.cat-form { display: grid; gap: 18px; }
.cat-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cat-form label { margin: 0; }

.cat-vista {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px;
  border-radius: 14px; background: #f5f5f7;
}
.cat-vista__chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-size: .92rem; font-weight: 600; color: #1d1d1f;
}
.cat-vista__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-vista__nota { font-size: .75rem; color: #86868b; }

.cat-segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 10px; background: #e8e8ed; }
.cat-segmento label { display: block; margin: 0; position: relative; cursor: pointer; }
.cat-segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cat-segmento span {
  display: block; padding: 7px 10px; border-radius: 8px; text-align: center; font-size: .85rem; font-weight: 600; color: #1d1d1f;
  transition: background .15s ease, box-shadow .15s ease;
}
.cat-segmento input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.cat-segmento input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 1px; }

.cat-bloque { display: grid; gap: 8px; }
.cat-rotulo { margin: 0 0 2px; padding: 0; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6e6e73; display: flex; align-items: center; gap: 6px; }
.cat-campo { display: grid; gap: 6px; }
.cat-campo__nombre { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6e6e73; }
.cat-campo input { height: 42px; border-radius: 10px; border-color: #d2d2d7; font-size: .95rem; }
.cat-ayuda { margin: 0; font-size: .76rem; color: #86868b; }

.cat-muestras { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-muestra { position: relative; display: block; margin: 0; width: 30px; height: 30px; cursor: pointer; }
.cat-muestra input[type="radio"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cat-muestra span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .12s ease, box-shadow .12s ease;
}
.cat-muestra:hover span { transform: scale(1.08); }
.cat-muestra input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f; }
.cat-muestra input:focus-visible + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acento); }
.cat-muestra--propia {
  border-radius: 50%; overflow: hidden;
  background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff3b30);
}
.cat-muestra--propia input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  opacity: 0; cursor: pointer;
}
.cat-muestra--propia:has(input[type="radio"]:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f; overflow: visible; }

.cat-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cat-opcion { position: relative; display: block; margin: 0; cursor: pointer; }
.cat-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cat-opcion span {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border-radius: 12px;
  background: #fff; border: 1px solid #d2d2d7; color: #1d1d1f; font-size: .85rem; font-weight: 500;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.cat-opcion span em { font-style: normal; color: #86868b; font-size: .75rem; }
.cat-opcion:hover span { background: #fbfbfd; }
.cat-opcion input:checked + span { border-color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; background: #fff; }
.cat-opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 1px; }

.cat-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 14px;
  border-radius: 12px; background: #fff; border: 1px solid #e8e8ed; cursor: pointer; position: relative;
}
.cat-switch__texto { display: grid; gap: 2px; }
.cat-switch__texto strong { font-size: .9rem; font-weight: 600; color: #1d1d1f; }
.cat-switch__texto small { font-size: .76rem; font-weight: 400; color: #86868b; }
.cat-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cat-switch__riel {
  flex: none; position: relative; width: 51px; height: 31px; border-radius: 999px; background: #e8e8ed;
  transition: background .2s ease;
}
.cat-switch__riel::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .2s ease;
}
.cat-switch input:checked ~ .cat-switch__riel { background: var(--acento); }
.cat-switch input:checked ~ .cat-switch__riel::after { transform: translateX(20px); }
.cat-switch input:focus-visible ~ .cat-switch__riel { outline: 2px solid var(--acento); outline-offset: 2px; }

.cat-info { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fbfbfd; border: 1px solid #e8e8ed; font-size: .8rem; line-height: 1.55; color: #6e6e73; }
.cat-info a { color: #1d1d1f; font-weight: 600; }

.cat-lista--plana .cat-fila__enlace { min-height: 44px; padding: 7px 14px; }

.cat-pie button[type="submit"] { background: var(--acento); color: var(--acento-texto, #fff); }

@media (max-width: 560px) {
  .cat-pagina { gap: 22px; }
  .cat-buscar { max-width: none; }
  .cat-seccion__cabecera { align-items: flex-start; }
  .cat-seccion__cabecera p { display: none; }
  .cat-fila__enlace { padding: 9px 12px; gap: 10px; }
  .cat-opciones { grid-template-columns: 1fr 1fr; }
  .cat-muestras { gap: 8px; }
}

/* La pregunta antes de lo que no se deshace: una hoja del panel, centrada,
 * como las alertas de iOS. Nunca el confirm() del navegador. */
.confirma {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: confirma-entra .14s ease-out;
}
.confirma__caja {
  width: min(360px, 100%); padding: 1.25rem 1.25rem 1rem; border-radius: 16px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35);
  text-align: center;
}
.confirma__texto { margin: 0 0 1.1rem; color: #1d1d1f; font-size: .92rem; line-height: 1.45; }
.confirma__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.confirma__botones button { width: 100%; border-radius: 10px; }
.confirma__si--peligro { background: #d70015; color: #fff; }
.confirma__si--peligro:hover { background: #b80012; }
@keyframes confirma-entra { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
 * La ficha del cliente (clases clif-)
 *
 * Nuevo cliente y Datos del cliente, en Clientes y en la Agencia: cabecera
 * con las iniciales y el tipo, pestañas como un control segmentado de iOS
 * (static/js/cliente.js) y un pie con Cancelar y Guardar. Sin guion las
 * cuatro partes se ven seguidas, cada una con su titulo.
 * ========================================================================== */
.clif [hidden] { display: none !important; }
.clif-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fuera de la ventana (la pagina entera), la ficha va en su tarjeta. */
.admin:not(.admin--ventana) .clif {
  max-width: 54rem;
  padding: 18px 22px 0;
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  background: #fff;
}

/* --- Cabecera --- */
.clif-cabeza { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 14px; }

.clif-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e8e8ed;
  border-radius: 50%;
  background: linear-gradient(180deg, #fbfbfd, #f0f0f3);
  color: #1d1d1f;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.clif-cabeza__texto { display: grid; gap: 4px; min-width: 0; }

.clif-cabeza__nombre {
  overflow: hidden;
  color: #1d1d1f;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clif-cabeza__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.clif-codigo { color: #86868b; font-size: .72rem; font-variant-numeric: tabular-nums; }

.clif-insignia {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #e8e8ed;
  border-radius: 999px;
  background: #f5f5f7;
  color: #6e6e73;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.clif-insignia--ok { border-color: #c6ebd3; background: #effaf3; color: #1a7f37; }
.clif-insignia--alerta { border-color: #f6deb0; background: #fff7e8; color: #a05a00; }

/* --- Pestañas: control segmentado --- */
.clif-pestanas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  border-radius: 11px;
  background: #f0f0f3;
}

.clif-pestanas button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: .42rem .4rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #6e6e73;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.clif-pestanas button:hover { color: #1d1d1f; }
.clif-pestanas button:active { transform: none; }
.clif-pestanas button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .05);
  color: #1d1d1f;
  font-weight: 600;
}
.clif-pestanas button:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 1px; }

.clif-punto { width: 6px; height: 6px; border-radius: 50%; background: #ff9f0a; }

/* --- Paneles: con guion van uno encima del otro en la misma celda, asi la
 * ventana mide lo del mas alto y no salta al cambiar de pestaña. --- */
.clif-paneles { display: grid; gap: 20px; }
.clif--js .clif-paneles { gap: 0; }
.clif--js .clif-panel { grid-area: 1 / 1; visibility: hidden; }
.clif--js .clif-panel.es-activa { visibility: visible; }

.clif-panel { min-width: 0; }
.clif-panel__titulo { margin: 0 0 10px; color: #86868b; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.clif--js .clif-panel__titulo { display: none; }

.clif-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-content: start; }
.clif-rejilla--una { grid-template-columns: minmax(0, 1fr); }

.clif .campo__nombre { color: #1d1d1f; font-size: .78rem; font-weight: 500; }
.clif .campo__nombre label { display: inline; margin: 0; color: inherit; font: inherit; cursor: pointer; }
.clif .campo-buscar input { margin: 0; }

.clif-aviso { min-height: 1.1em; color: #86868b; font-size: .74rem; line-height: 1.4; }
.clif-aviso.es-ok { color: #1a7f37; }
.clif-aviso.es-error { color: #b42318; }

/* --- Rubro: tarjetas --- */
.clif-rubros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.clif-rubro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 7px 10px 7px 8px;
  border: 1px solid #e8e8ed;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.clif-rubro input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.clif-rubro:hover { border-color: #d2d2d7; background: #fbfbfd; }
.clif-rubro:has(input:checked) { border-color: #1d1d1f; box-shadow: 0 0 0 1px #1d1d1f; background: #fff; }
.clif-rubro:has(input:focus-visible) { outline: 2px solid #1d1d1f; outline-offset: 2px; }

.clif-rubro__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f5f5f7;
  color: #1d1d1f;
  transition: background .15s ease;
}

.clif-rubro:has(input:checked) .clif-rubro__icono { background: #e8e8ed; }

.clif-rubro__icono svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.clif-rubro__nombre { min-width: 0; color: #1d1d1f; font-size: .78rem; font-weight: 500; line-height: 1.25; }

.clif-otro { margin-top: 12px; max-width: 26rem; }

/* --- Atajos a WhatsApp y al correo, junto al nombre del campo --- */
.clif-accion {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: -3px 0;
  border: 1px solid #e8e8ed;
  border-radius: 50%;
  background: #f5f5f7;
  color: #1d1d1f;
  text-decoration: none;
  transition: background .15s ease;
}

.clif-accion:hover { background: #e8e8ed; }
.clif-accion:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 1px; }
.clif-accion svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Pie --- */
.clif-pie {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px -22px 0;
  padding: 12px 22px;
  border-top: 1px solid #e8e8ed;
  border-radius: 0 0 14px 14px;
  background: rgba(251, 251, 253, .96);
  backdrop-filter: blur(8px);
}

.admin--ventana .clif-pie { border-radius: 0; }
html.ventana-ajustada .clif-pie { margin-bottom: -18px; }

.clif-pie__hueco { flex: 1; }
.clif-atajo { color: #86868b; font-size: .72rem; }
.clif-pie .boton { padding: .55rem 1.15rem; border-radius: 10px; }

@media (max-width: 40rem) {
  .clif-rejilla { grid-template-columns: minmax(0, 1fr); }
  .clif-rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clif-atajo { display: none; }
  .admin:not(.admin--ventana) .clif { padding: 14px 14px 0; }
  .admin:not(.admin--ventana) .clif-pie { margin: 16px -14px 0; padding: 10px 14px; }
}

@media (min-width: 40.01rem) and (max-width: 44rem) {
  .clif-rubros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* LO DE DENTRO DE UNA TARJETA, CON AIRE
 *
 * La cabecera tiene su margen; lo que va debajo (una lista, un aviso de
 * vacio, las barras por categoria, los consejos) se quedaba pegado al borde
 * izquierdo. Ahora todo empieza donde empieza el titulo. */
.tarjeta > .vacio { margin: 0; padding: .9rem .9rem 1rem; font-size: .86rem; }
.tarjeta > .fin-lista { padding: 0 .9rem; }
.tarjeta > .fin-lista > li > a, .tarjeta > .fin-lista > li > div { padding: .7rem 0; }
.tarjeta > .fin-partes { padding: 1rem .9rem 1.15rem; }
.tarjeta > .fin-consejos { padding: .9rem .9rem 1.1rem; gap: .6rem; }
.tarjeta > .fin-consejos > li { border-radius: 12px; }
.tarjeta > .fin-grafico { padding-inline: .9rem; }
@media (max-width: 640px) {
  .tarjeta > .vacio, .tarjeta > .fin-lista, .tarjeta > .fin-partes, .tarjeta > .fin-consejos { padding-left: .9rem; padding-right: .9rem; }
}