:root {
  --fondo: #f4f6f5; --superficie: #ffffff; --texto: #1d2b27; --suave: #5b6b66; --borde: #d9e0dd;
  --primario: #0f766e; --primario-osc: #0b5a54; --primario-claro: #e3f3f1;
  --peligro: #b42318; --peligro-claro: #fdecea; --ok: #1a7f4b; --ok-claro: #e6f5ec; --aviso: #8a5a00; --aviso-claro: #fff4d6;
  --radio: 10px; --sombra: 0 1px 2px rgba(20, 40, 35, .08);
  --lateral: 232px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101816; --superficie: #17221f; --texto: #e6efec; --suave: #9db0aa; --borde: #2a3a36;
    --primario: #2dd4bf; --primario-osc: #5eead4; --primario-claro: #12332f;
    --peligro: #ff8a7d; --peligro-claro: #3a1b17; --ok: #5ddc98; --ok-claro: #12301f; --aviso: #f3c969; --aviso-claro: #33290f;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
small, .sub { color: var(--suave); }
.sub { display: block; font-size: .85rem; }
code { font-family: ui-monospace, Consolas, monospace; }

/* Estructura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.barra { display: none; }
.lateral { background: var(--superficie); border-right: 1px solid var(--borde); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.lateral a { display: block; padding: .6rem .75rem; border-radius: 8px; color: var(--texto); text-decoration: none; }
.lateral a:hover { background: var(--primario-claro); }
.lateral a.activo { background: var(--primario); color: #fff; }
@media (prefers-color-scheme: dark) { .lateral a.activo { color: #04201c; } }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.marca small { display: block; font-weight: 400; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--primario); color: #fff; display: grid; place-items: center; font-size: 1.3rem; flex: none; }
@media (prefers-color-scheme: dark) { .logo { color: #04201c; } }
.sesion { margin-top: auto; display: grid; gap: .5rem; border-top: 1px solid var(--borde); padding-top: .75rem; }
.quien { font-weight: 600; word-break: break-word; }
.quien small { display: block; font-weight: 400; }
.principal { padding: 1.5rem; max-width: 1100px; width: 100%; min-width: 0; }

/* Tarjetas y datos */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.tarjeta.destacada { border-color: var(--primario); background: var(--primario-claro); }
.aviso-caja { border-color: var(--peligro); background: var(--peligro-claro); }
.centrado { text-align: center; }
.codigo-error { font-size: 3rem; font-weight: 800; margin: 0; color: var(--primario); }
.encabezado-seccion { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado-seccion h1, .encabezado-seccion h2 { margin: 0; }
.cuadricula { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metrica { display: grid; gap: .1rem; text-align: center; text-decoration: none; color: var(--texto); margin: 0; }
.metrica .num { font-size: 2rem; font-weight: 800; color: var(--primario); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; word-break: break-word; }
.clave { font-size: 1.2rem; background: var(--superficie); border: 1px dashed var(--primario); padding: .2rem .5rem; border-radius: 6px; user-select: all; }
.vacio { color: var(--suave); margin: .25rem 0; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--borde); }
.et-activa { background: var(--ok-claro); color: var(--ok); }
.et-suspendida, .et-error { background: var(--peligro-claro); color: var(--peligro); }
.et-aprovisionando { background: var(--aviso-claro); color: var(--aviso); }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); white-space: nowrap; }
.acciones-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
.acciones-fila form { margin: 0; }

/* Formularios */
.formulario { display: grid; gap: .9rem; max-width: 640px; }
.formulario h1 { margin: 0; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
label.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
input, select, textarea { font: inherit; font-size: 1rem; padding: .65rem .75rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); width: 100%; min-height: 44px; }
input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: none; padding: 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 45%, transparent); outline-offset: 1px; }
.ayuda { color: var(--suave); font-weight: 400; font-size: .85rem; }
.error-campo { color: var(--peligro); font-weight: 500; font-size: .85rem; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.sufijo { display: flex; align-items: center; gap: .4rem; }
.sufijo em { font-style: normal; color: var(--suave); white-space: nowrap; font-weight: 400; }
.busqueda { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 640px; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acciones form { margin: 0; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; padding: .6rem 1rem; min-height: 44px; border-radius: 8px; border: 1px solid var(--primario); background: var(--primario); color: #fff; text-decoration: none; cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn { color: #04201c; } }
.btn:hover { background: var(--primario-osc); border-color: var(--primario-osc); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-sec { background: transparent; color: var(--primario); }
.btn-sec:hover { background: var(--primario-claro); color: var(--primario); }
.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-peligro:hover { background: var(--peligro); filter: brightness(.9); border-color: var(--peligro); }
@media (prefers-color-scheme: dark) { .btn-peligro { color: #2a0a06; } }
.btn-chico { min-height: 34px; padding: .25rem .65rem; font-size: .85rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.aviso ul { margin: 0; padding-left: 1.2rem; }
.aviso-ok { background: var(--ok-claro); color: var(--ok); border-color: var(--ok); }
.aviso-error { background: var(--peligro-claro); color: var(--peligro); border-color: var(--peligro); }
.aviso-info { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso); }

.paginacion { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; color: var(--suave); }

/* Pantalla pública (login) */
body.publico { display: grid; place-items: center; padding: 1rem; }
.caja-centro { width: 100%; max-width: 420px; }
.marca-grande { font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 1rem; color: var(--primario); }
.marca-grande small { display: block; font-size: 1rem; font-weight: 600; color: var(--texto); }
.caja-centro .formulario { max-width: none; }

/* Celular */
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .barra { display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--borde); padding: .5rem .75rem; }
  .btn-menu { font-size: 1.4rem; min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); cursor: pointer; }
  .clinica-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .lateral.abierto { display: flex; }
  .principal { padding: 1rem; }
  .fila-2 { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: .6rem; }
  .busqueda { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  /* Tablas como tarjetas: cada fila es un bloque y cada celda lleva su etiqueta */
  table.apilada, table.apilada tbody, table.apilada tr, table.apilada td { display: block; }
  table.apilada thead { position: absolute; left: -9999px; }
  table.apilada tr { border: 1px solid var(--borde); border-radius: 8px; padding: .4rem .75rem; margin-bottom: .75rem; }
  table.apilada td { border: 0; padding: .3rem 0; display: flex; gap: .75rem; justify-content: space-between; align-items: baseline; text-align: right; }
  table.apilada td::before { content: attr(data-et); color: var(--suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex: none; }
  table.apilada td .sub { text-align: right; }
  .acciones-fila { justify-content: flex-end; }
}
@media (min-width: 801px) { .btn-menu { display: none; } }

/* Sistema */
.lista-salud { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lista-salud li { display: flex; gap: .75rem; align-items: flex-start; }
.lista-salud .icono { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.salud-ok .icono { background: var(--ok-claro); color: var(--ok); }
.salud-aviso .icono { background: var(--aviso-claro); color: var(--aviso); }
.salud-error .icono { background: var(--peligro-claro); color: var(--peligro); }
.huella { word-break: break-all; font-size: .8rem; }
.lista-archivos { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .3rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; }
details summary { cursor: pointer; color: var(--primario); font-weight: 600; }
.fila-respaldo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--borde); padding-bottom: .5rem; }
.restaurar { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.restaurar input { width: auto; min-width: 12rem; flex: 1; }
input[type=file] { padding: .5rem; }