:root {
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --texto: #1d2330;
  --tenue: #667085;
  --borde: #dde1e7;
  --acento: #0f6e8c;
  --acento-texto: #ffffff;
  --rojo: #b42318;
  --rojo-fondo: #fdecea;
  --ambar: #8a5a00;
  --ambar-fondo: #fff4d6;
  --verde: #1f7a3d;
  --verde-fondo: #e6f4ea;
  --radio: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14171c;
    --superficie: #1d2128;
    --texto: #e6e8eb;
    --tenue: #98a2b3;
    --borde: #323844;
    --acento: #4fb3d4;
    --acento-texto: #0b1a20;
    --rojo: #ff8a80;
    --rojo-fondo: #3a1d1b;
    --ambar: #f5c451;
    --ambar-fondo: #3a2f12;
    --verde: #7fd394;
    --verde-fondo: #173222;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
a { color: var(--acento); }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.tenue { color: var(--tenue); font-weight: normal; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
.nowrap { white-space: nowrap; }
.multilinea { white-space: pre-line; }

/* ── Barra superior ───────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); }
.marca-titulo { font-weight: 650; }
.marca-sub { font-size: .8rem; color: var(--tenue); }
.busqueda { flex: 1; min-width: 200px; }
.busqueda input { width: 100%; }
.menu { display: flex; align-items: center; gap: .75rem; }

.desplegable { position: relative; }
.desplegable summary { cursor: pointer; list-style: none; padding: .35rem .6rem; border-radius: var(--radio); }
.desplegable summary::after { content: " ▾"; color: var(--tenue); }
.desplegable summary:hover { background: var(--fondo); }
.desplegable > div {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  min-width: 200px; padding: .35rem; box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  display: flex; flex-direction: column;
}
.desplegable > div a, .desplegable > div .enlace {
  padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: var(--texto); text-align: left;
}
.desplegable > div a:hover, .desplegable > div .enlace:hover { background: var(--fondo); }

/* ── Contenido ─────────────────────────────────────────────────────── */
.contenido { max-width: 1150px; margin: 0 auto; padding: 1.25rem; }
.migas { margin: 0; font-size: .85rem; color: var(--tenue); }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.botones { display: flex; gap: .5rem; }
.vacio { color: var(--tenue); padding: 1.5rem; text-align: center; background: var(--superficie);
         border: 1px dashed var(--borde); border-radius: var(--radio); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.estandar {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  padding: .9rem 1rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); text-decoration: none; color: var(--texto);
}
.estandar:hover { border-color: var(--acento); }
.estandar .numero {
  grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--acento); color: var(--acento-texto);
}
.estandar .nombre { font-weight: 600; line-height: 1.25; }
.estandar .total { font-size: .82rem; color: var(--tenue); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.tarjeta summary { cursor: pointer; }
.tarjeta form { margin-top: .75rem; }
.login { max-width: 380px; margin: 12vh auto 0; }
.angosta { max-width: 420px; }
.media { max-width: 720px; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }

/* ── Formularios ───────────────────────────────────────────────────── */
label { display: block; margin-bottom: .75rem; font-size: .88rem; color: var(--tenue); }
input, select, textarea {
  display: block; width: 100%; margin-top: .25rem;
  font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px;
  padding: .45rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
input[type="file"] { padding: .35rem; }
.fila { display: flex; gap: .75rem; flex-wrap: wrap; }
.fila > label { flex: 1 1 140px; }
.fila > label.crece { flex: 3 1 240px; }

.boton {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  padding: .45rem .95rem; border-radius: 6px; border: 1px solid var(--acento);
  background: var(--acento); color: var(--acento-texto); text-decoration: none;
}
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: transparent; color: var(--acento); }
.boton.rojo { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.boton.ancho { width: 100%; }
.boton.pequeno { padding: .25rem .6rem; font-size: .85rem; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); cursor: pointer; }
.peligro { margin-top: 1.5rem; }

/* ── Avisos y etiquetas ────────────────────────────────────────────── */
.aviso { padding: .65rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; border: 1px solid transparent; }
.aviso-ok { background: var(--verde-fondo); color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); }
.aviso-aviso { background: var(--ambar-fondo); color: var(--ambar); }

.etiqueta { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .85em; white-space: nowrap; }
.etiqueta.vencido { background: var(--rojo-fondo); color: var(--rojo); font-weight: 600; }
.etiqueta.por_vencer { background: var(--ambar-fondo); color: var(--ambar); font-weight: 600; }
.etiqueta.vigente { background: var(--verde-fondo); color: var(--verde); }

/* ── Tablas ────────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .55rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); font-weight: 600; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--fondo); }
.tabla .acciones { white-space: nowrap; }
.tabla .acciones > * { margin-right: .6rem; display: inline-block; }
.tabla .acciones form { display: inline; }
.tabla tr.inactivo td { color: var(--tenue); }
.corto { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.en-linea summary { cursor: pointer; color: var(--acento); }
.en-linea form { display: flex !important; gap: .4rem; margin-top: .35rem; }
.en-linea input { margin: 0; min-width: 160px; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1rem; }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; }
.visor { width: 100%; height: 75vh; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.visor-img { max-width: 100%; border: 1px solid var(--borde); border-radius: var(--radio); }

@media (max-width: 640px) {
  .contenido { padding: 1rem; }
  .barra { padding: .6rem 1rem; }
  .busqueda { order: 3; flex-basis: 100%; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { margin-top: .4rem; }
}

/* ── Tarjetas de prestador (tablero del administrador) ─────────────── */
.prestador {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem; background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio); text-decoration: none; color: var(--texto);
}
.prestador:hover { border-color: var(--acento); }
.prestador.con-alerta { border-left-color: var(--rojo); }
.prestador .nombre { font-weight: 650; line-height: 1.25; }
.prestador .especialidad { font-size: .85rem; color: var(--acento); }
.prestador .total { font-size: .82rem; color: var(--tenue); }
.prestador .etiqueta { align-self: flex-start; margin-top: .35rem; }
.sin-usuario { color: var(--ambar); }

/* Selector de prestador en la barra superior */
.selector select { margin: 0; max-width: 220px; }
.apilada { display: flex; flex-direction: column; gap: .35rem; }
.apilada input { margin: 0; }

/* Enlace al programa externo del biomédico */
.celda-prestador { display: flex; flex-direction: column; gap: .25rem; }
.enlace-biomedico { font-size: .82rem; padding-left: .25rem; }

/* ── Ficha de acceso imprimible ────────────────────────────────────── */
.hoja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.5rem; max-width: 800px;
}
.hoja-cabeza { display: flex; justify-content: space-between; gap: 1rem;
               border-bottom: 2px solid var(--acento); padding-bottom: .75rem; flex-wrap: wrap; }
.hoja-cabeza h2 { margin: 0; font-size: 1.15rem; }
.hoja-prestador { text-align: right; }
.hoja-cuerpo { display: flex; gap: 1.5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.hoja-qr { text-align: center; flex: 0 0 200px; }
.hoja-qr img { width: 200px; height: 200px; display: block; background: #fff; padding: 6px; border-radius: 4px; }
.hoja-datos { flex: 1 1 320px; }
.hoja-datos h3 { margin: 0 0 .5rem; font-size: 1rem; }
.hoja-datos ol { margin: 0 0 1rem; padding-left: 1.1rem; }
.hoja-datos li { margin-bottom: .35rem; }
.hoja-tabla { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.hoja-tabla th, .hoja-tabla td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--borde); }
.hoja-tabla th { width: 40%; font-weight: 600; color: var(--tenue); font-size: .9rem; }
.linea-escribir::after { content: ""; display: block; height: 1.1rem; }
.hoja-pie { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: .6rem; }
.pequena { font-size: .82rem; }

@media print {
  /* Al imprimir: solo la hoja, en blanco y negro y sin adornos. */
  .barra, .sin-imprimir, .aviso { display: none !important; }
  body { background: #fff; color: #000; }
  .contenido { padding: 0; max-width: none; }
  .hoja { border: 0; padding: 0; max-width: none; }
  .hoja-cabeza { border-bottom: 2px solid #000; }
  .hoja-tabla th, .hoja-tabla td, .hoja-pie { border-color: #999; }
  .tenue { color: #444; }
  a { color: #000; text-decoration: none; }
}