/* Estilos base compartidos (panel de Nucleo y, después, dashboard del dueño):
   botones, tarjetas, formularios, pastillas de estado y tablas que se vuelven
   tarjetas en celular. La identidad (logo, colores de marca, navegación) vive
   en la hoja de cada uno -- fase-1.md 15.1. Los colores salen de variables. */
:root {
  --fondo: #F5F6FB;
  --tarjeta: #FFFFFF;
  --texto: #141634;
  --suave: #565B82;
  --borde: #E4E6F4;
  --primario: #4F46E5;
  --primario-texto: #FFFFFF;
  --acento: #22D3EE;
  --menu: #0B1020;
  /* Semáforo: texto / fondo (contraste ya calculado para lectura). */
  --verde: #166534;   --verde-fondo: #DCFCE7;
  --ambar: #92400E;   --ambar-fondo: #FEF3C7;
  --rojo: #991B1B;    --rojo-fondo: #FEE2E2;
  --gris-fondo: #E4E6F4;
  --peligro: var(--rojo);       /* fondo del botón de peligro (texto blanco) */
  --campo: #FFFFFF;             /* fondo de inputs, selects y textareas */
  /* Dashboard del dueño (1m): portada índigo, pastilla de hora y menú inferior. El diseño pedía #4F46E5 y
     #C7D2FE; un paso más en la misma escala índigo para que el texto pase AA (test/tema-oscuro.test.js). */
  --portada-a: #4338CA;  --portada-b: #3730A3;  --portada-suave: #E0E7FF;
  --hora-fondo: #EEF2FF; --hora-texto: #4F46E5;
  --barra-dueno: #141634; --barra-icono: #A9AFD3;
  --radio: 10px;
  /* Hueco que deja el contenido para el menú inferior flotante (dashboard.css): 64 px de menú + 20 de aire + lo
     que queda abajo del menú. */
  --hueco-menu: calc(84px + max(12px, calc(env(safe-area-inset-bottom) - 10px)));
  color-scheme: light dark;     /* controles nativos (scroll, casillas, fechas) siguen al tema */
  /* Helvetica sin descargar nada: viene en iPhone y Mac; en Android y Windows cae a Arial. */
  --fuente: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Modo oscuro: sigue el ajuste del celular o de la compu (no hay botón: se adapta solo). */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0E1224;
    --tarjeta: #171C33;
    --texto: #E8EAFB;
    --suave: #A9AFD3;
    --borde: #2B3254;
    --primario: #818CF8;
    --primario-texto: #0B1020;
    --menu: #090D1A;
    --verde: #86EFAC;   --verde-fondo: #16361F;
    --ambar: #FCD34D;   --ambar-fondo: #3F2B0A;
    --rojo: #FCA5A5;    --rojo-fondo: #4A1A1A;
    --gris-fondo: #252C4B;
    --peligro: #DC2626;
    --campo: #0F1428;
    --portada-a: #312E81;  --portada-b: #1E1B4B;  --portada-suave: #C7D2FE;
    --hora-fondo: #252C4B; --hora-texto: #818CF8;
    --barra-dueno: #171C33; --barra-icono: #A9AFD3;
  }
  .marca img { filter: brightness(1.35); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.45 var(--fuente);
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; line-height: 1.2; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
p { margin: 0 0 1rem; }
a { color: var(--primario); }
code { word-break: break-all; }
img { max-width: 100%; height: auto; }
.icono { flex: none; vertical-align: -.15em; } /* íconos SVG en línea (lib/iconos.js) */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: 0 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
}
.btn-primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-bloque { display: flex; width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.acciones form { margin: 0; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem; margin-bottom: 1rem; min-width: 0;
}

label { display: block; font-weight: 600; margin: 0 0 1rem; }
label small, .ayuda { display: block; font-weight: 400; color: var(--suave); font-size: .9rem; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  display: block; width: 100%; min-height: 44px; margin-top: .3rem; padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--campo); color: var(--texto);
  font: inherit; font-size: 16px; /* 16 px: iOS no hace zoom al enfocar */
}
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--primario); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(34, 211, 238, .35);
}
.casilla { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 600; }
.casilla input { width: 22px; height: 22px; margin: 0; flex: none; }
/* 1m bloque 2: casillas con el estilo de la app (la nativa salía como un cuadro negro en modo oscuro). La palomita
   es un clip-path del color del texto sobre primario; en oscuro, las variables ya cambian. */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; cursor: pointer;
  width: 22px; height: 22px; margin: 0; border: 2px solid var(--suave); border-radius: 6px; background: var(--campo);
}
input[type=checkbox]::before {
  content: ""; width: 12px; height: 12px; background: var(--primario-texto); transform: scale(0); transition: transform .12s;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type=checkbox]:checked { background: var(--primario); border-color: var(--primario); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input[type=checkbox]::before { transition: none; } }
/* iOS: el selector de hora nativo tiene su propio ancho mínimo y se salía de la tarjeta a 375 px. */
input[type=time], input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
.campo-error input, .campo-error select, .campo-error textarea { border-color: var(--rojo); }
.error-campo { display: block; color: var(--rojo); font-weight: 600; font-size: .9rem; margin-top: .25rem; }
.cuadricula { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }

.pastilla {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem;
  font-weight: 700; background: var(--gris-fondo); color: var(--suave); white-space: nowrap;
}
.pastilla-verde { background: var(--verde-fondo); color: var(--verde); }
.pastilla-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.pastilla-rojo { background: var(--rojo-fondo); color: var(--rojo); }

.aviso { border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; font-weight: 600; overflow-wrap: anywhere; }
.aviso-ok { background: var(--verde-fondo); color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); }
.aviso-info { background: var(--hora-fondo); color: var(--hora-texto); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla .acciones { margin: 0; }

/* Tablas -> tarjetas en celular: una por fila, "etiqueta: valor" con data-label. */
@media (max-width: 640px) {
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem .75rem; margin-bottom: .75rem; }
  .tabla td { border: 0; padding: .3rem 0; overflow-wrap: anywhere; }
  .tabla td[data-label]::before { content: attr(data-label) ": "; font-weight: 400; color: var(--suave); }
  /* 1m bloque 2: el nombre (o la pregunta) va arriba como título de la tarjeta, sin "Nombre:". */
  .tabla tr { display: flex; flex-direction: column; }
  .tabla td.celda-titulo { order: -1; font-size: 1.05rem; }
  .tabla td.celda-titulo::before { display: none; }
}
@media (min-width: 640px) { .cuadricula { grid-template-columns: 1fr 1fr; } }

/* P-66: tira fija del negocio demo (panel y dueño). */
/* En el flujo, debajo del encabezado (que ya respeta el safe-area de arriba): fija, en el iPhone quedaba sobre la hora. */
.tira-demo { margin: 0 0 1rem; padding: .5rem .9rem; border-radius: var(--radio); background: var(--gris-fondo); color: var(--texto); font-weight: 700; text-align: center; }