/* Colores institucionales: Pantone 288 C (#002F6C) y Pantone 2985 C (#5BC2E7) */
:root {
    --ubo-azul: #002F6C;
    --ubo-celeste: #5BC2E7;
    --ubo-azul-claro: #e8eef6;
    --gris-borde: #d4dae3;
    --gris-texto: #44505f;
    --rojo: #b00020;
    --verde: #1b7a43;

    /* Header / Footer institucional (norma UBO) */
    --navy: #16244C;         /* azul marino principal */
    --navy-400: #3A5490;     /* azul medio */
    --ubo-blue: #5C9BE6;     /* azul claro (hover sobre fondo oscuro) */
    --footer-bg: #0E0E10;    /* casi negro (fondo footer) */
    /* Línea de acento: los 4 colores de las facultades.
       El ORDEN es parte de la norma: verde, azul, rojo, morado. */
    --fac-verde: #81D742;
    --fac-azul: #1E73BE;
    --fac-rojo: #DD3333;
    --fac-morado: #51509D;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, Helvetica, sans-serif; background: var(--ubo-azul-claro); color: #1c2530; line-height: 1.5; position: relative; display: flex; flex-direction: column; min-height: 100vh; }
/* Imagen de fondo del body (opcional) */
body::before { content: ""; position: fixed; inset: 0; background: url("../img/ubo.webp") center center / cover no-repeat; opacity: 0.12; z-index: -1; pointer-events: none; }

/* ============ HEADER institucional UBO ============ */
.site-header { position: sticky; top: 0; z-index: 30; background: #fff; font-family: 'Poppins', "Segoe UI", system-ui, sans-serif; box-shadow: 0 2px 16px -10px rgba(22,36,76,.5); }
.topbar-accent { display: flex; height: 3px; width: 100%; }
.topbar-accent span { flex: 1; }
/* Línea superior: los 4 colores de las facultades (orden: verde, azul, rojo, morado) */
.topbar-accent span:nth-child(1) { background: var(--fac-verde); }
.topbar-accent span:nth-child(2) { background: var(--fac-azul); }
.topbar-accent span:nth-child(3) { background: var(--fac-rojo); }
.topbar-accent span:nth-child(4) { background: var(--fac-morado); }
/* Logo pegado a la izquierda con separación de 32px (4.º valor del padding) */
.header-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 40px 12px 32px; }
.header-bar .brand { display: flex; align-items: center; user-select: none; }
.header-bar .brand img { height: 94px; width: auto; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Centro: identidad de la plataforma, centrada respecto a la PÁGINA (no al espacio libre) */
.header-plataforma { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: min(38vw, 460px); text-align: center; text-wrap: balance; user-select: none; pointer-events: none; }
.header-plataforma .hp-title { font-size: 1.35rem; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.25; }
.header-plataforma .hp-sub { font-size: .8rem; font-weight: 500; color: var(--gris-texto); line-height: 1.35; }
/* Derecha: unidad institucional (corta sola en varias líneas, nunca en una sola) */
.header-tag { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 3px; padding-left: 16px; border-left: 3px solid var(--navy); max-width: 300px; flex: 0 1 auto; }
.header-tag .ht-main { font-size: .9rem; font-weight: 600; color: var(--navy); line-height: 1.3; text-wrap: balance; }
.header-tag .ht-sub { font-size: .8rem; font-weight: 500; color: var(--navy-400); letter-spacing: .01em; line-height: 1.3; }

/* Hero: identidad de la plataforma (Yo cuido, Yo estudio) */
.hero { text-align: center; padding: 34px 20px 4px; }
.hero h1 { margin: 0; font-size: 2rem; font-weight: 700; color: var(--ubo-azul); line-height: 1.2; }
.hero .hero-sub { margin: 12px auto 0; max-width: 800px; font-size: 1.05rem; color: var(--gris-texto); line-height: 1.6; }

/* Información de la Ley */
.tarjeta.info-ley { padding: 36px 44px; margin-bottom: 28px; }
.info-ley h2 { margin: 36px 0 14px; font-size: 24px; color: var(--ubo-azul); line-height: 1.4; }
.info-ley h2:first-child { margin-top: 4px; }
.info-ley p { margin: 0 0 20px; font-size: 1.1rem; line-height: 1.85; color: #2b3542; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.info-ley .nota-docs { text-align: left; }

/* Requisitos: tarjetas con ícono */
.requisitos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 10px 0 24px; }
.requisito { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,47,108,.05); transition: box-shadow .15s ease, transform .15s ease, border-color .15s; }
.requisito:hover { box-shadow: 0 8px 20px rgba(0,47,108,.12); transform: translateY(-2px); border-color: var(--ubo-celeste); }
.requisito-icono { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ubo-azul); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.requisito-texto h3 { margin: 3px 0 6px; font-size: 1.25rem; color: var(--ubo-azul); line-height: 1.3; min-height: 2.6em; }
.requisito-texto p { margin: 0; font-size: 1.1rem; color: #2b3542; line-height: 1.6; text-align: justify; }
.nota-docs { display: flex; align-items: flex-start; gap: 10px; padding: 15px 18px; margin-bottom: 6px; background: #fff7e6; border: 1px solid #f0d28a; border-left: 4px solid #e0a800; border-radius: 8px; font-size: 1.25rem; line-height: 1.6; color: #6b5400; }
.nota-docs i { color: #e0a800; margin-top: 3px; font-size: 1.25rem; }

/* Botón "Gestiona tu caso" (expande el formulario, al pie de la información) */
.gestiona-wrap { text-align: center; margin: 4px 0 28px; }
.btn-gestiona { display: inline-flex; align-items: center; gap: 12px; padding: 16px 40px; background: var(--ubo-azul); color: #fff; border: none; border-radius: 8px; font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,47,108,.22); transition: background .15s, box-shadow .15s, transform .1s; }
.btn-gestiona:hover { background: #00224f; box-shadow: 0 6px 18px rgba(0,47,108,.3); }
.btn-gestiona:active { transform: translateY(1px); }
.btn-gestiona .btn-gestiona-flecha { font-size: 13px; transition: transform .2s ease; }
.btn-gestiona.abierto .btn-gestiona-flecha { transform: rotate(180deg); }

/* Botón fijo "Gestiona tu caso" (arriba a la derecha, permanente) */
.btn-gestiona-flotante { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--ubo-azul); color: #fff; border: 2px solid #fff; border-radius: 30px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: opacity .25s ease, transform .25s ease, background .15s; }
.btn-gestiona-flotante:hover { background: #00224f; }
.btn-gestiona-flotante .btn-gestiona-flecha { font-size: 12px; transition: transform .2s ease; }
.btn-gestiona-flotante.abierto .btn-gestiona-flecha { transform: rotate(180deg); }
.btn-gestiona-flotante.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Sección del formulario desplegable (centrada, ancho legible) */
.seccion-formulario { max-width: 680px; margin: 0 auto 24px; }   /* animación: ver "Animaciones suaves" */

/* Responsivo */
@media (max-width: 820px) {
    .requisitos-grid { grid-template-columns: 1fr; }
    .requisito-texto h3 { min-height: 0; }
    .tarjeta.info-ley { padding: 28px 24px; }
}
@media (max-width: 560px) {
    .info-ley p { text-align: left; }
    .info-ley h2 { font-size: 21px; }
    .btn-gestiona-flotante { bottom: 12px; right: 12px; padding: 10px 16px; font-size: 13px; gap: 8px; }
}

/* Estructura */
.contenedor { max-width: 640px; margin: 32px auto; padding: 0 16px; flex: 1 0 auto; }
.contenedor.ancho { max-width: 860px; }
.contenedor.xancho { max-width: 1080px; }
.contenedor.full { max-width: 1750px; }
.tarjeta { background: #fff; border: 1px solid var(--gris-borde); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,47,108,.06); overflow: hidden; }
.tarjeta-cuerpo { padding: 28px; }
.intro { font-size: 1.05rem; color: var(--gris-texto); margin: 0 0 24px; }

/* Campos */
.campo { margin-bottom: 20px; }
.campo label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 6px; color: var(--ubo-azul); }
.campo .ayuda { display: block; font-weight: 400; font-size: 0.9rem; color: var(--gris-texto); margin-top: 4px; }
input[type="text"], input[type="password"], textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: 1.05rem; font-family: inherit; color: #1c2530; background: #fff; transition: border-color .15s, box-shadow .15s; }
select { cursor: pointer; height: 44px; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--ubo-azul); box-shadow: 0 0 0 3px rgba(91,194,231,.35); }

/* Mensaje de error (acceso) */
.mensaje-error { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; margin-bottom: 20px; background: #fdeaec; border: 1px solid #f0b8bf; border-left: 4px solid var(--rojo); border-radius: 6px; font-size: 14px; color: #7a0016; }
.mensaje-error i { color: var(--rojo); margin-top: 2px; }
.aviso-rut { margin-top: 10px; padding: 12px 14px; background: #fff7e6; border: 1px solid #f0d28a; border-left: 4px solid #e0a800; border-radius: 6px; font-size: 0.95rem; color: #6b5400; line-height: 1.5; }
.aviso-rut > strong { display: block; margin-bottom: 3px; color: #8a6d00; }
input[readonly] { background: #f3f5f9; color: var(--gris-texto); cursor: default; }
textarea { resize: vertical; min-height: 80px; }
.estado-rut { font-size: 0.9rem; margin-top: 6px; min-height: 16px; }
.estado-rut.buscando { color: var(--gris-texto); }
.estado-rut.ok { color: var(--verde); }
.estado-rut.error { color: var(--rojo); }

/* Botones SÍ/NO (toggle) */
.opciones { display: flex; gap: 12px; }
.opcion { flex: 1; padding: 13px 10px; border: 1.5px solid var(--gris-borde); border-radius: 6px; background: #fff; color: var(--gris-texto); font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; transition: all .15s; }
.opcion:hover { border-color: var(--ubo-celeste); }
.opcion.activo-si { background: var(--ubo-azul); border-color: var(--ubo-azul); color: #fff; }
.opcion.activo-no { background: var(--gris-texto); border-color: var(--gris-texto); color: #fff; }

/* Botones */
.acciones { margin-top: 28px; }
.btn-enviar { width: 100%; padding: 14px; background: var(--ubo-azul); color: #fff; border: none; border-radius: 6px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn-enviar:hover { background: #00224f; }
.btn-secundario { display: block; width: 100%; margin-top: 12px; padding: 13px; background: #fff; color: var(--ubo-azul); border: 1.5px solid var(--ubo-azul); border-radius: 6px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; box-sizing: border-box; transition: background .15s, color .15s; }
.btn-secundario:hover { background: var(--ubo-azul); color: #fff; }
.volver { display: inline-block; margin-top: 4px; padding: 11px 20px; background: var(--ubo-azul); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.volver:hover { background: #00224f; }

/* Documentos de respaldo requeridos (texto informativo) */
.docs-requeridos { background: var(--ubo-azul-claro); border: 1px solid var(--gris-borde); border-radius: 8px; padding: 16px 20px; margin: 12px 0 18px; }
.docs-requeridos .docs-titulo { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--ubo-azul); }
.docs-requeridos .docs-titulo:not(:first-child) { margin-top: 16px; }
.docs-requeridos ul { margin: 0; padding-left: 20px; }
.docs-requeridos li { font-size: 1rem; color: #2b3542; line-height: 1.7; }
.docs-requeridos .docs-obligatorios li { font-weight: 600; }
.btn-ayuda { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 11px; background: var(--ubo-azul-claro); color: var(--ubo-azul); border: 1px solid var(--ubo-celeste); border-radius: 20px; font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; vertical-align: middle; transition: background .15s, color .15s, border-color .15s; }
.btn-ayuda:hover { background: var(--ubo-azul); color: #fff; border-color: var(--ubo-azul); }

/* Documentos PDF (lista: ícono + nombre) */
.campo-archivos .lista-archivos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 12px; }
.archivo-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gris-borde); border-radius: 8px; background: #fff; }
.archivo-icono { flex: none; font-size: 26px; color: #b00020; }
.archivo-icono.img { color: var(--ubo-azul); }
.archivo-nombre { flex: 1; min-width: 0; font-size: 1rem; color: #2b3542; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-badge { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 20px; }
.archivo-badge.badge-existente { background: var(--ubo-azul-claro); color: var(--ubo-azul); }
.archivo-badge.badge-nuevo { background: #e4f5ea; color: var(--verde); }
.archivo-quitar { flex: none; width: 34px; height: 34px; border: 1px solid var(--gris-borde); border-radius: 6px; background: #fff; color: var(--rojo); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.archivo-quitar:hover { background: #fdeaec; border-color: #f0b8bf; }
.archivos-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.btn-add-archivo { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: #fff; color: var(--ubo-azul); border: 1.5px dashed var(--ubo-azul); border-radius: 6px; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.btn-add-archivo:not(.deshabilitado):hover { background: var(--ubo-azul); color: #fff; }
.btn-add-archivo.deshabilitado { opacity: .5; cursor: not-allowed; border-style: solid; }
/* Input de archivos oculto pero accesible (sin display:none, para que el label lo active en móvil) */
.input-archivo-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.contador-archivos { font-size: 0.95rem; font-weight: 600; color: var(--gris-texto); }
.contador-mb { font-size: 0.95rem; font-weight: 600; color: var(--gris-texto); padding: 3px 10px; border: 1px solid var(--gris-borde); border-radius: 20px; }
.contador-mb.excedido { color: var(--rojo); border-color: #f0b8bf; background: #fdeaec; }

/* Filtro de fechas */
.filtro { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filtro-campo { display: flex; flex-direction: column; }
.filtro-campo label { font-size: 12px; font-weight: 600; color: var(--ubo-azul); margin-bottom: 4px; }
.filtro-campo input[type="date"] { padding: 9px 11px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: 14px; font-family: inherit; color: #1c2530; }
.filtro-campo input[type="date"]:focus { outline: none; border-color: var(--ubo-azul); box-shadow: 0 0 0 3px rgba(91,194,231,.35); }
.filtro-acciones { display: flex; gap: 10px; align-items: center; }
.btn-filtrar { padding: 10px 22px; background: var(--ubo-azul); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-filtrar:hover { background: #00224f; }
.btn-limpiar { font-size: 13px; color: var(--gris-texto); text-decoration: underline; }
.periodo-activo { margin: 14px 0 0; font-size: 13px; color: var(--ubo-azul); font-weight: 600; }

/* Exportación */
.exportar { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.btn-exportar { display: inline-block; padding: 11px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; }
.btn-exportar.excel { background: #1b7a43; }
.btn-exportar.excel:hover { background: #156234; }

/* Resultados */
.tarjeta.bloque { padding: 24px 28px; margin-bottom: 24px; }
.tarjeta.bloque h2 { margin: 0 0 4px; font-size: 1.5rem; color: var(--ubo-azul); }
.tarjeta.bloque .subtitulo { margin: 0 0 18px; font-size: 13px; color: var(--gris-texto); }
.resumen { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.indicador { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--gris-borde); border-radius: 8px; padding: 18px 20px; text-align: center; }
.indicador .numero { font-size: 30px; font-weight: 700; line-height: 1.1; }
.indicador .etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris-texto); margin-top: 4px; }
.indicador.total .numero { color: var(--ubo-azul); }
.indicador.si .numero { color: var(--verde); }
.indicador.no .numero { color: var(--rojo); }
.grafico-caja { position: relative; height: 420px; }
.sin-datos { text-align: center; color: var(--gris-texto); padding: 40px 10px; font-size: 14px; }
.centrado { text-align: center; }

/* Mini-dashboard de estados (arriba de la tabla) */
.dashboard-estados { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-card { flex: 1; min-width: 190px; background: #fff; border: 1px solid var(--gris-borde); border-left-width: 5px; border-radius: 10px; padding: 18px 22px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,47,108,.05); }
.dash-icono { font-size: 30px; }
.dash-numero { font-size: 34px; font-weight: 700; line-height: 1; }
.dash-etiqueta { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gris-texto); font-weight: 600; margin-top: 5px; }
.dash-pendiente { border-left-color: #e0a800; }
.dash-pendiente .dash-numero, .dash-pendiente .dash-icono { color: #b8860b; }
.dash-aprobado { border-left-color: var(--verde); }
.dash-aprobado .dash-numero, .dash-aprobado .dash-icono { color: var(--verde); }
.dash-rechazado { border-left-color: var(--rojo); }
.dash-rechazado .dash-numero, .dash-rechazado .dash-icono { color: var(--rojo); }

/* Pestañas Gráficos / Registros */
.tabs-resultados { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: #fff; color: var(--ubo-azul); border: 1px solid var(--gris-borde); border-radius: 8px; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tab-btn:hover { border-color: var(--ubo-celeste); }
.tab-btn.activo { background: var(--ubo-azul); color: #fff; border-color: var(--ubo-azul); }

/* Tabla de registros */
.tabla-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tabla-toolbar-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.tabla-filtros { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; min-width: 240px; }
.filtro-estado-select { width: auto; height: auto; min-width: 175px; padding: 10px 12px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: 0.95rem; font-family: inherit; color: #1c2530; background: #fff; cursor: pointer; }
.filtro-estado-select:focus { outline: none; border-color: var(--ubo-azul); box-shadow: 0 0 0 3px rgba(91,194,231,.35); }

/* Columna de gestión: descarga + estado */
.col-gestion { min-width: 250px; }
.acciones-fila { display: flex; align-items: center; gap: 10px; justify-content: center; }
.select-estado { width: auto; height: auto; border: 1.5px solid var(--gris-borde); border-radius: 20px; padding: 6px 12px; font-size: 0.85rem; font-weight: 700; font-family: inherit; cursor: pointer; outline: none; transition: background .15s, border-color .15s, color .15s; }
.select-estado:focus { box-shadow: 0 0 0 3px rgba(91,194,231,.35); }
.select-estado.estado-pendiente { background: #fff7e6; border-color: #f0d28a; color: #8a6d00; }
.select-estado.estado-aprobado  { background: #e4f5ea; border-color: #9dd3b0; color: #156234; }
.select-estado.estado-rechazado { background: #fdeaec; border-color: #f0b8bf; color: #9a0016; }
.select-estado:disabled { opacity: .6; cursor: default; }
.tabla-buscar { position: relative; flex: 1; min-width: 240px; }
.tabla-buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gris-texto); font-size: 0.9rem; pointer-events: none; }
.tabla-buscar input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: 0.95rem; font-family: inherit; color: #1c2530; }
.tabla-buscar input:focus { outline: none; border-color: var(--ubo-azul); box-shadow: 0 0 0 3px rgba(91,194,231,.35); }

.tabla-scroll { overflow-x: auto; border: 1px solid var(--gris-borde); border-radius: 8px; }
.tabla-registros { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
.tabla-registros thead th { background: var(--ubo-azul); color: #fff; text-align: left; font-weight: 600; padding: 12px 14px; }
.tabla-registros th.ordenable { cursor: pointer; user-select: none; }
.tabla-registros th.ordenable::after { content: "\f0dc"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.68rem; margin-left: 7px; opacity: .45; }
.tabla-registros th.orden-asc::after { content: "\f0de"; opacity: 1; }
.tabla-registros th.orden-desc::after { content: "\f0dd"; opacity: 1; }
.tabla-registros tbody td { padding: 11px 14px; border-top: 1px solid var(--gris-borde); color: #2b3542; }
.tabla-registros tbody tr:nth-child(even) { background: #f7f9fc; }
.tabla-registros tbody tr:hover { background: var(--ubo-azul-claro); }
.tabla-registros .col-centro { text-align: center; }

/* Columna de descarga fija a la derecha: siempre visible aunque haya scroll horizontal */
.tabla-registros th:last-child,
.tabla-registros td:last-child { position: sticky; right: 0; text-align: center; box-shadow: -8px 0 10px -8px rgba(0,0,0,.18); }
.tabla-registros thead th:last-child { background: var(--ubo-azul); z-index: 3; }
.tabla-registros tbody td:last-child { background: #fff; z-index: 1; }
.tabla-registros tbody tr:nth-child(even) td:last-child { background: #f7f9fc; }
.tabla-registros tbody tr:hover td:last-child { background: var(--ubo-azul-claro); }
.btn-descargar-zip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--ubo-azul); color: #fff; border-radius: 5px; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.btn-descargar-zip:hover { background: #00224f; }
.btn-exportar.zip { background: var(--ubo-azul); }
.btn-exportar.zip:hover { background: #00224f; }

.tabla-sinresultados { padding: 26px; text-align: center; color: var(--gris-texto); font-size: 0.95rem; }
.tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tabla-info { font-size: 0.88rem; color: var(--gris-texto); }
.tabla-paginacion { display: flex; gap: 6px; flex-wrap: wrap; }
.pag-btn { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--gris-borde); background: #fff; color: var(--ubo-azul); border-radius: 6px; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.pag-btn:hover:not(:disabled):not(.activo) { border-color: var(--ubo-celeste); }
.pag-btn.activo { background: var(--ubo-azul); color: #fff; border-color: var(--ubo-azul); cursor: default; }
.pag-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tabla de registros: vista de TARJETAS en celular (responsiva) */
@media (max-width: 760px) {
    .tabla-scroll { overflow-x: visible; border: none; border-radius: 0; }
    .tabla-registros { white-space: normal; font-size: 0.95rem; }
    .tabla-registros thead { display: none; }
    .tabla-registros tbody, .tabla-registros tr, .tabla-registros td { display: block; width: 100%; }
    .tabla-registros tbody tr { border: 1px solid var(--gris-borde); border-radius: 10px; margin-bottom: 14px; background: #fff; overflow: hidden; }
    .tabla-registros tbody tr:nth-child(even), .tabla-registros tbody tr:hover { background: #fff; }
    .tabla-registros tbody td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 14px; border: none; border-top: 1px solid #eef1f6; text-align: right; }
    .tabla-registros tbody tr td:first-child { border-top: none; }
    .tabla-registros tbody td::before { content: attr(data-label); font-weight: 600; color: var(--ubo-azul); text-align: left; flex: 0 0 auto; }
    .tabla-registros .col-centro { text-align: right; }
    /* La columna de gestión deja de ser fija (sticky) en móvil */
    .tabla-registros th:last-child, .tabla-registros td:last-child { position: static; box-shadow: none; }
    .tabla-registros tbody td:last-child,
    .tabla-registros tbody tr:nth-child(even) td:last-child,
    .tabla-registros tbody tr:hover td:last-child { background: transparent; }
    .tabla-registros td.col-gestion { flex-wrap: wrap; }
    .col-gestion .acciones-fila { justify-content: flex-end; }
}

/* ============ FOOTER institucional UBO ============ */
.app-footer { background: var(--footer-bg); color: #fff; text-align: center; padding: 50px 24px 32px; margin-top: 40px; display: flex; flex-direction: column; align-items: center; font-family: 'Poppins', "Segoe UI", system-ui, sans-serif; }
.footer-logo-main { width: 112px; height: auto; margin-bottom: 20px; opacity: .96; }
.app-footer h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.app-footer h4 { margin: 7px 0 0; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.62); }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 22px; }
.footer-contact span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-size: 14.5px; }
.footer-ico { width: 19px; height: 19px; color: rgba(255,255,255,.75); transition: color .2s ease; }
.footer-link { color: #fff; text-decoration: none; transition: color .2s ease; }
.footer-contact span:hover .footer-link, .footer-link:hover { color: var(--ubo-blue); }
.footer-contact span:hover .footer-ico { color: var(--ubo-blue); }
.footer-divider { width: min(860px, 88%); border: none; border-top: 1px solid rgba(255,255,255,.14); margin: 30px 0 24px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; width: min(860px, 88%); color: rgba(255,255,255,.62); font-size: 13px; }
.footer-bottom img { height: 82px; width: auto; opacity: .9; }
/* Derechos reservados: NO va forzado a una sola línea; corta solo si es largo. */
.footer-bottom span { text-align: right; max-width: 340px; white-space: normal; overflow-wrap: break-word; text-wrap: balance; line-height: 1.45; }

/* Responsivo header + footer */
@media (max-width: 1100px) {
    .header-bar { padding: 12px 24px 12px 24px; }
    .header-tag { max-width: 230px; }
}
@media (max-width: 900px) {
    .hero h1 { font-size: 1.6rem; }
}
@media (max-width: 760px) {
    .header-bar { padding: 10px 20px; }
    .header-bar .brand img { height: 64px; }
    /* En pantallas chicas vuelve al flujo para no montarse sobre el logo. */
    .header-plataforma { position: static; transform: none; flex: 1; max-width: none; text-align: center; }
    .header-plataforma .hp-title { font-size: 1rem; }
    .header-plataforma .hp-sub { font-size: .72rem; }
    .header-tag { padding-left: 12px; max-width: 180px; }
    .header-tag .ht-main { font-size: 10.5px; }
    .header-tag .ht-sub { font-size: 9px; }
}
@media (max-width: 560px) {
    .header-tag { display: none; }
    .header-plataforma .hp-title { font-size: .95rem; }
    .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 16px; }
    /* Sigue cortando en varias líneas; solo se centra. */
    .footer-bottom span { text-align: center; max-width: 100%; }
}

/* Correo UBO ausente en una solicitud: los administradores lo consultan en SGA */
.correo-sga { color: var(--gris-texto); }

/* ============ Animaciones suaves ============ */
/* Todas terminan en "transform: none" para no dejar un transform residual que altere
   los elementos sticky (columna de gestión) ni los fixed (botón flotante). */
:root { --suave: cubic-bezier(.22, .61, .36, 1); }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-fila { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes plegar { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes salir { to { opacity: 0; transform: translateX(14px); } }
@keyframes pulso { 0% { transform: none; } 40% { transform: scale(1.18); } 100% { transform: none; } }

/* Entrada de la página: el título y luego los bloques, escalonados */
.hero { animation: aparecer .5s var(--suave) both; }
.contenedor > :is(.tarjeta, .resumen, .tabs-resultados, .gestiona-wrap, .centrado):not(.seccion-formulario) { animation: aparecer .5s var(--suave) both; }
.contenedor > :is(.tarjeta, .resumen, .tabs-resultados, .gestiona-wrap, .centrado):not(.seccion-formulario):nth-child(2) { animation-delay: .08s; }
.contenedor > :is(.tarjeta, .resumen, .tabs-resultados, .gestiona-wrap, .centrado):not(.seccion-formulario):nth-child(3) { animation-delay: .16s; }
.contenedor > :is(.tarjeta, .resumen, .tabs-resultados, .gestiona-wrap, .centrado):not(.seccion-formulario):nth-child(n+4) { animation-delay: .24s; }

/* Formulario desplegable: al cerrarse también se pliega con suavidad */
.seccion-formulario { animation: aparecer .35s var(--suave) both; }
.seccion-formulario.cerrando { animation: plegar .22s ease-in forwards; pointer-events: none; }

/* Pestañas Gráficos / Registros: la vista que aparece entra con un fundido */
#vista-graficos, #vista-registros { animation: aparecer .35s var(--suave) both; }

/* Avisos y mensajes */
.aviso-rut, .mensaje-error { animation: aparecer .3s var(--suave) both; }
.estado-rut { transition: color .2s ease; }

/* Documentos adjuntos: entran al agregarse y salen deslizándose al quitarse */
.archivo-card { transition: border-color .2s ease, box-shadow .2s ease; }
.archivo-card:hover { border-color: var(--ubo-celeste); box-shadow: 0 4px 12px rgba(0,47,108,.08); }
.archivo-card.entrando { animation: aparecer .3s var(--suave) both; }
.archivo-card.saliendo { animation: salir .2s ease-in forwards; pointer-events: none; }

/* Filas de la tabla: entran escalonadas al paginar, ordenar o filtrar por estado */
.tabla-registros tbody tr { animation: aparecer-fila .3s var(--suave) both; }
.tabla-registros.sin-animacion tbody tr { animation: none; }
.tabla-registros tbody tr, .tabla-registros tbody td { transition: background-color .2s ease; }

/* Tarjetas de indicadores: leve elevación al pasar el mouse */
.indicador, .dash-card { transition: transform .25s var(--suave), box-shadow .25s ease; }
.indicador:hover, .dash-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,47,108,.10); }
.dash-numero { transform-origin: left center; }
.dash-numero.pulso { animation: pulso .45s var(--suave); }

/* Botones: transición de color y una pequeña elevación */
.btn-enviar, .btn-secundario, .volver, .btn-filtrar, .btn-exportar, .btn-descargar-zip, .tab-btn, .pag-btn, .btn-gestiona {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--suave);
}
.btn-enviar:hover, .volver:hover, .btn-filtrar:hover, .btn-exportar:hover, .btn-descargar-zip:hover, .btn-gestiona:hover {
    transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,47,108,.18);
}
.btn-enviar:active, .volver:active, .btn-filtrar:active, .btn-exportar:active, .btn-descargar-zip:active, .btn-gestiona:active {
    transform: translateY(1px); box-shadow: none;
}
.btn-enviar:disabled { opacity: .75; cursor: progress; transform: none; box-shadow: none; }
.btn-limpiar { transition: color .2s ease; }
.btn-limpiar:hover { color: var(--ubo-azul); }

/* Quien pidió al sistema reducir el movimiento no ve animaciones (los cambios siguen ocurriendo). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}