/*
 * Estilos propios sobre Bootstrap 5.3 (F1). Archivo propio: la CSP no admite estilos en línea
 * (doc. 04 §3.5). Los colores de la marca llegan en /marca.css como variables (--marca, --bs-primary…).
 * Las clases con nombre en español las usan también las pruebas: no renombrarlas.
 */
:root {
    --fondo: #f3f6f9;
    --borde: #dbe2ea;
    --texto-suave: #5b6876;
    --ancho-lateral: 15.5rem;
}

body { background: var(--fondo); color: #1d2733; }

/* --- Disposición: menú lateral + contenido ------------------------------------------- */
.disposicion { display: flex; flex-direction: column; min-height: 100vh; }
.lateral { background: var(--marca-oscuro); color: #fff; }
.lateral-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; }
.lateral-marca { display: flex; align-items: center; gap: 0.65rem; color: #fff; font-weight: 600; text-decoration: none; line-height: 1.2; }
.lateral-marca:hover { color: #fff; }
.lateral-boton { color: #fff; border-color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; padding: 0.15rem 0.55rem; }
.lateral-boton:hover, .lateral-boton:focus { color: #fff; background: rgba(255, 255, 255, 0.12); }
.lateral-cuerpo { flex-direction: column; justify-content: space-between; flex: 1; padding: 0 0.75rem 1rem; }
.menu .nav-link { display: flex; align-items: center; gap: 0.7rem; color: rgba(255, 255, 255, 0.85); border-radius: 0.5rem; padding: 0.55rem 0.75rem; }
.menu .nav-link .bi { font-size: 1.1rem; }
.menu .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.menu .nav-link.active { color: #fff; background: var(--marca); }
.menu-seccion { margin: 1.25rem 0.75rem 0.35rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.lateral-pie { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 1.5rem; padding: 1rem 0.75rem 0; font-size: 0.9rem; }
.lateral-enlace { display: block; color: rgba(255, 255, 255, 0.85); text-decoration: none; margin-bottom: 0.75rem; }
.lateral-enlace:hover { color: #fff; }
.contenido { flex: 1; min-width: 0; padding: 1.5rem 1rem 3rem; }
.contenido > * { max-width: 1200px; }

@media (min-width: 992px) {
    .disposicion { flex-direction: row; }
    .lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: 0 0 var(--ancho-lateral); display: flex; flex-direction: column; }
    .lateral-cabecera { padding: 1.25rem 1.25rem 1rem; }
    .contenido { padding: 2rem 2.5rem 3rem; }
}

/* Logo o icono de la marca */
.marca-logo { max-height: 2.4rem; max-width: 8rem; object-fit: contain; background: #fff; border-radius: 0.4rem; padding: 0.15rem; }
.marca-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; background: #fff; color: var(--marca); font-size: 1.25rem; }

/* --- Pantallas de acceso (sin menú) --------------------------------------------------- */
.acceso { max-width: 460px; margin: 0 auto; padding: 3rem 1rem; }
.acceso-marca { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; font-size: 1.35rem; font-weight: 600; color: var(--marca-oscuro); text-align: center; }
.acceso-marca .marca-logo { max-height: 4.5rem; max-width: 12rem; }
.acceso-marca .marca-icono { width: 3.5rem; height: 3.5rem; font-size: 2rem; background: var(--marca); color: #fff; }
.contenido-acceso .tarjeta { margin: 0; max-width: none; }

/* --- Tarjetas y encabezados ---------------------------------------------------------- */
h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem; }
.tarjeta { max-width: 460px; margin: 1.5rem auto; padding: 1.5rem; background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.tarjeta h1 { font-size: 1.4rem; }
.tarjeta h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.tarjeta h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.tarjeta form + form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado h1, .encabezado h2 { margin-bottom: 0; }
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.paneles .tarjeta { margin: 0; max-width: none; }
.panel-ancho { grid-column: 1 / -1; }
.tarjeta.panel-ancho { max-width: none; margin: 1rem 0; }
.zona-peligro { border-color: #f1c4c4; }

/* --- Formularios ---------------------------------------------------------------------- */
main form .form-label { margin: 0.75rem 0 0.3rem; font-weight: 500; }
main form > .btn, main form > .fila { margin-top: 1rem; }
/* Formularios de un solo botón dentro de una fila de acciones: alineados con los enlaces vecinos. */
main .acciones form > .btn, main .paginacion form > .btn, main .siguiente form > .btn, main .fila > form > .btn { margin-top: 0; }
.ayuda { color: var(--texto-suave); font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
.casilla { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0.35rem 0; }
.casilla .form-check-input { margin-top: 0; }
.casillas { border: 0; margin: 0.5rem 0 0; padding: 0; }
.casillas legend { font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; }
/* En la ficha, la tarjeta ya se titula "Roles": la leyenda queda solo para lectores de pantalla. */
.paneles .casillas legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fila { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fila .btn { margin-top: 0; }
.fila input[type="search"] { flex: 1; min-width: 12rem; width: auto; }
.busqueda { margin: 1rem 0; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 1rem 0; padding: 1rem; background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; }
.filtros > div { display: flex; flex-direction: column; }
main .filtros .form-label { margin: 0 0 0.3rem; }
.filtros .btn { margin-top: 0; }
.formulario-amplio { max-width: 820px; }
.formulario-amplio fieldset { margin: 0 0 1rem; padding: 1rem 1.25rem 1.25rem; background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; }
.formulario-amplio legend { float: none; width: auto; font-size: 1.05rem; font-weight: 600; padding: 0 0.25rem; margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.rejilla > div { display: flex; flex-direction: column; }
.rejilla-signos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.en-linea { margin: 0; font-weight: 400; }
.canal { padding: 0.6rem 0; border-bottom: 1px solid var(--borde); }
.canal p { margin: 0 0 0.4rem; }
.canal .form-select { width: auto; }
.historial { padding-left: 1.2rem; font-size: 0.9rem; color: var(--texto-suave); }

/* --- Tablas --------------------------------------------------------------------------- */
.tabla { --bs-table-border-color: var(--borde); background: #fff; border: 1px solid var(--borde); margin-bottom: 1rem; }
.tabla > :not(caption) > * > * { padding: 0.65rem 0.85rem; }
.tabla thead th { background: #f7f9fb; color: var(--texto-suave); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tabla .inactivo td { color: var(--texto-suave); }
@media (max-width: 640px) {
    .tabla { display: block; overflow-x: auto; }
}
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
.datos dt { font-weight: 600; color: var(--texto-suave); }
.datos dd { margin: 0; }
.resumen { color: var(--texto-suave); }
.vacio { color: var(--texto-suave); font-style: italic; }
.desplazable { overflow-x: auto; }

/* --- Paginación ------------------------------------------------------------------------ */
.paginacion { display: flex; gap: 0.25rem; margin-top: 1rem; flex-wrap: wrap; }
.paginacion form { display: block; }

/* --- Etiquetas de estado ---------------------------------------------------------------- */
.etiqueta { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; background: var(--marca-suave); color: var(--marca-mas-oscuro); }
.etiqueta-aviso, .estado-en_espera .etiqueta, .estado-en_consulta .etiqueta { background: #fff3cd; color: #664d03; }
.etiqueta-error, .estado-cancelada .etiqueta, .estado-no_asistio .etiqueta { background: #f8d7da; color: #842029; }
.estado-confirmada .etiqueta, .estado-atendida .etiqueta { background: #d1e7dd; color: #0f5132; }
.estado-cancelada td, .estado-no_asistio td { color: var(--texto-suave); }

/* --- Agenda ----------------------------------------------------------------------------- */
.navegacion-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; }
.agenda .hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.agenda .acciones { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.agenda .acciones form { display: inline; }
.agenda tr:target td { background: var(--marca-suave); }
.horario { max-width: 820px; }
.vistas-agenda .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.calendario { background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; padding: 1rem; }
.calendario-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--texto-suave); }
.calendario-leyenda .muestra::before { content: ""; display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; margin-right: 0.35rem; vertical-align: -0.1rem; border: 2px solid; }
.muestra.estado-programada::before { background: #fff3cd; border-color: #b58105; }
.muestra.estado-confirmada::before { background: #dbe8f6; border-color: #185fa5; }
.muestra.estado-en_espera::before { background: #ffe5d0; border-color: #c4661f; }
.muestra.estado-atendida::before { background: #d1e7dd; border-color: #198754; }
.muestra.estado-cancelada::before { background: #f8d7da; border-color: #b02a37; }
.muestra.estado-bloqueo::before { background: #e9ecef; border-color: #6c757d; }
.calendario [class*="cita-"] { cursor: pointer; }
/* Borde izquierdo con el tono fuerte del estado: se distingue también sin depender solo del relleno. */
.calendario .cita-programada { box-shadow: inset 3px 0 0 #b58105; }
.calendario .cita-confirmada { box-shadow: inset 3px 0 0 #185fa5; }
.calendario .cita-en_espera, .calendario .cita-en_consulta { box-shadow: inset 3px 0 0 #c4661f; }
.calendario .cita-atendida { box-shadow: inset 3px 0 0 #198754; }
.calendario .cita-cancelada, .calendario .cita-no_asistio { box-shadow: inset 3px 0 0 #b02a37; text-decoration: line-through; }
.calendario .cita-bloqueo { cursor: default; }
.horario input[type="time"] { min-width: 6.5rem; }

/* --- Historia clínica ------------------------------------------------------------------- */
.subtitulo { margin: -0.5rem 0 1rem; color: var(--texto-suave); }
.antecedentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.antecedente .form-label { margin-top: 0; }
.antecedente .ayuda { margin: 0; font-size: 0.85rem; }
.antecedente .btn { align-self: flex-start; margin-top: 0.4rem; }
.diagnostico { margin: 0.35rem 0; }
.diagnostico input[type="text"] { width: 8rem; }
.diagnostico .form-select { width: auto; }
.descripcion-cie10 { color: var(--texto-suave); font-size: 0.9rem; }
.lectura h2 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.lectura h2:first-child { margin-top: 0; }
.lectura p { white-space: pre-line; margin: 0; }
.signos { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; list-style: none; margin: 0 0 0.5rem; }
.addendum { border-left: 3px solid var(--borde); padding-left: 0.75rem; margin: 0.75rem 0; }
.addendum p { white-space: pre-line; margin: 0.15rem 0; }
.documentos { list-style: none; padding: 0; margin: 0; }
.documentos > li { padding: 0.6rem 0; border-bottom: 1px solid var(--borde); }
.documentos .acciones { margin-top: 0.35rem; gap: 0.35rem; }
.documentos .acciones input[type="text"] { width: 16rem; }
.documentos .anulado > .fila:first-child span:not(.etiqueta) { text-decoration: line-through; color: var(--texto-suave); }
.subir-adjunto { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--borde); }
.subir-adjunto h3 { margin: 0.5rem 0 0; }
.items-recipe input[type="text"] { min-width: 8rem; }

/* --- Bitácora ---------------------------------------------------------------------------- */
.bitacora td { font-size: 0.9rem; vertical-align: top; }
.bitacora .detalle { color: var(--texto-suave); max-width: 22rem; }

/* --- Acceso y segundo factor --------------------------------------------------------------- */
.qr { display: block; margin: 1rem auto; background: #fff; }
.secreto, .codigos { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.05em; }
.secreto { padding: 0.5rem; background: var(--fondo); border-radius: 0.4rem; word-break: break-all; }
.codigos { columns: 2; padding-left: 1.5rem; }

/* --- Inicio ------------------------------------------------------------------------------- */
.saludo { margin-bottom: 1.5rem; }
.saludo h1 { margin-bottom: 0.15rem; }
.saludo p { color: var(--texto-suave); margin: 0; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.metrica { background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; padding: 0.9rem 1rem; }
.metrica .valor { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.metrica .rotulo { color: var(--texto-suave); font-size: 0.85rem; }
.siguiente { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--marca-borde); background: var(--marca-suave); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.siguiente .rotulo { color: var(--texto-suave); font-size: 0.85rem; }
.siguiente .nombre { font-size: 1.1rem; font-weight: 600; }
.siguiente form { margin: 0; }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.acceso-rapido { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; color: inherit; text-decoration: none; }
.acceso-rapido:hover { border-color: var(--marca); color: var(--marca); }
.acceso-rapido .bi { font-size: 1.4rem; color: var(--marca); }
.panel-inicio { background: #fff; border: 1px solid var(--borde); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1rem; }
.panel-inicio h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.panel-inicio .tabla { border-width: 0; margin: 0; }

/* --- Identidad del consultorio ------------------------------------------------------------- */
.vista-logo { max-height: 5rem; max-width: 12rem; object-fit: contain; border: 1px solid var(--borde); border-radius: 0.5rem; padding: 0.25rem; background: #fff; }
.form-control-color { width: 4.5rem; }