/* =====================================================================
   DrAsistencial — hoja de estilo de la aplicación

   Paleta azul y blanco. Los cuatro colores de marca los inyecta el marco
   desde la parametrización (--marca-*), de modo que la institución puede
   cambiarlos sin tocar este archivo. Todo lo demás se deriva de ellos.

   Se trabaja en un solo tema claro a propósito: el personal asistencial
   consulta la misma pantalla en equipos distintos y la lectura de datos
   clínicos debe verse igual en todos.
   ===================================================================== */

:root {
  /* Marca: valores de respaldo; el marco los sobreescribe con los parametrizados */
  --marca-primario:   #0B5FA5;
  --marca-secundario: #073F70;
  --marca-acento:     #2E93DB;
  --marca-fondo:      #F5F8FB;

  /* Neutros con sesgo frío, para que convivan con el azul de marca */
  --blanco:      #FFFFFF;
  --superficie:  #FFFFFF;
  --fondo:       var(--marca-fondo);
  --fondo-suave: #EDF2F7;
  --linea:       #D6E0EA;
  --linea-suave: #E6EDF3;

  --texto:       #10202D;
  --texto-medio: #3E5566;
  --texto-tenue: #67808F;

  /* Semánticos: independientes del color de marca */
  --exito:       #17694A;
  --exito-fondo: #E2F1EA;
  --aviso:       #8A5A12;
  --aviso-fondo: #FAF0DC;
  --error:       #9A2F26;
  --error-fondo: #FAE4E1;
  --info:        var(--marca-primario);
  --info-fondo:  #E4EFF8;

  --radio:       4px;
  --radio-chico: 3px;
  --sombra:      0 1px 2px rgba(16, 32, 45, .06), 0 2px 8px rgba(16, 32, 45, .04);
  --sombra-alta: 0 8px 28px rgba(16, 32, 45, .14);

  --barra-ancho: 250px;
  --encabezado-alto: 62px;

  --tipo: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganarle a cualquier clase que fije display.
   La regla del navegador ([hidden]{display:none}) la pisa un simple selector
   de clase, asi que un elemento con `display: flex` se queda visible aunque
   el JavaScript lo marque como oculto. Aqui hay 38 elementos que se muestran
   y ocultan asi, empezando por el aviso de fin de sesion. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; }
p { margin: 0; }
a { color: var(--marca-primario); }
a:hover { color: var(--marca-secundario); }

:focus-visible {
  outline: 2px solid var(--marca-acento);
  outline-offset: 2px;
  border-radius: 2px;
}

.sprite-iconos { display: none; }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marca-primario);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
  border-radius: 0 0 var(--radio) 0;
}
.salto-contenido:focus { left: 0; }

/* =====================================================================
   Pantallas de acceso
   ===================================================================== */

.pagina-acceso { min-height: 100vh; }

.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.acceso-presentacion {
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.13), transparent 60%),
    linear-gradient(160deg, var(--marca-primario) 0%, var(--marca-secundario) 100%);
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.acceso-presentacion-cuerpo {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.acceso-logo { max-width: 260px; max-height: 92px; object-fit: contain; }
.acceso-logo-texto {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.acceso-lema {
  font-size: 1.05rem;
  max-width: 34ch;
  color: rgba(255, 255, 255, .84);
}
.acceso-pie-marca {
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
}

.acceso-panel {
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px;
}
.acceso-caja { width: 100%; max-width: 380px; margin: 0 auto; }

.acceso-encabezado { margin-bottom: 22px; }
.acceso-encabezado h1 { font-size: 1.42rem; margin-bottom: 6px; }
.acceso-encabezado p { color: var(--texto-medio); font-size: .93rem; }

.acceso-enlace { margin-top: 16px; text-align: center; font-size: .9rem; }
.acceso-ayuda { margin-top: 22px; text-align: center; font-size: .86rem; color: var(--texto-tenue); }

.acceso-pie {
  max-width: 380px;
  margin: 32px auto 0;
  text-align: center;
  font-size: .78rem;
  color: var(--texto-tenue);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--texto-tenue);
  font-size: .8rem;
}
.separador::before, .separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.proveedores { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-presentacion { padding: 32px 24px; text-align: center; align-items: center; }
  .acceso-presentacion-cuerpo { align-items: center; margin: 0; }
  .acceso-lema { font-size: .95rem; }
  .acceso-pie-marca { display: none; }
}

/* =====================================================================
   Formularios
   ===================================================================== */

.formulario { display: flex; flex-direction: column; gap: 15px; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: .84rem; font-weight: 600; color: var(--texto-medio); }

/* El aspecto de un control no depende de donde este.
   Antes solo se estilaban los controles dentro de .campo, y los que viven en
   una barra de acciones o en una celda de tabla salian con la apariencia
   cruda del navegador. El ancho si sigue siendo cosa del contenedor: dentro
   de un .campo ocupa toda la linea, fuera conserva su ancho natural. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  max-width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 9px 11px;
  transition: border-color .12s, box-shadow .12s;
}

input:hover, select:hover, textarea:hover { border-color: #B9CBDA; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca-primario);
  box-shadow: 0 0 0 3px rgba(11, 95, 165, .14);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--fondo-suave);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="number"],
.campo input[type="tel"],
.campo input[type="search"],
.campo select,
.campo textarea {
  width: 100%;
}

.campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: var(--error); }
.campo.tiene-error input:focus { box-shadow: 0 0 0 3px rgba(154, 47, 38, .14); }

.campo-error { color: var(--error); font-size: .8rem; min-height: 0; }
.campo-error:empty { display: none; }

.campo-ayuda { color: var(--texto-tenue); font-size: .8rem; }

.campo-con-boton { position: relative; display: flex; }
.campo-con-boton input { padding-right: 62px; }
.boton-ojo {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--marca-primario);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: var(--radio-chico);
}
.boton-ojo:hover { background: var(--info-fondo); }

/* =====================================================================
   Botones
   ===================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 18px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.boton:disabled, .boton.esta-cargando { opacity: .65; cursor: progress; }
.boton-ancho { width: 100%; }

.boton-principal { background: var(--marca-primario); color: #fff; }
.boton-principal:hover:not(:disabled) { background: var(--marca-secundario); color: #fff; }

.boton-secundario {
  background: var(--blanco);
  color: var(--texto-medio);
  border-color: var(--linea);
}
.boton-secundario:hover:not(:disabled) {
  border-color: var(--marca-primario);
  color: var(--marca-primario);
}

.boton-plano { background: transparent; color: var(--marca-primario); padding: 8px 12px; }
.boton-plano:hover:not(:disabled) { background: var(--info-fondo); }

.boton-peligro { background: var(--error); color: #fff; }
.boton-peligro:hover:not(:disabled) { background: #7E241D; color: #fff; }

/* =====================================================================
   Avisos
   ===================================================================== */

.aviso {
  border-radius: var(--radio);
  padding: 11px 14px;
  font-size: .89rem;
  border-left: 3px solid;
  margin-bottom: 14px;
}
.aviso-exito { background: var(--exito-fondo); border-color: var(--exito); color: var(--exito); }
.aviso-error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.aviso-aviso { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }
.aviso-info  { background: var(--info-fondo);  border-color: var(--info);  color: var(--marca-secundario); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.etiqueta-hecho     { background: var(--exito-fondo); color: var(--exito); }
.etiqueta-en_curso  { background: var(--info-fondo);  color: var(--marca-secundario); }
.etiqueta-pendiente { background: var(--fondo-suave); color: var(--texto-tenue); }
.etiqueta-aviso     { background: var(--aviso-fondo); color: var(--aviso); }

/* =====================================================================
   Panel: armazón
   ===================================================================== */

.armazon-panel { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--barra-ancho);
  flex: 0 0 var(--barra-ancho);
  background: var(--marca-secundario);
  color: rgba(255, 255, 255, .82);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.barra-marca {
  height: var(--encabezado-alto);
  flex: 0 0 var(--encabezado-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.barra-marca-enlace { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.barra-marca-enlace img { max-height: 34px; max-width: 168px; object-fit: contain; }
.barra-marca-texto {
  color: #fff;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-cerrar {
  display: none;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.barra-menu { padding: 14px 0 24px; flex: 1; }

.barra-grupo {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .42);
  padding: 14px 20px 6px;
  font-weight: 600;
}
.barra-lista { list-style: none; margin: 0; padding: 0; }

.barra-opcion {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .9rem;
  border-left: 3px solid transparent;
  transition: background-color .12s, color .12s, border-color .12s;
}
.barra-opcion:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.barra-opcion.es-activa {
  background: rgba(255, 255, 255, .12);
  border-left-color: var(--marca-acento);
  color: #fff;
  font-weight: 600;
}
.barra-opcion.es-inactiva {
  color: rgba(255, 255, 255, .38);
  cursor: default;
}
.barra-opcion.es-inactiva:hover { background: none; color: rgba(255, 255, 255, .38); }

.barra-icono { width: 19px; height: 19px; flex: 0 0 19px; }

.barra-nota {
  margin-left: auto;
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .34);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 1px 7px;
}

.zona-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --- Encabezado --- */

.encabezado {
  height: var(--encabezado-alto);
  flex: 0 0 var(--encabezado-alto);
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.encabezado-titulos { min-width: 0; flex: 1; }
.encabezado-titulos h1 {
  font-size: 1.12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.encabezado-titulos p {
  font-size: .82rem;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.encabezado-usuario { display: flex; align-items: center; gap: 12px; }

.boton-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.boton-menu span { display: block; height: 2px; background: var(--texto-medio); border-radius: 2px; }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 34px;
}
.avatar-iniciales {
  display: grid;
  place-items: center;
  background: var(--marca-primario);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.menu-usuario { position: relative; }
.menu-usuario summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  padding: 4px 6px;
  border-radius: var(--radio);
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--fondo-suave); }

.menu-usuario-nombre { display: flex; flex-direction: column; line-height: 1.25; }
.menu-usuario-nombre b { font-size: .86rem; font-weight: 600; }
.menu-usuario-nombre small { font-size: .74rem; color: var(--texto-tenue); }

.menu-usuario-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 5px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.menu-usuario-panel a,
.menu-usuario-panel button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .88rem;
  color: var(--texto-medio);
  background: none;
  border: 0;
  padding: 8px 11px;
  border-radius: var(--radio-chico);
  cursor: pointer;
  text-decoration: none;
}
.menu-usuario-panel a:hover,
.menu-usuario-panel button:hover { background: var(--fondo-suave); color: var(--marca-primario); }
.menu-usuario-salir { margin: 0; border-top: 1px solid var(--linea-suave); padding-top: 4px; }

/* --- Migas --- */

.migas {
  padding: 12px 28px 0;
  font-size: .82rem;
  color: var(--texto-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas > *:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--linea); }

/* --- Contenido --- */

.contenido { flex: 1; padding: 22px 28px 40px; }

.pie {
  border-top: 1px solid var(--linea);
  padding: 14px 28px;
  font-size: .78rem;
  color: var(--texto-tenue);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.velo {
  position: fixed;
  inset: 0;
  background: rgba(16, 32, 45, .45);
  z-index: 40;
}

@media (max-width: 980px) {
  .barra-lateral {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-alta);
  }
  .barra-lateral.esta-abierta { transform: translateX(0); }
  .barra-cerrar { display: block; }
  .boton-menu { display: flex; }
  .contenido { padding: 18px 18px 32px; }
  .encabezado { padding: 0 16px; }
  .menu-usuario-nombre { display: none; }
}

/* =====================================================================
   Bloques de contenido
   ===================================================================== */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.tarjeta-dato {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--sombra);
}
.tarjeta-titulo {
  font-size: .78rem;
  font-weight: 600;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tarjeta-valor {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--marca-secundario);
  font-variant-numeric: tabular-nums;
}
.tarjeta-detalle { font-size: .8rem; color: var(--texto-tenue); }
.tarjeta-dato.es-pendiente { background: var(--fondo-suave); box-shadow: none; }
.tarjeta-dato.es-pendiente .tarjeta-valor { color: var(--texto-tenue); }

.rejilla-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.bloque {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.bloque-encabezado {
  padding: 15px 18px;
  border-bottom: 1px solid var(--linea-suave);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bloque-encabezado h2 { font-size: 1rem; }
.bloque-encabezado p { font-size: .82rem; color: var(--texto-tenue); }

.lista-fases { list-style: none; margin: 0; padding: 0; }
.fase-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--linea-suave);
}
.fase-item:last-child { border-bottom: 0; }
.fase-marca {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  background: var(--linea);
}
.fase-item.es-hecho .fase-marca    { background: var(--exito); }
.fase-item.es-en_curso .fase-marca { background: var(--marca-acento); }
.fase-cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fase-cuerpo b { font-size: .74rem; color: var(--texto-tenue); font-weight: 600; letter-spacing: .04em; }
.fase-cuerpo span { font-size: .9rem; }

.estado-vacio {
  padding: 34px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--texto-medio);
}
.estado-vacio-icono { width: 34px; height: 34px; color: var(--linea); }
.estado-vacio-nota { font-size: .84rem; color: var(--texto-tenue); max-width: 42ch; }

/* --- Tablas --- */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabla th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--texto-tenue);
  background: var(--fondo-suave);
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--fondo-suave); }
.tabla .celda-numero { font-variant-numeric: tabular-nums; text-align: right; }

/* =====================================================================
   Aviso de sesión por vencer
   ===================================================================== */

.aviso-sesion {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 320px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--aviso);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: .88rem;
}
.aviso-sesion b { font-size: .94rem; }

/* =====================================================================
   Notificaciones flotantes (las crea dra.js)
   ===================================================================== */

.pila-notificaciones {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.notificacion {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--info);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 11px 15px;
  font-size: .88rem;
  color: var(--texto);
  animation: entra-notificacion .18s ease-out;
}
.notificacion.es-exito { border-left-color: var(--exito); }
.notificacion.es-error { border-left-color: var(--error); }
.notificacion.es-aviso { border-left-color: var(--aviso); }

@keyframes entra-notificacion {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

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

@media print {
  .barra-lateral, .encabezado, .pie, .migas, .aviso-sesion, .pila-notificaciones { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; }
  .bloque, .tabla-envoltura { border-color: #BBB; box-shadow: none; }
}

/* --- Listas de datos y formularios dentro de bloques --- */

.lista-datos { margin: 0; padding: 0; }
.lista-datos > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--linea-suave);
  align-items: baseline;
}
.lista-datos > div:last-child { border-bottom: 0; }
.lista-datos dt { font-size: .8rem; color: var(--texto-tenue); font-weight: 600; margin: 0; }
.lista-datos dd { margin: 0; font-size: .92rem; word-break: break-word; }

.firma-vista {
  max-height: 56px;
  max-width: 200px;
  object-fit: contain;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 4px 8px;
}

.formulario-bloque { padding: 16px 18px 20px; }

.politica {
  background: var(--fondo-suave);
  border-radius: var(--radio);
  padding: 11px 14px;
  font-size: .82rem;
  color: var(--texto-medio);
}
.politica-titulo { font-weight: 600; margin-bottom: 4px; }
.politica ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 620px) {
  .lista-datos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =====================================================================
   Pestañas
   ===================================================================== */

.pestanas {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pestana {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto-tenue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.pestana:hover { color: var(--marca-primario); }
.pestana.es-activa { color: var(--marca-primario); border-bottom-color: var(--marca-primario); }

/* =====================================================================
   Rejilla de campos de 12 columnas
   ===================================================================== */

.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.campo-ancho-3  { grid-column: span 3; }
.campo-ancho-4  { grid-column: span 4; }
.campo-ancho-6  { grid-column: span 6; }
.campo-ancho-8  { grid-column: span 8; }
.campo-ancho-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .campo-ancho-3, .campo-ancho-4 { grid-column: span 6; }
  .campo-ancho-8 { grid-column: span 12; }
}
@media (max-width: 620px) {
  .rejilla-campos { padding: 14px; }
  .campo-ancho-3, .campo-ancho-4, .campo-ancho-6, .campo-ancho-8 { grid-column: span 12; }
}

.obligatorio { color: var(--error); margin-left: 2px; }

/* --- Interruptor --- */

.interruptor {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  color: var(--texto);
  padding: 6px 0;
  user-select: none;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor-pista {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  background: #C3D1DD;
  border-radius: 999px;
  transition: background-color .15s;
}
.interruptor-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(16, 32, 45, .3);
}
.interruptor input:checked + .interruptor-pista { background: var(--marca-primario); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor-pista {
  outline: 2px solid var(--marca-acento);
  outline-offset: 2px;
}

/* --- Casilla simple --- */

.casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--texto-medio);
  cursor: pointer;
}
.casilla input { width: 16px; height: 16px; accent-color: var(--marca-primario); }

/* --- Color --- */

.campo-color { display: flex; gap: 8px; align-items: center; }
.campo-color input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: pointer;
  flex: 0 0 44px;
}
.campo-color-texto {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: .85rem;
  text-transform: uppercase;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 9px 11px;
  color: var(--texto);
  background: var(--blanco);
}

/* --- Imagen --- */

.campo-imagen { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.campo-imagen-previa {
  flex: 0 0 auto;
  background:
    linear-gradient(45deg, #E8EEF4 25%, transparent 25%, transparent 75%, #E8EEF4 75%),
    linear-gradient(45deg, #E8EEF4 25%, #fff 25%, #fff 75%, #E8EEF4 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 8px;
}
.campo-imagen-previa img { display: block; max-height: 60px; max-width: 180px; object-fit: contain; }
.campo-imagen-controles { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.campo-imagen input[type="file"] {
  font-size: .85rem;
  color: var(--texto-medio);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 9px 11px;
  background: var(--fondo-suave);
  width: 100%;
}

/* --- Barra de acciones al pie del formulario --- */

.barra-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  position: sticky;
  bottom: 12px;
}
.barra-acciones-nota { font-size: .8rem; color: var(--texto-tenue); margin-right: auto; }

/* Los bloques dentro de un formulario se separan entre sí */
.formulario > .bloque { margin-bottom: 4px; }

/* =====================================================================
   Utilidades
   ===================================================================== */

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.texto-alerta { color: var(--aviso); font-style: italic; }
.boton-chico { padding: 5px 11px; font-size: .82rem; }

.etiqueta-exito  { background: var(--exito-fondo); color: var(--exito); }
.etiqueta-error  { background: var(--error-fondo); color: var(--error); }
.etiqueta-neutro { background: var(--fondo-suave); color: var(--texto-tenue); }

/* =====================================================================
   Barra de herramientas y filtros
   ===================================================================== */

.barra-herramientas {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.filtros .campo { gap: 0; flex: 0 0 auto; min-width: 170px; }
.campo-busqueda { flex: 1 1 260px; min-width: 200px; }
.filtros input[type="search"],
.filtros select {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 9px 11px;
}
.filtros input[type="search"]:focus,
.filtros select:focus {
  outline: none;
  border-color: var(--marca-primario);
  box-shadow: 0 0 0 3px rgba(11, 95, 165, .14);
}

.nota-busqueda {
  font-size: .8rem;
  color: var(--texto-tenue);
  margin-bottom: 14px;
  max-width: 72ch;
}

[id^="tabla-"].esta-cargando { opacity: .55; transition: opacity .12s; }

/* --- Celdas --- */

.celda-persona { display: flex; align-items: center; gap: 10px; }
.celda-persona-texto { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.celda-persona-texto b { font-weight: 600; }
.celda-persona-texto small { color: var(--texto-tenue); font-size: .8rem; }
.avatar-chico { width: 30px; height: 30px; flex: 0 0 30px; font-size: .7rem; }
.celda-acciones { text-align: right; white-space: nowrap; }

/* --- Paginación --- */

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 2px 0;
}
.paginacion-resumen { font-size: .84rem; color: var(--texto-tenue); }
.paginacion-botones { display: flex; align-items: center; gap: 10px; }
.paginacion-actual { font-size: .84rem; color: var(--texto-medio); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Roles
   ===================================================================== */

.lista-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 18px;
}
.tarjeta-rol {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  background: var(--blanco);
  transition: border-color .12s, background-color .12s;
}
.tarjeta-rol:hover { border-color: var(--marca-acento); }
.tarjeta-rol input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--marca-primario); flex: 0 0 16px; }
.tarjeta-rol:has(input:checked) { border-color: var(--marca-primario); background: var(--info-fondo); }
.tarjeta-rol-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tarjeta-rol-titulo {
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.tarjeta-rol-detalle { font-size: .82rem; color: var(--texto-medio); line-height: 1.45; }

.campo-error-bloque { display: block; padding: 0 18px 14px; }

/* =====================================================================
   Acciones de seguridad y contraseña temporal
   ===================================================================== */

.acciones-seguridad { display: flex; flex-direction: column; }
.accion-seguridad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea-suave);
  flex-wrap: wrap;
}
.accion-seguridad:last-child { border-bottom: 0; }
.accion-seguridad b { font-size: .92rem; }
.accion-seguridad p { font-size: .82rem; color: var(--texto-tenue); margin-top: 2px; }

.clave-temporal { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.clave-temporal code {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: .08em;
  background: var(--blanco);
  border: 1px solid var(--exito);
  border-radius: var(--radio);
  padding: 7px 14px;
  color: var(--texto);
  user-select: all;
}

/* =====================================================================
   Roles: listado y matriz de permisos
   ===================================================================== */

.rejilla-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.tarjeta-rol-detalle-caja {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-rol-encabezado { display: flex; flex-direction: column; gap: 7px; }
.tarjeta-rol-encabezado h2 { font-size: 1.05rem; }
.tarjeta-rol-marcas { display: flex; gap: 6px; flex-wrap: wrap; }
.tarjeta-rol-texto { font-size: .86rem; color: var(--texto-medio); line-height: 1.5; flex: 1; }

.tarjeta-rol-cifras {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  flex-wrap: wrap;
}
.tarjeta-rol-cifras > div { display: flex; flex-direction: column; gap: 1px; }
.tarjeta-rol-cifras dt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  font-weight: 600;
  margin: 0;
}
.tarjeta-rol-cifras dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marca-secundario);
  font-variant-numeric: tabular-nums;
}
.tarjeta-rol-cifras dd.cifra-texto { font-size: .84rem; font-weight: 500; color: var(--texto-medio); }
.tarjeta-rol-pie { display: flex; justify-content: flex-end; }

.resumen-permisos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 4px;
  font-size: .9rem;
}
.resumen-permisos b { font-size: 1.15rem; color: var(--marca-secundario); font-variant-numeric: tabular-nums; }
.resumen-permisos-acciones { display: flex; gap: 6px; }

.bloque-encabezado-fila {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tabla-permisos td:first-child { width: 34%; min-width: 210px; }
.tabla-permisos td b { display: block; font-weight: 600; }
.codigo-opcion { font-family: var(--mono); font-size: .74rem; color: var(--texto-tenue); }

.acciones-permiso { display: flex; flex-wrap: wrap; gap: 6px; }
.casilla-permiso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  background: var(--blanco);
  transition: border-color .12s, background-color .12s;
  user-select: none;
}
.casilla-permiso input { width: 14px; height: 14px; accent-color: var(--marca-primario); }
.casilla-permiso:hover { border-color: var(--marca-acento); }
.casilla-permiso:has(input:checked) {
  border-color: var(--marca-primario);
  background: var(--info-fondo);
  color: var(--marca-secundario);
  font-weight: 600;
}
.casilla-permiso:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.casilla-permiso.es-sensible:has(input:checked) { border-color: var(--aviso); background: var(--aviso-fondo); color: var(--aviso); }
.casilla-permiso abbr {
  font-weight: 700;
  color: var(--aviso);
  text-decoration: none;
  cursor: help;
  font-size: .9rem;
  line-height: 1;
}

/* =====================================================================
   Firma
   ===================================================================== */

.firma-actual {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linea-suave);
  background: var(--fondo-suave);
}
.firma-actual-imagen {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 8px 14px;
}
.firma-actual-imagen img { display: block; max-height: 70px; max-width: 260px; object-fit: contain; }
.firma-actual-datos { display: flex; flex-direction: column; gap: 3px; }
.firma-actual-datos b { font-size: .92rem; }
.firma-actual-datos p { font-size: .82rem; color: var(--texto-tenue); }
.firma-borrar { margin-top: 4px; }

.pestanas-internas { margin-bottom: 14px; }
.pestanas-internas .pestana {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
}

.panel-firma { display: flex; flex-direction: column; gap: 10px; }

.lienzo-firma-caja {
  position: relative;
  background: var(--blanco);
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
#lienzo-firma {
  display: block;
  width: 100%;
  height: 220px;
  cursor: crosshair;
  touch-action: none;
}
/* Línea de referencia, como en un formulario de papel. */
.lienzo-firma-linea {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 52px;
  height: 1px;
  background: var(--linea);
  pointer-events: none;
}
.lienzo-firma-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  #lienzo-firma { height: 170px; }
  .lienzo-firma-linea { bottom: 40px; }
}

/* =====================================================================
   Catálogos e importación
   ===================================================================== */

.catalogo-ultima { font-size: .8rem; color: var(--texto-tenue); }
.celda-codigo { font-family: var(--mono); font-size: .84rem; white-space: nowrap; }

.asistente { display: flex; flex-direction: column; gap: 4px; }

.asistente-pasos {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  flex-wrap: wrap;
}
.asistente-paso {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .86rem;
  color: var(--texto-tenue);
  background: var(--superficie);
}
.asistente-paso span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fondo-suave);
  color: var(--texto-tenue);
  font-size: .76rem;
  font-weight: 700;
  flex: 0 0 22px;
}
.asistente-paso.es-activo {
  border-color: var(--marca-primario);
  color: var(--marca-secundario);
  font-weight: 600;
}
.asistente-paso.es-activo span { background: var(--marca-primario); color: #fff; }
.asistente-paso.es-hecho { border-color: var(--exito); color: var(--exito); }
.asistente-paso.es-hecho span { background: var(--exito); color: #fff; }

.tabla-mapeo td:first-child { width: 34%; }
.tabla-mapeo select { width: 100%; font: inherit; padding: 7px 9px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.celda-ejemplo {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--texto-tenue);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progreso-caja { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.progreso {
  height: 10px;
  background: var(--fondo-suave);
  border-radius: 999px;
  overflow: hidden;
}
.progreso-barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--marca-primario);
  border-radius: 999px;
  transition: width .25s ease;
}
.progreso.es-fallida .progreso-barra { background: var(--error); }
.progreso-texto { font-size: .9rem; color: var(--texto-medio); }

.progreso-cifras { display: flex; gap: 28px; margin: 0; flex-wrap: wrap; }
.progreso-cifras > div { display: flex; flex-direction: column; gap: 2px; }
.progreso-cifras dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); font-weight: 600; margin: 0;
}
.progreso-cifras dd {
  margin: 0; font-size: 1.3rem; font-weight: 700;
  color: var(--marca-secundario); font-variant-numeric: tabular-nums;
}

.importacion-errores {
  margin: 0 18px 18px;
  padding: 14px 16px;
  background: var(--aviso-fondo);
  border-left: 3px solid var(--aviso);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: .85rem;
}
.importacion-errores ul {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* =====================================================================
   Listas del sistema
   ===================================================================== */

.rejilla-listas {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) { .rejilla-listas { grid-template-columns: minmax(0, 1fr); } }

.celda-nota { font-size: .8rem; color: var(--texto-tenue); margin-top: 3px; line-height: 1.4; }
.texto-tenue { color: var(--texto-tenue); }
.fila-inactiva { opacity: .6; }
.fila-inactiva td b { font-weight: 500; }

.formulario-en-linea { display: inline; }
.acciones-en-linea { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.volver-listado { margin-top: 16px; font-size: .88rem; }

/* =====================================================================
   Auditoría
   ===================================================================== */

.tira-integridad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--marca-primario);
  border-radius: var(--radio);
  margin-bottom: 14px;
}
.tira-integridad b { font-size: .94rem; }
.tira-integridad p { font-size: .82rem; color: var(--texto-tenue); margin-top: 3px; max-width: 78ch; }

.filtros-auditoria { gap: 8px; }
.filtros-auditoria .campo-fecha { min-width: 0; flex: 0 0 auto; }
.filtros-auditoria .campo-fecha label {
  font-size: .7rem;
  color: var(--texto-tenue);
  font-weight: 600;
  margin-bottom: 2px;
}
.filtros-auditoria input[type="date"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
}

.tabla-auditoria td { vertical-align: top; }
.celda-momento {
  font-family: var(--mono);
  font-size: .8rem;
  white-space: nowrap;
  color: var(--texto-medio);
}

/* --- Panel lateral de detalle --- */

.panel-detalle {
  position: fixed;
  inset: 0;
  background: rgba(16, 32, 45, .45);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}
.panel-detalle-caja {
  width: min(520px, 100%);
  background: var(--superficie);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-alta);
}
.panel-detalle-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
}
.panel-detalle-encabezado h2 { font-size: 1.05rem; }
.panel-detalle-cerrar {
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 0 4px;
}
.panel-detalle-cerrar:hover { color: var(--texto); }
.panel-detalle-cuerpo { padding: 4px 0 24px; overflow-y: auto; flex: 1; }
.panel-detalle-cuerpo h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
  padding: 18px 20px 6px;
}
.panel-detalle-cuerpo .lista-datos > div { grid-template-columns: 140px minmax(0, 1fr); padding: 9px 20px; }
.panel-detalle-cuerpo dd { font-size: .86rem; word-break: break-word; }

/* =====================================================================
   Agendas
   ===================================================================== */

.rejilla-agendas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.tarjeta-agenda {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tarjeta-agenda-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tarjeta-agenda-encabezado h2 { font-size: 1.02rem; }
.tarjeta-agenda-profesional { font-size: .85rem; color: var(--texto-medio); margin-top: 2px; }

.tarjeta-agenda-datos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.tarjeta-agenda-datos > div { display: flex; flex-direction: column; min-width: 0; }
.tarjeta-agenda-datos dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); font-weight: 600; margin: 0;
}
.tarjeta-agenda-datos dd {
  margin: 0; font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tarjeta-agenda-cifras {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--linea-suave);
  font-size: .84rem;
  color: var(--texto-medio);
}
.tarjeta-agenda-cifras b { font-size: 1.05rem; color: var(--marca-secundario); font-variant-numeric: tabular-nums; }
.tarjeta-agenda-generada { margin-left: auto; font-size: .78rem; color: var(--texto-tenue); }

.tarjeta-agenda-aviso {
  font-size: .82rem;
  color: var(--aviso);
  background: var(--aviso-fondo);
  border-radius: var(--radio-chico);
  padding: 7px 11px;
}
.tarjeta-agenda-pie { display: flex; justify-content: flex-end; }

.grupo-dias { border: 0; padding: 0; margin: 0; }
.grupo-dias legend {
  font-size: .84rem; font-weight: 600; color: var(--texto-medio); padding: 0; margin-bottom: 7px;
}
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; }

.rejilla-campos-plana { padding: 0; }
.cifras-cupos { padding: 16px 18px 0; }
.cifras-cupos dd.cifra-texto { font-size: .9rem; font-weight: 500; color: var(--texto-medio); }

/* =====================================================================
   Citas
   ===================================================================== */

.celda-hora { font-variant-numeric: tabular-nums; font-size: .95rem; }

.resultados-busqueda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  max-height: 280px;
  overflow-y: auto;
  background: var(--blanco);
}
.resultado-paciente {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea-suave);
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--texto);
}
.resultado-paciente:last-child { border-bottom: 0; }
.resultado-paciente:hover { background: var(--info-fondo); }
.resultado-paciente small { color: var(--texto-tenue); font-size: .8rem; }
.resultado-vacio { padding: 14px; font-size: .86rem; color: var(--texto-tenue); }

.paciente-elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--info-fondo);
  border-left: 3px solid var(--marca-primario);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.paciente-elegido b { font-size: .96rem; }
.paciente-elegido p { font-size: .84rem; color: var(--texto-medio); margin-top: 2px; }

.lista-cupos { display: flex; flex-direction: column; gap: 16px; }
.grupo-cupos h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  margin-bottom: 8px;
}
.horas-cupos { display: flex; flex-wrap: wrap; gap: 8px; }
.cupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: pointer;
  font: inherit;
  color: var(--texto);
  transition: border-color .12s, background-color .12s;
}
.cupo:hover { border-color: var(--marca-acento); }
.cupo b { font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cupo small {
  font-size: .72rem;
  color: var(--texto-tenue);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cupo.es-elegido {
  border-color: var(--marca-primario);
  background: var(--marca-primario);
  color: #fff;
}
.cupo.es-elegido small { color: rgba(255, 255, 255, .82); }

/* =====================================================================
   Ficha del paciente: consentimientos
   ===================================================================== */

.consentimientos-pendientes { display: flex; flex-direction: column; gap: 1px; }

.consentimiento { border-top: 1px solid var(--linea-suave); }
.consentimiento summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.consentimiento summary::-webkit-details-marker { display: none; }
.consentimiento summary::before {
  content: "▸";
  float: right;
  color: var(--texto-tenue);
  font-size: .9rem;
}
.consentimiento[open] summary::before { content: "▾"; }
.consentimiento summary:hover { background: var(--fondo-suave); }
.consentimiento-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.consentimiento summary small { color: var(--texto-tenue); font-size: .82rem; }

.texto-legal {
  background: var(--fondo-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  padding: 16px 18px;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--texto-medio);
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-line;
}

/* Redacción de textos legales: el área jurídica trabaja con documentos largos. */
.texto-largo {
  min-height: 420px;
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.6;
}

/* =====================================================================
   Separación de grandes secciones dentro de una pantalla

   La ficha del paciente encadena cuatro partes que se guardan por
   separado. Sin un corte visible se leen como una sola lista larga.
   ===================================================================== */

.titulo-seccion {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--marca-secundario);
  margin: 30px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--marca-primario);
  display: flex;
  align-items: center;
  gap: 10px;
}
.titulo-seccion:first-child { margin-top: 4px; }

/* Dentro de un bloque, el encabezado pasa a h3: la jerarquía la marca
   el título de sección, no cada tarjeta. */
.bloque-encabezado h3 {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Los formularios de "agregar" se distinguen del listado que tienen encima. */
.bloque-agregar {
  border-top: 1px solid var(--linea);
  background: var(--fondo-suave);
  padding-top: 16px;
}
.bloque-agregar-titulo {
  font-size: .88rem;
  font-weight: 700;
  color: var(--texto-medio);
}

/* El bloque de pendientes se separa del de firmados con un borde propio. */
.bloque-pendientes { border-left: 3px solid var(--aviso); }

/* =====================================================================
   Historia clínica

   La consulta es la pantalla donde más tiempo pasa el profesional, así
   que se organiza en dos columnas: a la izquierda se escribe, a la
   derecha está el contexto que necesita mirar sin perder el hilo.
   ===================================================================== */

/* --- Encabezado del paciente --------------------------------------- */

.encabezado-paciente {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.25rem;
  align-items: start;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--marca-primario);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.encabezado-paciente-alerta { border-left-color: var(--error); }

.encabezado-paciente-identidad h2 { margin: 0; font-size: 1.15rem; }
.encabezado-paciente-identidad h2 a { color: inherit; text-decoration: none; }
.encabezado-paciente-identidad h2 a:hover { text-decoration: underline; }

.encabezado-paciente-identidad p {
  margin: .2rem 0 0;
  color: var(--texto-medio);
  font-size: .85rem;
}

.encabezado-paciente-estado {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  justify-content: flex-end;
}

.encabezado-paciente-alergias {
  grid-column: 1 / -1;
  margin: 0;
  padding: .5rem .7rem;
  background: var(--error-fondo);
  color: var(--error);
  border-radius: var(--radio-chico);
  font-size: .85rem;
}

/* --- Dos columnas --------------------------------------------------- */

.consulta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: start;
}

.consulta-principal { min-width: 0; }

.consulta-contexto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: calc(var(--encabezado-alto) + 1rem);
}

@media (max-width: 1100px) {
  .consulta { grid-template-columns: minmax(0, 1fr); }
  .consulta-contexto { position: static; }
}

.tarjeta-contexto {
  padding: .9rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta-contexto h3 {
  margin: 0 0 .6rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
}

.tarjeta-contexto ul { margin: 0; padding: 0; list-style: none; }

.tarjeta-contexto li {
  padding: .4rem 0;
  border-top: 1px solid var(--linea-suave);
  font-size: .85rem;
  line-height: 1.35;
}

.tarjeta-contexto li:first-child { border-top: 0; }

/* Últimos valores: el número manda, el nombre acompaña. */

.lista-valores li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .5rem;
}

.valor-nombre { color: var(--texto-medio); }

.valor-numero {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.valor-numero small {
  margin-left: .15rem;
  font-weight: 400;
  color: var(--texto-tenue);
}

.valor-tendencia { margin-left: .2rem; color: var(--texto-tenue); }

.valor-fecha {
  grid-column: 1 / -1;
  color: var(--texto-tenue);
  font-size: .75rem;
}

.lista-valores .valor-alerta .valor-numero { color: var(--error); }
.lista-antecedentes .valor-alerta { color: var(--error); }

.lista-problemas .celda-codigo { margin-right: .3rem; }

.lista-historial li a { font-weight: 600; }

/* --- Bandeja de atención -------------------------------------------- */

.lista-atencion {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.tarjeta-atencion {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--marca-acento);
  border-radius: var(--radio);
}

.tarjeta-atencion-cerrada {
  border-left-color: var(--exito);
  background: var(--fondo-suave);
}

.tarjeta-atencion-hora {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta-atencion-paciente h3 { margin: 0; font-size: .98rem; }
.tarjeta-atencion-paciente h3 a { color: inherit; text-decoration: none; }
.tarjeta-atencion-paciente h3 a:hover { text-decoration: underline; }

.tarjeta-atencion-datos {
  margin: .15rem 0 0;
  color: var(--texto-medio);
  font-size: .82rem;
}

.tarjeta-atencion-alerta {
  margin: .25rem 0 0;
  color: var(--error);
  font-size: .8rem;
  font-weight: 600;
}

.formulario-abrir {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.selector-plantilla { max-width: 14rem; }

@media (max-width: 760px) {
  .tarjeta-atencion { grid-template-columns: minmax(0, 1fr); }
  .formulario-abrir { flex-wrap: wrap; }
}

/* --- Campos de la plantilla ----------------------------------------- */

.campo-unidad {
  margin-left: .25rem;
  color: var(--texto-tenue);
  font-weight: 400;
  font-size: .78rem;
}

.campo-calculado label { color: var(--texto-medio); }

.campo-resultado {
  display: block;
  padding: .45rem .6rem;
  background: var(--fondo-suave);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-chico);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
}

.campo-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
}

/* --- Diagnósticos ---------------------------------------------------- */

.buscador-diagnostico { position: relative; margin-bottom: .75rem; }

.resultados-diagnostico {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}

.resultado-diagnostico {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .5rem;
  padding: .45rem .7rem;
  cursor: pointer;
  font-size: .85rem;
  border-top: 1px solid var(--linea-suave);
}

.resultado-diagnostico:first-child { border-top: 0; }
.resultado-diagnostico:hover { background: var(--info-fondo); }

.resultado-vacio {
  padding: .6rem .7rem;
  color: var(--texto-tenue);
  font-size: .85rem;
}

/* --- Cierre y notas aclaratorias ------------------------------------------------ */

.bloque-cierre { border-left: 3px solid var(--marca-primario); }

.barra-acciones-fija {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -2px 10px rgba(16, 32, 45, .06);
}

.titulo-seccion-nota {
  margin-left: .4rem;
  color: var(--texto-tenue);
  font-weight: 400;
  font-size: .8rem;
}

.lista-notas-aclaratorias {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.nota-aclaratoria {
  padding: .7rem .9rem;
  background: var(--fondo-suave);
  border-left: 3px solid var(--aviso);
  border-radius: var(--radio-chico);
}

.nota-aclaratoria-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}

.nota-aclaratoria-encabezado small { color: var(--texto-tenue); }

.nota-aclaratoria-motivo, .nota-aclaratoria-contenido { margin: .4rem 0 0; font-size: .88rem; }

/* Una tabla de cifras se lee comparando columnas: los numeros van alineados
   a la derecha y con ancho fijo por digito, y la fila de totales se despega. */
.tabla-numerica td:not(:first-child),
.tabla-numerica th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabla-numerica tfoot th {
  border-top: 2px solid var(--linea);
  background: var(--fondo-suave);
  font-weight: 700;
}

/* Una orden que hay que copiar y pegar en otro sitio: se muestra tal cual,
   monoespaciada, y se desplaza de lado en vez de partirse. */
/* Un documento largo se lee desplazandose dentro de su caja, no estirando
   la pagina hasta que la barra de acciones quede a un kilometro. */
.bloque-codigo-alto {
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bloque-codigo {
  margin: 12px 18px;
  padding: 12px 14px;
  background: var(--fondo-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-chico);
  font-family: var(--mono);
  font-size: .82rem;
  overflow-x: auto;
  white-space: pre;
}

/* Lo que le falta a una atencion para poder reportarse en RIPS. Es una
   lista de tareas, no un volcado de errores: se lee entera de un vistazo. */
.lista-faltantes {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .84rem;
  color: var(--error);
  line-height: 1.5;
}
.lista-faltantes li + li { margin-top: 3px; }

.nota-pie {
  margin: 18px 0 0;
  font-size: .84rem;
  color: var(--texto-tenue);
  line-height: 1.6;
  max-width: 78ch;
}

/* =====================================================================
   Resultado de probar un proveedor de teleconsulta

   Cada comprobacion con su explicacion: «no funciona» no le sirve a nadie,
   hay que decir cual de los pasos fallo.
   ===================================================================== */

.prueba-resultado {
  margin: 0 18px 16px;
  padding: 14px 16px;
  background: var(--fondo-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
}

.prueba-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.prueba-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prueba-pasos li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 8px;
  align-items: start;
  font-size: .88rem;
  line-height: 1.5;
}
.prueba-pasos li b    { grid-column: 2; }
.prueba-pasos li span { grid-column: 2; color: var(--texto-medio); }

/* La marca va en la primera columna y ocupa las dos filas. */
.prueba-pasos li::before {
  grid-row: 1 / span 2;
  font-weight: 700;
  line-height: 1.5;
}
.prueba-pasos li.es-ok::before    { content: "¹3"; color: var(--exito); }
.prueba-pasos li.es-falla::before { content: "¹7"; color: var(--error); }
.prueba-pasos li.es-falla b       { color: var(--error); }

.prueba-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linea-suave);
}

/* =====================================================================
   Tablero: tarjetas que llevan a alguna parte

   Una cifra sobre la que no se puede actuar sobra. Cada tarjeta es un
   enlace, y el tono dice si hay algo que atender: `alerta` es lo que ya
   se incumplio, `aviso` lo que se incumple pronto. Si todo estuviera
   siempre en neutro, el color dejaria de significar algo.
   ===================================================================== */

.tarjeta-enlace {
  text-decoration: none;
  color: inherit;
  transition: box-shadow .12s ease, transform .12s ease;
}
.tarjeta-enlace:hover {
  box-shadow: 0 4px 16px rgba(16, 32, 45, .12);
  transform: translateY(-1px);
}
.tarjeta-enlace:focus-visible {
  outline: 2px solid var(--marca-primario);
  outline-offset: 2px;
}

/* El borde lateral es lo que se ve de reojo al entrar. */
.tarjeta-dato.es-aviso  { border-left: 3px solid var(--aviso); }
.tarjeta-dato.es-alerta { border-left: 3px solid var(--error); }
.tarjeta-dato.es-alerta .tarjeta-valor { color: var(--error); }
.tarjeta-dato.es-aviso  .tarjeta-valor { color: var(--aviso); }

/* Una fila que reclama atencion en una tabla del tablero. */
.fila-destacada { background: var(--aviso-fondo); }

/* --- Listas de pendientes ------------------------------------------ */

.lista-pendientes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pendiente {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--linea-suave);
  border-left: 3px solid transparent;
}
.pendiente:last-child { border-bottom: 0; }
.pendiente.es-urgente { border-left-color: var(--error); background: var(--error-fondo); }

.pendiente-cuerpo { flex: 1 1 200px; min-width: 0; }
.pendiente-cuerpo b { display: block; font-size: .95rem; }
.pendiente-cuerpo small { display: block; color: var(--texto-tenue); font-size: .82rem; margin-top: 2px; }
.pendiente-alerta { color: var(--error) !important; font-weight: 600; }

.pendiente-lado {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =====================================================================
   Solicitudes de cita llegadas del portal
   ===================================================================== */

.solicitudes { display: flex; flex-direction: column; gap: 16px; }

.solicitud.es-demorada { border-left: 3px solid var(--error); }

.solicitud-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea-suave);
}
.solicitud-encabezado h2 { margin: 0; font-size: 1rem; }
.solicitud-encabezado p { margin: 3px 0 0; color: var(--texto-tenue); font-size: .84rem; }

.solicitud-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Los datos y el texto del paciente necesitan el margen del contenido
   suelto: .bloque no trae relleno propio. */
.solicitud > .datos-ficha { margin: 14px 18px; }

/* --- Filtros de una sola linea -------------------------------------- */

.filtros-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtro-rapido {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto-medio);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.filtro-rapido:hover { border-color: var(--marca-primario); color: var(--marca-primario); }
.filtro-rapido.es-activo {
  background: var(--marca-primario);
  border-color: var(--marca-primario);
  color: #fff;
}

/* =====================================================================
   Sala de videollamada

   Por aqui entra un paciente que puede no tener cuenta, desde el telefono,
   con prisa y a veces preocupado. Una sola tarjeta centrada, y el boton de
   entrar del tamaño de un pulgar.
   ===================================================================== */

.pagina-sala {
  background: var(--marca-secundario);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sala { width: 100%; max-width: 520px; }

.sala-marca { text-align: center; margin-bottom: 18px; }
.sala-marca img { max-height: 46px; width: auto; }
.sala-marca b { color: #fff; font-size: 1.1rem; }

.sala-tarjeta {
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 28px 26px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.sala-etiqueta {
  margin: 0;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-tenue);
}

.sala-tarjeta h1 { margin: 6px 0 0; font-size: 1.3rem; line-height: 1.3; }
.sala-cuando { margin: 6px 0 18px; color: var(--texto-medio); }

.sala-clave {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--fondo-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio-chico);
  text-align: center;
}
.sala-clave p { margin: 0 0 4px; font-size: .85rem; color: var(--texto-medio); }
.sala-clave b {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: .18em;
  color: var(--marca-primario);
}

/* Del tamaño de un pulgar: mucha gente entra desde el telefono. */
.sala-boton {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 1.05rem;
}

.sala-consejos {
  margin: 20px 0 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--texto-medio);
}
.sala-consejos li + li { margin-top: 6px; }

.sala-nota {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linea-suave);
  font-size: .84rem;
  color: var(--texto-tenue);
  line-height: 1.6;
}

.sala-pie {
  margin-top: 16px;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  font-size: .86rem;
}
.sala-pie p { margin: 0; }

/* =====================================================================
   Portal del paciente

   No es una variante del panel: es otra casa. Sin barra lateral, con una
   sola columna centrada, tipografia algo mayor y mas aire. Quien lee esto
   no trabaja aqui ocho horas: entra dos veces al año, muchas veces desde
   el telefono, a veces preocupado.
   ===================================================================== */

.pagina-portal {
  background: var(--fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-cabecera {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}

.portal-cabecera-interior,
.portal-menu-interior,
.portal-pie-interior {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px;
}

.portal-cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.portal-marca { display: flex; align-items: center; text-decoration: none; }
.portal-marca img { max-height: 38px; width: auto; }
.portal-marca-texto {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--marca-secundario);
}

/* El menu es una fila que se desplaza de lado en pantallas angostas, en
   vez de apilarse: cinco secciones caben, y un menu hamburguesa aqui seria
   un obstaculo mas para quien no usa la aplicacion a diario. */
.portal-menu { border-top: 1px solid var(--linea-suave); }

.portal-menu-interior {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.portal-menu-interior::-webkit-scrollbar { display: none; }

.portal-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--texto-medio);
  font-size: .92rem;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.portal-opcion:hover { color: var(--marca-secundario); }
.portal-opcion.es-activa {
  color: var(--marca-primario);
  border-bottom-color: var(--marca-primario);
}
.portal-icono { width: 18px; height: 18px; flex: none; }

.portal-contenido {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.portal-titulos { margin-bottom: 20px; }
.portal-titulos h1 { margin: 0; font-size: 1.5rem; }
.portal-titulos p { margin: 4px 0 0; color: var(--texto-medio); }

.portal-seccion {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marca-secundario);
  margin: 28px 0 12px;
}

.portal-panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra);
}

.portal-panel + .portal-panel { margin-top: 14px; }
.portal-panel-respuesta { border-left: 3px solid var(--marca-primario); }

.portal-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.portal-vacio { margin: 0; font-size: 1rem; }
.portal-nota {
  margin: 10px 0 0;
  color: var(--texto-tenue);
  font-size: .88rem;
  line-height: 1.6;
}

/* --- La proxima cita, que es a lo que se entra --------------------- */

.portal-destacado {
  background: var(--marca-secundario);
  color: #fff;
  border-radius: var(--radio);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.portal-destacado-etiqueta {
  margin: 0;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
}
.portal-destacado-titular { margin: 6px 0 0; font-size: 1.5rem; font-weight: 700; }
.portal-destacado-detalle { margin: 4px 0 0; opacity: .92; }
.portal-destacado .boton { margin-top: 14px; }
.portal-destacado .boton-plano { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.portal-destacado .boton-plano:hover { background: rgba(255, 255, 255, .26); }
.portal-destacado .boton-principal { background: #fff; color: var(--marca-secundario); border-color: #fff; }

.portal-preparacion {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, .14);
  font-size: .88rem;
}
/* Fuera del bloque oscuro la misma nota necesita su propio fondo. */
.portal-cita .portal-preparacion {
  background: var(--aviso-fondo);
  color: var(--aviso);
}

/* --- Tarjetas del inicio ------------------------------------------- */

.portal-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.portal-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--sombra);
}
.portal-tarjeta h2 { margin: 0; font-size: 1rem; color: var(--marca-secundario); }
.portal-tarjeta-vacia { margin: 0; color: var(--texto-medio); font-size: .9rem; line-height: 1.6; }
.portal-tarjeta-cifra {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--marca-primario);
}
/* El boton se pega abajo para que todas las tarjetas lo tengan a la misma
   altura aunque su texto sea de largo distinto. */
.portal-tarjeta .boton { margin-top: auto; align-self: flex-start; }

.portal-lista-simple { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.portal-lista-simple b { display: block; font-size: .92rem; }
.portal-lista-simple small { color: var(--texto-tenue); font-size: .82rem; }

/* --- Citas --------------------------------------------------------- */

.portal-citas { display: flex; flex-direction: column; gap: 12px; }

.portal-cita {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--marca-primario);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
.portal-cita.es-cancelada { border-left-color: var(--linea); opacity: .72; }

.portal-cita-fecha {
  flex: none;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-cita-fecha b { font-size: .98rem; }
.portal-cita-fecha span { font-size: 1.35rem; font-weight: 700; color: var(--marca-primario); }

.portal-cita-cuerpo { flex: 1 1 220px; min-width: 0; }
.portal-cita-cuerpo h3 { margin: 0; font-size: 1rem; }
.portal-cita-cuerpo p { margin: 3px 0 0; color: var(--texto-medio); font-size: .9rem; }
.portal-cita-donde { color: var(--texto-tenue) !important; }

.portal-cita-lado {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* --- Fichas (formulas, resultados, solicitudes) --------------------- */

.portal-fichas { display: flex; flex-direction: column; gap: 12px; }

.portal-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
.portal-ficha.es-apagada { opacity: .68; }

.portal-ficha-cuerpo { flex: 1 1 240px; min-width: 0; }
.portal-ficha-cuerpo h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.portal-ficha-cuerpo p { margin: 3px 0 0; color: var(--texto-medio); font-size: .9rem; }
.portal-ficha-detalle { color: var(--texto-tenue) !important; font-size: .84rem !important; }

.portal-ficha-lado {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portal-encabezado-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.portal-encabezado-ficha h2 { margin: 0; font-size: 1.1rem; }
.portal-encabezado-ficha p { margin: 3px 0 0; color: var(--texto-tenue); font-size: .88rem; }

/* --- Listas simples ------------------------------------------------ */

.portal-lista { margin: 0; padding: 0; list-style: none; }

.portal-lista-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea-suave);
}
.portal-lista-fila:last-child { border-bottom: 0; }
.portal-lista-fila:first-child { padding-top: 0; }
.portal-lista-fila b { display: block; font-size: .95rem; }
.portal-lista-fila small { color: var(--texto-tenue); font-size: .84rem; }
.portal-lista-nota { margin: 6px 0 0; font-size: .88rem; color: var(--texto-medio); }

/* --- Pie ----------------------------------------------------------- */

.portal-pie {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}
.portal-pie-interior {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--texto-tenue);
  font-size: .84rem;
}

/* Dentro del portal el formulario y sus acciones ya viven en un panel
   propio, asi que la barra no necesita el fondo pegajoso del panel. */
.pagina-portal .barra-acciones {
  position: static;
  box-shadow: none;
  background: transparent;
  border: 0;
  padding: 16px 0 0;
}

@media (max-width: 640px) {
  .portal-cita-lado, .portal-ficha-lado { align-items: flex-start; width: 100%; }
  .portal-destacado-titular { font-size: 1.25rem; }
  .menu-usuario-nombre { display: none; }
}

/* =====================================================================
   Bitacora de una PQRF

   Cada paso dice si el peticionario lo puede leer. Esa distincion no es
   decorativa: quien escribe tiene que ver, sin buscarlo, hacia donde va
   lo que esta escribiendo.
   ===================================================================== */

.bitacora {
  list-style: none;
  margin: 14px 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.bitacora-paso {
  padding: .7rem .9rem;
  background: var(--fondo-suave);
  border-left: 3px solid var(--linea);
  border-radius: var(--radio-chico);
}

/* Lo que sale hacia el usuario se marca con el color de la marca. */
.bitacora-paso.es-visible { border-left-color: var(--marca-primario); }

.bitacora-encabezado {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}

.bitacora-encabezado small { color: var(--texto-tenue); }

.bitacora-texto {
  margin: .4rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* --- Tendencias ------------------------------------------------------ */

.rejilla-graficas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.grafica {
  margin: 0;
  padding: .7rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.grafica figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .85rem;
}

.grafica-ultimo {
  font-variant-numeric: tabular-nums;
  color: var(--marca-primario);
  font-weight: 600;
}

.grafica-lienzo {
  display: block;
  width: 100%;
  height: 64px;
  margin: .5rem 0 .3rem;
  overflow: visible;
}

.grafica-lienzo polyline {
  fill: none;
  stroke: var(--marca-acento);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafica-escala {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  color: var(--texto-tenue);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Diálogo de confirmación

   Reemplaza confirm() y prompt() del navegador. Se dibuja por encima de
   todo lo demás, incluido el aviso de fin de sesión.
   ===================================================================== */

.dialogo-velo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 32, 45, .45);
}

.dialogo {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px 22px;
  background: var(--superficie);
  border-radius: var(--radio);
  border-top: 3px solid var(--marca-primario);
  box-shadow: var(--sombra-alta);
}

.dialogo-peligro { border-top-color: var(--error); }
.dialogo-aviso   { border-top-color: var(--aviso); }
.dialogo-info    { border-top-color: var(--info); }

.dialogo-titulo {
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.35;
}

.dialogo-mensaje {
  margin: 0;
  color: var(--texto-medio);
  font-size: .9rem;
  line-height: 1.55;
}

/* Un enlace que hay que copiar: monoespaciado, entero seleccionable, y sin
   partirse en dos lineas donde no se ve donde acaba. */
.dialogo-enlace {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--texto);
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.dialogo-enlace:focus {
  outline: 2px solid var(--marca-acento);
  outline-offset: 1px;
}

.dialogo-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
}

.dialogo-campo label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-medio);
}

.dialogo-campo textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: .9rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  resize: vertical;
}

.dialogo-campo textarea:focus {
  outline: 2px solid var(--marca-acento);
  outline-offset: 1px;
  border-color: var(--marca-acento);
}

.dialogo-error {
  color: var(--error);
  font-size: .8rem;
}

.dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* El botón de una acción destructiva no debe parecerse al de guardar. */
.boton-peligro {
  background: var(--error);
  border-color: var(--error);
  color: var(--blanco);
}

.boton-peligro:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: no-preference) {
  .dialogo { animation: dialogo-entra .12s ease-out; }
}

@keyframes dialogo-entra {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* --- Medicamentos de una formulación ---------------------------------- */

.lista-medicamentos {
  margin: 0 0 1rem;
  padding: 0 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.medicamento {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .7rem .9rem;
  background: var(--fondo-suave);
  border-left: 3px solid var(--marca-acento);
  border-radius: var(--radio-chico);
}

.medicamento-cuerpo { min-width: 0; }

.medicamento-nombre { margin: 0; font-size: .95rem; }

.medicamento-pauta {
  margin: .2rem 0 0;
  color: var(--texto-medio);
  font-size: .85rem;
}

.medicamento-indicaciones {
  margin: .3rem 0 0;
  font-size: .84rem;
  color: var(--texto);
}

/* --- Texto clínico largo y datos de una interconsulta ------------------ */

.parrafo-clinico {
  margin: .3rem 0 1rem;
  font-size: .92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.datos-interconsulta,
.datos-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem 1.2rem;
  margin: 0 0 1rem;
}

.datos-interconsulta dt,
.datos-ficha dt {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
}

.datos-interconsulta dd,
.datos-ficha dd { margin: 0; font-size: .9rem; font-weight: 600; }

/* --- Acciones dentro de un bloque de la consulta ----------------------- */

.acciones-bloque {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  /* El relleno lateral despega los botones del borde del bloque; el borde
     inferior sí cruza de lado a lado, porque separa dos zonas. */
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea-suave);
}

.acciones-bloque-nota {
  color: var(--texto-tenue);
  font-size: .82rem;
}

/* =====================================================================
   Contenido suelto dentro de un bloque

   .bloque no tiene relleno propio: lo aportan sus hijos —el encabezado, la
   envoltura de la tabla, el formulario, el estado vacío—. Lo que se ponga
   directamente dentro sin una de esas envolturas queda pegado al borde.

   Se resuelve con margen, no con relleno, para que dos párrafos seguidos
   colapsen su separación en vez de sumarla.
   ===================================================================== */

.bloque > p,
.bloque > h3,
.bloque > ul,
.bloque > ol,
.bloque > dl,
.bloque > small {
  margin: 14px 18px;
}

/* Un formulario suelto —«Emitir y firmar», «Anular», «Cerrar»— es en línea
   por defecto, y así el margen vertical no le haría nada. */
.bloque > .formulario-en-linea,
.bloque > .buscador-diagnostico {
  display: block;
  margin: 14px 18px;
}

/* Un encabezado seguido de su párrafo no necesita doble separación. */
.bloque > h3 + p { margin-top: -8px; }

/* --- Archivos elegidos para cargar ------------------------------------ */

.documento-elegido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem auto;
  gap: .4rem .6rem;
  align-items: center;
  padding: .6rem .7rem;
  margin-top: .4rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}

.documento-elegido-archivo {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--texto-tenue);
  word-break: break-all;
}

@media (max-width: 700px) {
  .documento-elegido { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Cajón de vista previa

   Panel lateral para mirar un documento sin salir de la pantalla. Se abre
   por encima de todo salvo del diálogo de confirmación, que sí puede
   aparecer sobre él.
   ===================================================================== */

.cajon-velo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 32, 45, .38);
  opacity: 0;
  transition: opacity .18s ease;
}
.cajon-velo.esta-abierto { opacity: 1; }

.cajon {
  position: fixed;
  z-index: 81;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(760px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  transform: translateX(100%);
  transition: transform .18s ease;
}
.cajon.esta-abierto { transform: translateX(0); }

.cajon-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea);
}

.cajon-titulos { min-width: 0; }
.cajon-titulo { margin: 0; font-size: 1rem; }
.cajon-nota { margin: 2px 0 0; font-size: .82rem; color: var(--texto-tenue); }

/* Solo la equis del encabezado. El botón «Cerrar» del pie es un botón
   normal del sistema y no lleva esta clase: si la llevara, este tamaño y
   este gris le pisarían el estilo. */
.cajon-cerrar {
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}
.cajon-cerrar:hover { color: var(--texto); }

.cajon-cuerpo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--fondo-suave);
}

.cajon-marco {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--fondo-suave);
}

.cajon-imagen {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.cajon-sin-vista {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--texto-medio);
}
.cajon-sin-vista-nota { color: var(--texto-tenue); font-size: .85rem; }

.cajon-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--linea);
}

/* Nada dentro del cajón debe empujar de lado: si algo no cabe, se envuelve
   o se desplaza dentro de su propia caja, no arrastrando el panel entero. */
.cajon, .cajon-cuerpo { overflow-x: hidden; }

/* El diálogo de confirmación debe poder aparecer sobre el cajón. */
.dialogo-velo { z-index: 90; }
.dialogo { z-index: 91; }

@media print {
  .cajon, .cajon-velo { display: none !important; }
}

.documento-elegido-ver { white-space: nowrap; }

@media (max-width: 700px) {
  .documento-elegido-ver { justify-self: start; }
}