/* Colores y barra superior de los prototipos de la 5.8 */
:root { --azul: #1f4e79; --azul-claro: #2e6da4; --fondo: #f4f6fa; }
body { background: var(--fondo); }
.barra { background: var(--azul); color: #fff; }
.barra .sistema { font-weight: 700; font-size: 1.35rem; }
.barra .sistema small { font-weight: 400; font-size: .95rem; opacity: .85; margin-left: .5rem; }
.barra .usuario { font-size: .95rem; }
.barra .btn-salir { color: #fff; text-decoration: none; padding: 0; border: 0; background: none; }
.menu { background: var(--azul-claro); }
.menu a, .menu span { display: inline-block; padding: .55rem 1.1rem; color: #fff; text-decoration: none; }
.menu a.activo { background: var(--fondo); color: var(--azul); font-weight: 600; border-radius: .3rem .3rem 0 0; }
.menu span.pendiente { opacity: .55; cursor: default; }
h1.titulo { color: var(--azul); font-weight: 700; font-size: 1.6rem; }
.tarjeta-ingreso { max-width: 420px; margin: 4rem auto; }
.tarjeta-ingreso .card-header { background: var(--azul); color: #fff; }
.btn-primary { --bs-btn-bg: var(--azul); --bs-btn-border-color: var(--azul); --bs-btn-hover-bg: #173b5c; --bs-btn-hover-border-color: #173b5c; --bs-btn-active-bg: #173b5c; --bs-btn-active-border-color: #173b5c; --bs-btn-disabled-bg: #b8c4d2; --bs-btn-disabled-border-color: #b8c4d2; --bs-btn-disabled-opacity: 1; }
/* Importar la planilla del mes (6.4, fig. 2) */
.ruta { font-size: .85rem; color: #5c6670; margin-bottom: .25rem; }
.ruta a { color: inherit; }
.campo-archivo { flex: 1 1 14rem; min-width: 0; width: auto; }
.tarjeta-dato { background: #fff; border: 1px solid #d6dbe3; border-radius: .4rem; padding: .6rem .9rem; height: 100%; font-size: .9rem; color: #5c6670; }
.tarjeta-dato .numero { display: block; font-size: 1.6rem; font-weight: 700; color: var(--azul); line-height: 1.2; }
.tarjeta-dato .numero.correctas { color: #2e7d32; }
.tarjeta-dato .numero.errores { color: #b02a37; }
.tarjeta-dato .numero.nuevos { color: #8a6100; }
.tabla-importacion, .tabla-ficha { background: #fff; }
.tabla-importacion thead th, .tabla-ficha thead th { background: #dde6f0; color: var(--azul); white-space: nowrap; }
.etiqueta { display: inline-block; padding: .05rem .45rem; border-radius: .25rem; font-size: .8rem; font-weight: 600; }
.etiqueta-correcta { background: #d9f0dd; color: #1e5e25; }
.etiqueta-error { background: #f8d7da; color: #8a1c27; }
.btn-outline-primary { --bs-btn-color: var(--azul); --bs-btn-border-color: var(--azul); --bs-btn-hover-bg: var(--azul); --bs-btn-hover-border-color: var(--azul); --bs-btn-active-bg: #173b5c; --bs-btn-active-border-color: #173b5c; --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: #c3c9d0; --bs-btn-disabled-bg: #eef0f3; --bs-btn-disabled-opacity: 1; }
.nota { color: #5c6670; }
/* Casos y ficha del caso (6.5, figs. 4 y 5) */
h2.subtitulo { color: var(--azul); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.tarjeta-ficha { background: #fff; border: 1px solid #d6dbe3; border-radius: .4rem; padding: .75rem 1rem; height: 100%; }
.tarjeta-ficha h2.subtitulo { border-bottom: 1px solid #d6dbe3; padding-bottom: .35rem; }
.datos { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .2rem .9rem; margin: 0 0 .5rem; font-size: .9rem; }
.datos dt { font-weight: 400; color: #5c6670; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.estado-abierto { background: #dde6f0; color: var(--azul); }
.estado-en_gestion { background: #d9f0dd; color: #1e5e25; }
.estado-suspendido { background: #fff1c2; color: #6b4d00; }
.estado-regularizado, .estado-anulado, .estado-derivado { background: #e2e5e9; color: #3d454d; }
.etiqueta-prioritario { background: #b02a37; color: #fff; }
.etiqueta-vencido { background: #fff1c2; color: #6b4d00; }
.etiqueta-pendiente { background: #e2e5e9; color: #3d454d; }
.tabla-ficha tr.fila-vencida > td { background: #fde8ea; }
.formulario-ficha { max-width: 44rem; border-color: var(--azul-claro); }
/* Registrar comunicación (6.6, fig. 6) */
.subtitulo-form { color: var(--azul); font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid #d6dbe3; padding-bottom: .35rem; margin: .5rem 0 .75rem; }
.tarjeta-ficha ul li + li { margin-top: .25rem; }
/* 6.7: derivación (fig. 7) y resumen de antecedentes */
.banda-estado { background: #e8f0fa; border: 1px solid #b8cde6; color: var(--azul); border-radius: .4rem; padding: .5rem .9rem; font-size: .9rem; }
.btn-no-conforme { --bs-btn-focus-shadow-rgb: 176, 42, 55; --bs-btn-color: #fff; --bs-btn-bg: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #8a1c27; --bs-btn-hover-border-color: #8a1c27; --bs-btn-active-color: #fff; --bs-btn-active-bg: #8a1c27; --bs-btn-active-border-color: #8a1c27; }
pre.resumen { white-space: pre-wrap; background: #fff; font-family: inherit; }
/* Botón del formulario abierto: distinto de «Registrar comunicación» */
.acciones-ficha .btn-outline-primary.active { --bs-btn-active-bg: #dde6f0; --bs-btn-active-color: var(--azul); --bs-btn-active-border-color: var(--azul); border-width: 2px; }
#panel:focus { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
/* 6.8: pendientes del día y casos (figs. 3 y 8) */
.tabla-ficha tr.fila-caso { position: relative; }
.tabla-ficha tr.fila-caso:hover > td { background: #eef3f9; }
.filtros .filtro-titulo { color: var(--azul); font-weight: 700; font-size: .9rem; margin: .75rem 0 .25rem; }
.filtro-opciones { list-style: none; padding: 0; margin: 0 0 .25rem; font-size: .9rem; }
.filtro-opciones li { padding: .1rem 0; }
.filtro-opciones a { color: var(--azul-claro); text-decoration: none; }
.filtro-opciones a:hover { text-decoration: underline; }
.filtro-opciones a.activo { color: var(--azul); font-weight: 700; }
@media (max-width: 991.98px) { .filtro-opciones { display: flex; flex-wrap: wrap; gap: .1rem 1rem; } }
/* En el celular cada fila se apila: sin desplazamiento horizontal (5.10) */
@media (max-width: 767.98px) {
  .tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada td { display: block; width: 100%; }
  .tabla-apilada tr { border: 1px solid #d6dbe3; border-radius: .4rem; margin-bottom: .5rem; overflow: hidden; }
  .tabla-apilada td { border: 0; padding: .2rem .6rem .2rem 8.6rem; overflow-wrap: anywhere; }
  .tabla-apilada td::after { content: ""; display: block; clear: both; }
  .tabla-apilada td::before { content: attr(data-label); float: left; width: 7.5rem; margin-left: -8rem; color: #5c6670; font-size: .85rem; }
  .tabla-apilada td[colspan] { padding-left: .6rem; }
  .tabla-apilada td[colspan]::before { content: none; }
}
/* Casos (fig. 8): buscador y lista a la izquierda, filtros a la derecha; en pantallas angostas, buscar → filtrar → lista */
.casos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; grid-template-areas: "buscar" "filtros" "lista"; }
.casos-buscar { grid-area: buscar; margin: 0; }
.casos-filtros { grid-area: filtros; }
.casos-lista { grid-area: lista; min-width: 0; }
@media (min-width: 992px) { .casos-grid { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "buscar filtros" "lista filtros"; grid-template-rows: auto 1fr; } .casos-filtros { align-self: start; } }
/* Contraste AA en las filas de color y casillas más grandes para marcar casos */
.tabla-apilada a { color: var(--azul); }
.tabla-apilada input[name="casos"] { width: 1.3rem; height: 1.3rem; }