/* ==========================================================================
   PRINCESITAS · panel de administración
   Una herramienta de trabajo: legible, rápida y con los colores y tipografías de la marca.
   ========================================================================== */
@font-face { font-family: "League Spartan"; src: url("../assets/fonts/LeagueSpartan-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "League Spartan"; src: url("../assets/fonts/LeagueSpartan-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Glacial Indifference"; src: url("../assets/fonts/GlacialIndifference-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Glacial Indifference"; src: url("../assets/fonts/GlacialIndifference-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --sandia: #E4969D; --blanco: #FAFAFA; --vino: #9D2157; --palo-rosa: #D49AA9; --magenta: #A61671;
  --lila: #C6A4B8; --marfil: #FDFDF1; --gris: #808182; --rosa-claro: #EDCCD3; --negro: #121212;
  --primario: var(--palo-rosa);
  --tinta: var(--negro);
  --tinta-suave: color-mix(in srgb, var(--negro) 72%, var(--palo-rosa));
  --acento: color-mix(in srgb, var(--negro) 55%, var(--palo-rosa));
  --sombra: color-mix(in srgb, var(--negro) 80%, var(--palo-rosa));
  --linea: color-mix(in srgb, var(--acento) 38%, transparent);
  --puntada: color-mix(in srgb, var(--acento) 62%, transparent);
  --fondo-suave: color-mix(in srgb, var(--rosa-claro) 38%, var(--blanco));
  --ok: color-mix(in srgb, #1c6b43 82%, var(--negro));
  --alerta: color-mix(in srgb, var(--vino) 88%, var(--negro));
  --f-titulo: "League Spartan", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Glacial Indifference", "Segoe UI", system-ui, sans-serif;
  --salida: cubic-bezier(.23, 1, .32, 1);
  --lateral: 15rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; accent-color: var(--primario); scrollbar-color: var(--primario) var(--rosa-claro); scrollbar-width: thin; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1rem/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
::selection { background: var(--primario); color: var(--negro); }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; border-radius: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: var(--primario); }
.ingreso__form { width: min(100%, 26rem); display: grid; gap: 1rem; padding: 2rem 1.75rem; background: var(--blanco); outline: 1.5px dashed var(--puntada); outline-offset: -8px; }
.ingreso__logo { width: 8rem; height: auto; margin-inline: auto; padding: .9rem; background: var(--primario); border-radius: 1rem; }
.ingreso__form h1 { font-size: 2rem; text-align: center; }
.ingreso__texto { text-align: center; color: var(--tinta-suave); margin-top: -.5rem; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1rem; background: var(--sombra); color: var(--blanco); overflow-y: auto; }
.lateral__marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; padding: .25rem .5rem; }
.lateral__marca img { width: 5.5rem; height: auto; }
.lateral__marca span { font-family: var(--f-titulo); font-size: 1.1rem; color: var(--rosa-claro); letter-spacing: -.02em; }
.lateral__nav { display: grid; gap: .15rem; }
.lateral__nav a { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .5rem .75rem; border-radius: .75rem; text-decoration: none; font-weight: 700; color: var(--rosa-claro); transition: background-color .2s ease, color .2s ease; }
.lateral__nav svg { width: 1.3rem; height: 1.3rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lateral__nav a[aria-current="page"] { background: var(--primario); color: var(--negro); }
@media (hover: hover) { .lateral__nav a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--blanco) 12%, transparent); color: var(--blanco); } }
.insignia { margin-left: auto; min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--blanco); color: var(--negro); font-size: .8125rem; line-height: 1.5rem; text-align: center; }
.lateral__pie { margin-top: auto; display: grid; gap: .25rem; }
.lateral__ver, .lateral__salir { display: flex; align-items: center; min-height: 2.75rem; padding: .4rem .75rem; border-radius: .75rem; background: transparent; border: 0; color: var(--rosa-claro); text-align: left; text-decoration: none; font-weight: 700; }
@media (hover: hover) { .lateral__ver:hover, .lateral__salir:hover { background: color-mix(in srgb, var(--blanco) 12%, transparent); color: var(--blanco); } }

.contenido { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 5rem; outline: none; }
.vista { display: grid; gap: 1.75rem; max-width: 76rem; }
.vista__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; }
.vista__cabecera h1 { font-size: clamp(2rem, 4vw, 3rem); }
.vista__cabecera p { color: var(--tinta-suave); margin-top: .4rem; max-width: 40rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

@media (max-width: 52rem) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; gap: .5rem; padding: .5rem .75rem; overflow: visible; }
  .lateral__marca span { display: none; }
  .lateral__marca img { width: 4.25rem; }
  .lateral__nav { display: flex; flex: 1; overflow-x: auto; gap: .25rem; scrollbar-width: none; }
  .lateral__nav::-webkit-scrollbar { display: none; }
  .lateral__nav a { flex: none; min-height: 2.75rem; padding: .4rem .8rem; }
  .lateral__nav a span:not(.insignia) { font-size: .9375rem; }
  .lateral__pie { display: none; }
  .contenido { padding-bottom: 6rem; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.15rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--negro); box-shadow: inset 0 0 0 1.5px var(--vino);
  font-weight: 700; font-size: 1rem; line-height: 1.15; text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--salida), opacity .2s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--primario { background: var(--primario); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--negro) 38%, var(--primario)); }
.btn--oscuro { background: var(--vino); color: var(--blanco); box-shadow: none; }
.btn--peligro { color: var(--alerta); box-shadow: inset 0 0 0 1.5px var(--alerta); }
.btn--chico { min-height: 2.25rem; padding: .25rem .85rem; font-size: .9375rem; }
.btn--grande { min-height: 3.25rem; font-size: 1.0625rem; }
.btn--texto { box-shadow: none; padding-inline: .5rem; text-decoration: underline; text-decoration-style: dashed; }
@media (hover: hover) {
  .btn:not(:disabled):hover { background: var(--vino); color: var(--blanco); }
  .btn--primario:not(:disabled):hover { background: var(--vino); }
  .btn--peligro:not(:disabled):hover { background: var(--alerta); color: var(--blanco); }
  .btn--texto:not(:disabled):hover { background: transparent; color: var(--acento); }
}

/* ---------- Formularios ---------- */
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo > label, .campo__titulo { font-weight: 700; font-size: .9375rem; }
.campo__ayuda { color: var(--tinta-suave); font-size: .875rem; line-height: 1.35; font-weight: 400; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="month"], input[type="search"], select, textarea {
  width: 100%; min-height: 2.75rem; padding: .55rem .85rem; border: 0; border-radius: .6rem; background: var(--blanco);
  box-shadow: inset 0 0 0 1.5px var(--puntada); font-size: 1rem; line-height: 1.35; transition: box-shadow .2s ease;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--negro); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: .85; }
input[type="number"] { font-variant-numeric: tabular-nums; }
.rejilla-campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.formulario { display: grid; gap: 2rem; }
.bloque { display: grid; gap: 1rem; position: relative; padding-top: 1.5rem; }
.bloque::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1.5px dashed var(--puntada); }
.bloque:first-child { padding-top: 0; }
.bloque:first-child::before { display: none; }
.bloque > h2 { font-size: 1.5rem; }
.casilla { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.5rem; cursor: pointer; font-weight: 700; }
.casilla input { width: 1.4rem; height: 1.4rem; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .3rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--puntada); font-weight: 700; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--primario); box-shadow: none; }
.chip:has(input:focus-visible) { outline: 3px solid var(--negro); outline-offset: 2px; }
.punto { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--negro) 25%, transparent); flex: none; }

/* ---------- Tablas y listas ---------- */
.barra { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.barra .campo { min-width: 11rem; flex: 1 1 11rem; }
.barra .campo--buscar { flex: 2 1 16rem; }
.envoltura { overflow-x: auto; border-radius: .75rem; box-shadow: inset 0 0 0 1.5px var(--linea); }
.tabla { width: 100%; border-collapse: collapse; font-size: .96875rem; }
.tabla th { padding: .7rem .9rem; text-align: left; font-size: .875rem; color: var(--acento); font-weight: 700; white-space: nowrap; background: var(--fondo-suave); }
.tabla td { padding: .6rem .9rem; vertical-align: middle; border-top: 1.5px dashed var(--linea); }
.tabla tbody tr { transition: background-color .15s ease; }
@media (hover: hover) { .tabla tbody tr:hover { background: color-mix(in srgb, var(--rosa-claro) 30%, transparent); } }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.acc { text-align: right; white-space: nowrap; }
.tabla img { width: 3rem; height: 4.5rem; object-fit: cover; border-radius: .3rem; background: var(--rosa-claro); }
.tabla .nombre { font-weight: 700; }
.tabla .sub { color: var(--tinta-suave); font-size: .875rem; }
.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--tinta-suave); }
.etiqueta { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .65rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: var(--rosa-claro); color: var(--negro); white-space: nowrap; }
.etiqueta--ok { background: color-mix(in srgb, var(--ok) 18%, var(--blanco)); color: var(--ok); }
.etiqueta--alerta { background: color-mix(in srgb, var(--alerta) 14%, var(--blanco)); color: var(--alerta); }
.etiqueta--tenue { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linea); color: var(--tinta-suave); }
.ingreso-monto { color: var(--ok); font-weight: 700; }
.gasto-monto { color: var(--alerta); font-weight: 700; }

.aviso { padding: .85rem 1rem; border-radius: .6rem; background: var(--fondo-suave); outline: 1.5px dashed var(--puntada); outline-offset: -5px; }
.aviso--error { background: color-mix(in srgb, var(--vino) 12%, var(--blanco)); color: var(--negro); outline-color: var(--vino); font-weight: 700; }

/* ---------- Resumen ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem 1.5rem; }
.cifra { display: grid; gap: .1rem; padding-top: .9rem; position: relative; }
.cifra::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; border-top: 1.5px dashed var(--puntada); }
.cifra span { font-size: .9375rem; color: var(--tinta-suave); }
.cifra strong { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.paneles { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.panel h2 { font-size: 1.375rem; margin-bottom: .75rem; }
.lista-filas > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-top: 1.5px dashed var(--linea); }
.lista-filas > li:first-child { border-top: 0; }
.lista-filas .titulo { font-weight: 700; }
.lista-filas .sub { color: var(--tinta-suave); font-size: .9375rem; }
.barras { display: grid; gap: .6rem; }
.barra-fila { display: grid; grid-template-columns: 7.5rem 1fr 5.5rem; gap: .6rem; align-items: center; font-size: .9375rem; }
.barra-fila .pista { height: .75rem; background: var(--fondo-suave); border-radius: 999px; overflow: hidden; }
.barra-fila .relleno { display: block; height: 100%; background: var(--primario); border-radius: 999px; transition: width .5s var(--salida); }
.barra-fila .relleno--gasto { background: var(--acento); }
.barra-fila b { text-align: right; font-variant-numeric: tabular-nums; }
.meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; align-items: end; height: 9rem; }
.mes { display: grid; grid-template-rows: 1fr auto; gap: .35rem; height: 100%; text-align: center; font-size: .8125rem; color: var(--tinta-suave); }
.mes__barras { display: flex; align-items: end; justify-content: center; gap: 3px; }
.mes__barras i { display: block; width: 36%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--primario); }
.mes__barras i + i { background: var(--acento); }
.leyenda { display: flex; gap: 1rem; font-size: .875rem; color: var(--tinta-suave); }
.leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--primario); margin-right: .35rem; vertical-align: -1px; }
.leyenda i + i, .leyenda span + span i { background: var(--acento); }

/* ---------- Editor de modelo ---------- */
.fotos-edicion { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; }
.foto-edicion { display: grid; gap: .4rem; }
.foto-edicion img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--rosa-claro); border-radius: .3rem; }
.foto-edicion select { min-height: 2.25rem; padding: .25rem .5rem; font-size: .9375rem; }
.foto-edicion .acciones { gap: .25rem; justify-content: space-between; }
.subida { display: grid; place-items: center; gap: .3rem; padding: 1.25rem 1rem; text-align: center; border-radius: .6rem; outline: 1.5px dashed var(--acento); outline-offset: -5px; background: var(--fondo-suave); cursor: pointer; position: relative; font-weight: 700; }
.subida input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.subida:has(input:focus-visible) { outline: 3px solid var(--negro); outline-offset: 3px; }
.variante-fila { display: grid; gap: .75rem; padding: 1rem; border-radius: .75rem; box-shadow: inset 0 0 0 1.5px var(--linea); }
.variante-fila .rejilla-campos { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* ---------- Detalles ---------- */
.detalle { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
.datos { display: grid; gap: .6rem; }
.datos > div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; padding-top: .6rem; border-top: 1.5px dashed var(--linea); }
.datos > div:first-child { border-top: 0; padding-top: 0; }
.datos dt { color: var(--tinta-suave); font-size: .9375rem; }
.datos dd { overflow-wrap: anywhere; }
.miniaturas { display: flex; flex-wrap: wrap; gap: .6rem; }
.miniaturas a { display: block; }
.miniaturas img { width: 8rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .3rem; background: var(--rosa-claro); }
.nina { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) auto; gap: .6rem; align-items: end; padding: .75rem; border-radius: .75rem; box-shadow: inset 0 0 0 1.5px var(--linea); }

/* ---------- Avisos ---------- */
.avisos { position: fixed; z-index: 100; left: 50%; bottom: 1rem; transform: translateX(-50%); display: grid; gap: .5rem; width: min(92vw, 28rem); pointer-events: none; }
.aviso-flotante { padding: .8rem 1.1rem; border-radius: .75rem; background: var(--negro); color: var(--blanco); font-weight: 700; box-shadow: 0 10px 28px color-mix(in srgb, var(--negro) 35%, transparent); animation: entrar .3s var(--salida) both; pointer-events: auto; }
.aviso-flotante--error { background: var(--alerta); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-flotante { animation: none; } .btn, .barra-fila .relleno { transition: none; } }

@media print { .lateral, .acciones, .barra, .avisos { display: none !important; } .app { display: block; } }

/* ---------- Ayudas ---------- */
.apilado { display: grid; gap: .75rem; }
.empuja { margin-left: auto; }
.subtitulo { font-family: var(--f-texto); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--acento); margin-bottom: .6rem; }
.nina__nota { grid-column: 1 / -1; }