/* public_satiq/css/listado.css */
/* Listado de episodios cargados. */
/* El listado usa mas ancho que el resto: tiene muchas columnas y si no queda con scroll horizontal. */
.listado-wrap { max-width:1500px; }
.listado-cab { display:flex; align-items:center; justify-content:space-between; margin:24px 0 16px; flex-wrap:wrap; gap:12px; }
.listado-titulo { font-size:1.4rem; font-weight:700; color:#222; }
.btn-nuevo { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); color:#fff; text-decoration:none; padding:10px 20px; border-radius:8px; font-weight:600; font-size:0.9rem; box-shadow:0 3px 10px rgba(221,68,66,0.3); transition:transform 0.15s; }
.btn-nuevo:hover { transform:translateY(-2px); }
.listado-barra { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.listado-total { font-size:0.9rem; color:#666; font-weight:600; }
.listado-perpage { display:flex; align-items:center; gap:7px; font-size:0.85rem; color:#666; flex-wrap:wrap; row-gap:9px; }
.listado-perpage label { white-space:nowrap; }
.listado-perpage select { padding:6px 10px; border:1px solid #ccd0d5; border-radius:6px; background:#fff; }
.listado-vacio { background:#fff; border:1px solid #e3e5e8; border-radius:10px; padding:40px; text-align:center; color:#888; }
.listado-vacio a { color:#C22E2B; font-weight:600; }
.tabla-wrap { background:#fff; border:1px solid #e3e5e8; border-radius:10px; overflow-x:auto; }
.tabla-ep { width:100%; border-collapse:collapse; font-size:0.88rem; }
.tabla-ep th { background:#faf2f2; color:#C22E2B; text-align:left; padding:11px 14px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; border-bottom:1px solid #f0dada; }
.tabla-ep td { padding:11px 14px; border-bottom:1px solid #eef0f2; white-space:nowrap; }
.tabla-ep tr:last-child td { border-bottom:none; }
.tabla-ep tr:hover td { background:#fafbfc; }
.td-id { font-weight:700; color:#222; }
.td-unidad { color:#999; font-size:0.78rem; }
.td-res { white-space:normal; max-width:180px; }
.td-fecha { color:#888; font-size:0.82rem; }
.btn-ver { background:#fff; color:#C22E2B; border:1.5px solid #dd4442; padding:5px 14px; border-radius:6px; text-decoration:none; font-size:0.82rem; font-weight:600; transition:background 0.2s,color 0.2s; }
.btn-ver:hover { background:#dd4442; color:#fff; }
.paginacion { display:flex; align-items:center; justify-content:center; gap:6px; margin:20px 0 40px; flex-wrap:wrap; }
/* .pag-flecha y .pag-puntos se fueron a barra.css el 03/10/2026: estaban declaradas tambien
   en centros.css y dos definiciones del mismo nombre es lo que se vino a terminar. Las de
   numeros de pagina quedan por si vuelve a hacer falta un paginador numerado. */
.pag-num { min-width:38px; text-align:center; color:#C22E2B; text-decoration:none; font-weight:600; font-size:0.9rem; padding:8px 10px; border:1px solid #e3c5c5; border-radius:7px; transition:background 0.2s,color 0.2s,border-color 0.2s; }
.pag-num:hover { background:#dd4442; color:#fff; border-color:#dd4442; }
.pag-num.pag-actual { background:#C22E2B; color:#fff; border-color:#C22E2B; cursor:default; }
.td-centro { font-weight:600; color:#444; max-width:200px; white-space:normal; }
.det-centro { font-size:0.82rem; color:#666; background:#f0f1f3; padding:5px 12px; border-radius:20px; font-weight:600; }
.listado-acciones { display:flex; gap:10px; align-items:center; }
.btn-exportar { background:#fff; color:#1a7a4c; border:1.5px solid #1a7a4c; padding:9px 18px; border-radius:8px; text-decoration:none; font-weight:600; font-size:0.9rem; transition:background 0.2s,color 0.2s; }
.btn-exportar:hover { background:#1a7a4c; color:#fff; }
/* Responsive: celular */
/* 17/09/2026: la tabla tiene que entrar sin arrastrar la pantalla al costado. Al angostar se van
   ocultando las columnas menos importantes (col-2 primero, col-3 despues), que siguen estando en
   el detalle del episodio; en el celular cada episodio pasa a ser una ficha con el nombre del dato
   adelante, que sale del atributo data-col de cada celda. */
@media (max-width:1150px) {
    .tabla-ep .col-3 { display:none; }
}
@media (max-width:820px) {
    .tabla-ep .col-2 { display:none; }
}
@media (max-width:600px) {
    .tabla-wrap { -webkit-overflow-scrolling:touch; max-width:100%; border:none; background:none; }
    /* Ficha por episodio: la tabla deja de ser tabla */
    .tabla-ep, .tabla-ep tbody, .tabla-ep tr, .tabla-ep td { display:block; width:100%; }
    .tabla-ep thead { display:none; }
    .tabla-ep tr { background:#fff; border:1px solid #e3e5e8; border-radius:10px; margin-bottom:10px; padding:4px 0; }
    .tabla-ep td { border:none; border-bottom:1px solid #f2f4f6; padding:8px 14px; white-space:normal; display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
    .tabla-ep tr td:last-child { border-bottom:none; }
    .tabla-ep td:before { content:attr(data-col); color:#8b939b; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.4px; font-weight:600; flex:0 0 auto; }
    .tabla-ep td.td-accion:before { content:''; }
    .tabla-ep td.td-accion { justify-content:flex-end; }
    /* En la ficha entran todas: no hay columnas que ocultar */
    .tabla-ep .col-2, .tabla-ep .col-3 { display:flex; }
    .tabla-ep tr:hover td { background:transparent; }
    .fila-alerta td, .fila-cerrada td { background:transparent; }
    .fila-alerta { border-color:#eeda9f; background:#fffdf6; }
    .listado-cab { gap:10px; }
    /* Los botones de la cabecera quedaban fuera de la pantalla y no se podian apretar */
    .listado-acciones { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
    .listado-acciones > * { flex:1 1 auto; text-align:center; }
    .listado-titulo { font-size:1.2rem; }
    .listado-barra { flex-direction:column; align-items:stretch; gap:10px; }
    .listado-perpage { flex-wrap:wrap; justify-content:flex-start; width:100%; }
    .listado-perpage select { flex:0 0 auto; }
    .listado-acciones { width:100%; }
    .listado-acciones a { flex:1; text-align:center; }
    /* Paginacion compacta: ocultar los numeros lejanos, dejar solo 1 a cada lado de la actual */
    .pag-num { min-width:32px; padding:7px 6px; font-size:0.85rem; }
    .pag-flecha { min-width:32px; padding:6px 8px; }
}

@media (max-width:600px) {
    .form-wrap { overflow-x:hidden; }
}
/* Cerrar anio: boton, candado, fila cerrada */
.btn-cerrar-anio { background:#fff; color:#b8860b; border:1.5px solid #b8860b; padding:9px 16px; border-radius:8px; font-weight:600; font-size:0.88rem; cursor:pointer; transition:background 0.2s,color 0.2s; }
.btn-cerrar-anio:hover { background:#b8860b; color:#fff; }
.fila-cerrada { background:#fbf6e9; }
.fila-cerrada:hover td { background:#f6efdc !important; }
.candado { font-size:0.85rem; opacity:0.7; margin-left:3px; }
/* Modal (esta vista no carga detalle.css) */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.activo { display:flex; }
.modal-caja { background:#fff; border-radius:12px; padding:26px 28px; max-width:460px; width:90%; box-shadow:0 12px 40px rgba(0,0,0,0.25); }
.modal-titulo { font-size:1.15rem; font-weight:700; margin-bottom:12px; }
.modal-titulo-cerrar { color:#b8860b; }
.modal-texto { font-size:0.92rem; color:#444; line-height:1.5; margin-bottom:18px; }
.modal-confirma-cerrar { background:#fbf6e9; border:1px solid #ecdcae; border-radius:8px; padding:11px 14px; color:#7a5b09; }
.modal-caja .campo label { display:block; font-size:0.85rem; color:#555; font-weight:600; margin-bottom:6px; }
.modal-caja .campo select { width:100%; padding:9px 12px; border:1px solid #ccd0d5; border-radius:7px; background:#fff; font-size:0.92rem; }
.modal-acciones { display:flex; gap:12px; justify-content:flex-end; }
.modal-confirmar-cerrar { background:#b8860b; color:#fff; border:none; padding:9px 18px; border-radius:7px; font-weight:600; font-size:0.88rem; cursor:pointer; }
.modal-confirmar-cerrar:hover { background:#9c7209; }
.modal-confirmar-cerrar:disabled { background:#d8c89a; cursor:not-allowed; }
.satiq-rojo { color:#C22E2B; font-weight:700; }
/* Buscador por ID de paciente */
.listado-perpage .inp-paciente { width:95px; padding:5px 8px; border:1px solid #ccd0d5; border-radius:6px; font-size:0.84rem; color:#444; font-family:inherit; }
.listado-perpage .inp-paciente:focus { outline:none; border-color:#2563a8; }
/* Filtro por fecha exacta o rango */
.listado-perpage input[type=date] { padding:5px 8px; border:1px solid #ccd0d5; border-radius:6px; font-size:0.84rem; color:#444; font-family:inherit; }
.listado-perpage input[type=date]:focus { outline:none; border-color:#2563a8; }
.listado-perpage .lbl-y { margin:0; color:#888; }
.listado-perpage input[type=date] { width:140px; }
.listado-perpage input[type=date]:disabled { background:#f0f1f3; color:#aaa; cursor:not-allowed; }
/* Separador visual entre los grupos de filtros */
.listado-perpage .sep { width:1px; height:20px; background:#e0e3e6; margin:0 3px; }
.listado-perpage select:disabled { background:#f0f1f3; color:#aaa; cursor:not-allowed; }
.btn-limpiar-rango { font-size:0.8rem; color:#c0392b; text-decoration:none; padding:4px 9px; border:1px solid #e6c3bf; border-radius:6px; background:#fdf5f4; white-space:nowrap; }
.btn-limpiar-rango:hover { background:#c0392b; color:#fff; border-color:#c0392b; }

/* Reapertura de un anio cerrado, en verde para diferenciarla del cierre */
.btn-reabrir-anio { background:#fff; color:#1a7a4c; border:1.5px solid #1a7a4c; padding:9px 16px; border-radius:8px; font-weight:600; font-size:0.88rem; cursor:pointer; transition:background 0.2s,color 0.2s; margin-left:8px; }
.btn-reabrir-anio:hover { background:#1a7a4c; color:#fff; }
.modal-titulo-reabrir { color:#1a7a4c; }
.modal-confirma-reabrir { background:#f2f8f4; border:1px solid #bfe0cc; border-radius:8px; padding:11px 14px; color:#14603c; }
.modal-aviso-reabrir { font-size:0.86rem; color:#8a6100; background:#fdf3d8; border:1px solid #eeda9f; border-radius:8px; padding:10px 13px; }
.modal-confirmar-reabrir { background:#1a7a4c; color:#fff; border:none; padding:9px 18px; border-radius:7px; font-weight:600; font-size:0.88rem; cursor:pointer; }
.modal-confirmar-reabrir:hover { background:#14603c; }
.modal-confirmar-reabrir:disabled { background:#a8c9b7; cursor:not-allowed; }

/* Origen del episodio y alertas de calidad */
.chip-origen { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.4px; padding:3px 9px; border-radius:20px; text-transform:uppercase; }
.chip-web { background:#eef0f2; color:#666; }
.chip-api { background:#e7f0fa; color:#2563a8; }
.chip-alerta { display:inline-block; margin-left:6px; font-size:0.72rem; font-weight:700; color:#8a6100; background:#fdf3d8; border:1px solid #eeda9f; padding:1px 7px; border-radius:20px; text-decoration:none; vertical-align:middle; }
.chip-alerta:hover { background:#f7e6b8; }
.fila-alerta td { background:#fffdf6; }
.fila-alerta:hover td { background:#fdf8ea !important; }
.aviso-alertas { background:#fdf3d8; border:1px solid #eeda9f; color:#7a5b09; border-radius:8px; padding:11px 14px; margin-bottom:12px; font-size:0.88rem; }
.aviso-alertas strong { font-weight:700; }
/* 28/09/2026: EL NOMBRE DEL CENTRO SE DESBORDABA SOBRE LA COLUMNA DE AL LADO. `.td-centro` ya
   pedia white-space:normal, pero perdia por especificidad contra `.tabla-ep td`, que es 0,1,1
   contra 0,1,0. Con el nowrap ganando, el nombre no podia cortar y se comia el ID del paciente.
   Se sube la especificidad en vez de tocar la regla general, que el resto de las columnas si
   quiere en una linea. */
.tabla-ep td.td-centro { white-space: normal; line-height: 1.3; }

/* La nota que dice de donde vienen los episodios. Va corta y siempre visible: un titulo largo
   se lee una vez y una ayuda escondida no se abre nunca. */
.listado-nota { margin: -8px 0 14px; font-size: 0.84rem; color: #6b7280; line-height: 1.5; }
.listado-nota strong { color: #444; font-weight: 600; }
/* "coincide en el historial": la etiqueta que explica por que salio una unidad cuya coincidencia
   no se ve en ninguna columna de la tabla. Va en el mismo renglon del nombre y lleva al tab del
   historial. Discreta a proposito: es una explicacion, no una alarma. */
.etiqueta-historial { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: #eef4fb; border: 1px solid #d3e2f2; color: #2c5d8f; font-size: .72rem; font-weight: 600; text-decoration: none; vertical-align: middle; }
.etiqueta-historial:hover { background: #dceafa; text-decoration: none; }
/* Los dos filtros rapidos del padron, al lado del cuadro de busqueda. */
.centros-buscar select { padding: 9px 10px; border: 1px solid #cfd6dd; border-radius: 6px; font-size: .9rem; background: #fff; color: #333; }
.centros-buscar select:focus { outline: 2px solid #3c6382; outline-offset: 1px; }
/* "con detalle": avisa que esa unidad tiene descrito su metodo en palabras. El texto completo
   va en el title, que es lo unico que entra en una celda de tabla sin romper el ancho. */
.forma-nota { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: #f0f0ef; border: 1px solid #ddd; color: #666; font-size: .7rem; cursor: help; }
/* El check de interoperable. Verde y solo, sin texto: la columna es angosta y lo que importa es
   verla de un vistazo en una lista de cincuenta. El punto gris es el "no", que tiene que
   ocupar lugar para que la columna no parezca vacia. */
.check-si { color: #1a7a4c; font-weight: 700; font-size: 1rem; }

/* EL ORIGEN EDS, desde el 17/10/2026: un episodio que entro por la planilla que mando la
   Unidad. Verde como el resto de lo que llego completo y validado, y distinto del azul de la API
   y del gris del formulario: la columna existe para distinguirlos de un vistazo. */
.chip-eds { background:#e7f5ec; color:#1a7a4c; }