/*
 * LA CARTILLA.
 *
 * Los colores no se eligen aquí. Son los de `app_colors.dart` — la paleta de la app de Hatchi
 * que ya está en App Store y Play Store—, copiados uno a uno. Antes eran los de las plantillas
 * de correo, que se le parecían pero no eran iguales; y «parecido» es justo lo que hace que un
 * cliente note que ha salido de un sitio y ha entrado en otro. El verde y el rojo de estado
 * coinciden además con los del informe operativo de las 8:00, así que «al día» y «vencida» se
 * leen igual en los tres sitios.
 *
 * Está pensada para un móvil sostenido con una mano en la puerta del veterinario. De ahí
 * una sola columna, botones grandes y que lo urgente —cuándo toca la próxima dosis— se lea
 * sin abrir nada.
 */

/* ── El tema claro completo. Los otros dos bloques solo redefinen estas fichas. ─────────── */
:root {
  /* Estos valores NO se eligen aquí: son los de `app_colors.dart`, la paleta de la app que ya está
     en las tiendas. Copiarlos en vez de inventar unos parecidos es lo que hace que un cliente que
     salta de la app a esta pantalla no note que ha cambiado de sitio. Si allí cambian, aquí también. */
  --papel:        #FFF6EC;   /* hatchi.eu: el crema del fondo */
  --tarjeta:      #FFFFFF;   /* app: lightSurface       */
  --tinta:        #2D1F14;   /* app: lightPrimaryText   */
  --tinta-suave:  #6F5D4E;   /* hatchi.eu: su gris de texto secundario */
  --tierra:       #4A2819;   /* app: lightSecondaryText */
  --borde:        #F0E6D8;   /* hatchi.eu */
  --borde-fuerte: #E0D2C0;
  --ambar:        #F7A84F;   /* app: lightPrimary / lightAccent */
  --ambar-hondo:  #8A4B12;
  --ambar-fondo:  #F5EFE6;   /* hatchi.eu */
  --verde:        #15803D;   /* app: lightSuccess */
  --verde-fondo:  #F0FDF4;
  --rojo:         #B91C1C;   /* app: lightError */
  --rojo-fondo:   #FEF2F2;
  --sombra:       0 1px 2px rgba(45,31,20,.05), 0 8px 24px -12px rgba(45,31,20,.16);
  --radio:        16px;   /* app: BorderRadius.circular(16), el que más usa */
}

/* Oscuro por preferencia del sistema — salvo que el visitante haya elegido claro a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:        #1A1410;   /* app: darkBackground    */
    --tarjeta:      #2A2118;   /* app: darkSurface       */
    --tinta:        #F5EDE6;   /* app: darkPrimaryText   */
    --tinta-suave:  #B3A294;
    --tierra:       #DDD0C4;   /* app: darkSecondaryText */
    --borde:        #3A2F24;
    --borde-fuerte: #4E4033;
    --ambar:        #F7A84F;   /* app: darkPrimary — el mismo naranja en los dos temas */
    --ambar-hondo:  #F7C88C;
    --ambar-fondo:  #33261A;
    --verde:        #4ADE80;
    --verde-fondo:  #14301E;
    --rojo:         #F87171;
    --rojo-fondo:   #331A18;
    --sombra:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
/* Y oscuro elegido a mano, que gana también sobre un sistema en claro. */
:root[data-theme="dark"] {
  --papel:        #1A1410;   /* app: darkBackground    */
  --tarjeta:      #2A2118;   /* app: darkSurface       */
  --tinta:        #F5EDE6;   /* app: darkPrimaryText   */
  --tinta-suave:  #B3A294;
  --tierra:       #DDD0C4;   /* app: darkSecondaryText */
  --borde:        #3A2F24;
  --borde-fuerte: #4E4033;
  --ambar:        #F7A84F;   /* app: darkPrimary — el mismo naranja en los dos temas */
  --ambar-hondo:  #F7C88C;
  --ambar-fondo:  #33261A;
  --verde:        #4ADE80;
  --verde-fondo:  #14301E;
  --rojo:         #F87171;
  --rojo-fondo:   #331A18;
  --sombra:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Explícito a propósito: sin esto la página se compone sobre el fondo de quien la enseña
     y en un tema se acaba leyendo el texto de un tema sobre el suelo del otro. */
  background: var(--papel);
  color: var(--tinta);
  /* La misma pila exacta que hatchi.eu. No es una fuente parecida: es la misma. */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Un solo tipo para todo, como en hatchi.eu. La jerarquía la hacen el peso y el tamaño, no una
   segunda familia: mezclar dos tipografías aquí sería inventarse algo que la marca no tiene. */
h1, h2, h3, .display { font-family: inherit; font-weight: 700; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: 1.6rem;  font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem;    font-weight: 600; }

.envoltorio { max-width: 560px; margin: 0 auto; padding: 20px 16px 64px; }

/* ── Cabecera ──────────────────────────────────────────────────────────────────────────── */
.cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca .nombre { font-family: inherit; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.marca .cola { color: var(--tierra); font-size: .8rem; font-weight: 500; }
.cabecera .empuja { margin-left: auto; }

/* ── Piezas ────────────────────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.pila     { display: flex; flex-direction: column; gap: 16px; }
.pila-sm  { display: flex; flex-direction: column; gap: 8px; }
.fila     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

label { display: block; font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; }

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}
input::placeholder { color: var(--tinta-suave); opacity: .65; }

button {
  font: inherit; font-weight: 600;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-principal { background: var(--ambar); color: #2D1F14; width: 100%; }
.btn-principal:hover:not(:disabled) { filter: brightness(.94); }
.btn-suave  { background: transparent; color: var(--tinta); border-color: var(--borde-fuerte); }
.btn-suave:hover:not(:disabled) { background: var(--ambar-fondo); }
.btn-texto  { background: none; border: none; color: var(--tierra); padding: 6px 8px; font-size: .85rem; }
.btn-texto:hover { color: var(--ambar-hondo); text-decoration: underline; }
.btn-peligro { background: none; border: none; color: var(--rojo); padding: 6px 8px; font-size: .85rem; }

/* ── El código de seis cifras ───────────────────────────────────────────────────────────── */
.codigo {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem; font-weight: 600;
  letter-spacing: .38em; text-align: center;
  padding: 14px 10px 14px 24px;   /* la sangría compensa el espaciado de la última cifra */
  font-variant-numeric: tabular-nums;
}

/* ── Avisos ────────────────────────────────────────────────────────────────────────────── */
.aviso { padding: 12px 14px; border-radius: 12px; font-size: .9rem; border: 1px solid; }
.aviso-ok   { background: var(--verde-fondo); color: var(--verde);      border-color: color-mix(in srgb, var(--verde) 28%, transparent); }
.aviso-mal  { background: var(--rojo-fondo);  color: var(--rojo);       border-color: color-mix(in srgb, var(--rojo) 28%, transparent); }
.aviso-info { background: var(--ambar-fondo); color: var(--ambar-hondo); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }

/* ── La ficha de cada mascota ───────────────────────────────────────────────────────────── */
.mascota { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.mascota-cabeza { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.avatar {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; font-size: 1.35rem;
  background: var(--ambar-fondo);
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
}
.mascota-cabeza .quien { min-width: 0; }
.mascota-cabeza .quien small { display: block; color: var(--tinta-suave); font-size: .8rem; }

/* ── Las dosis ─────────────────────────────────────────────────────────────────────────── */
.dosis { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.dosis:last-child { border-bottom: none; }
.dosis .fecha {
  flex: none; width: 62px; text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.dosis .fecha .dia { font-family: inherit; font-weight: 700; font-size: 1.15rem; display: block; }
.dosis .fecha .mes { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tierra); }
.dosis .cual { flex: 1; min-width: 0; }
.dosis .cual small { display: block; color: var(--tinta-suave); font-size: .78rem; }

/* El estado va en forma Y en color: quien no distingue bien los colores lee igual la palabra. */
.chip {
  flex: none;
  font-size: .72rem; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid;
  white-space: nowrap;
}
.chip-bien   { background: var(--verde-fondo); color: var(--verde);       border-color: color-mix(in srgb, var(--verde) 30%, transparent); }
.chip-pronto { background: var(--ambar-fondo); color: var(--ambar-hondo); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
.chip-mal    { background: var(--rojo-fondo);  color: var(--rojo);        border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }
.chip-nada   { background: transparent;        color: var(--tinta-suave); border-color: var(--borde-fuerte); }

.vacio { padding: 22px 18px; text-align: center; color: var(--tinta-suave); font-size: .88rem; }
.pie { margin-top: 28px; text-align: center; color: var(--tinta-suave); font-size: .78rem; line-height: 1.6; }
.oculto { display: none !important; }

dialog {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); color: var(--tinta);
  padding: 22px; width: min(94vw, 460px);
  box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(45,31,20,.6); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Utilidades ─────────────────────────────────────────────────────────────────────────
 * Existen para que no haya ni un solo `style=""` en el JavaScript. No es limpieza: sin
 * atributos de estilo en línea, la política de contenidos del servidor puede prohibirlos
 * enteros, y con ellos se va la vía por la que un nombre de mascota malicioso podría pintar
 * algo encima de la pantalla.
 */
.entradilla   { margin: 8px 0 0; color: var(--tinta-suave); font-size: .92rem; }
.entradilla-c { margin: 6px 0 0; color: var(--tinta-suave); font-size: .9rem; }
.sin-margen   { margin: 0; }
.apagado      { color: var(--tinta-suave); }
.h2-dialogo   { margin-bottom: 6px; }
.opcional     { font-weight: 400; }
.a-la-derecha { margin-left: auto; }
.crece        { flex: 1; }
.nota-aviso   { margin-top: 6px; opacity: .85; }
.acciones     { margin-top: 4px; }
.pie-mascota  { padding: 12px 18px; border-top: 1px solid var(--borde); }

/* ── LA MARCA ───────────────────────────────────────────────────────────────────────────
 * La cara de Hatchi es un PNG con transparencia de verdad, así que se apoya igual de bien
 * sobre el papel claro que sobre el oscuro. El nombre va en tipografía y no en imagen: así
 * cambia de color con el tema, se lee con un lector de pantalla y no pesa nada.
 */
.marca-grande { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.marca-grande img { width: 72px; height: auto; display: block; }
.marca-grande .nombre {
  font-family: inherit; font-weight: 700;
  font-size: 1.5rem; letter-spacing: .16em; text-transform: uppercase;
  /* La sangría compensa el espaciado de la última letra, que si no descoloca el centrado. */
  padding-left: .16em;
}
.cabecera .cara { width: 30px; height: auto; display: block; flex: none; }