:root {
    --azul: #001D5B;
    --azul-oscuro: #001340;
    --azul-medio: #0a2f78;
    --azul-claro: #123d8f;
    --amarillo: #EDCA03;
    --amarillo-suave: #fff8cc;
    --rojo: #FB1F04;
    --rojo-suave: #ffe9e6;
    --blanco: #ffffff;
    --fondo: #f4f6fb;
    --texto: #16244a;
    --muted: #68748c;
    --borde: #e1e6f0;
    --sombra: 0 5px 24px rgba(0, 29, 91, .07);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--azul); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; color: var(--azul); font-size: 27px; font-weight: 900; letter-spacing: -.4px; }
h2 { font-size: 16px; }

/* ----------------------------- Estructura ------------------------------ */
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 282px;
    background: var(--azul);
    transition: transform .22s ease;
}
.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 282px;
}
.contenedor {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: 1520px;
    padding: 0 32px 32px;
}
.cabecera-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 0 20px; flex-wrap: wrap; }
.cabecera-pagina p { margin: 0; color: var(--muted); font-size: 13px; }

/* ------------------------------- Sidebar ------------------------------- */
.sidebar-menu.ui.vertical.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-bottom: 106px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.sidebar-menu.ui.menu .item {
    padding: 11px 20px;
    color: #dbe3f4;
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
}
.sidebar-menu.ui.menu .item > i.icon {
    width: 22px;
    margin-right: 6px;
    color: #93a6d3;
    font-size: 13px;
    text-align: center;
}
.sidebar-menu.ui.menu .item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-menu.ui.menu .item:hover > i.icon { color: var(--amarillo); }
.sidebar-menu.ui.inverted.menu .active.item,
.sidebar-menu.ui.menu .item.active {
    margin: 2px 10px;
    padding: 11px 10px;
    border-radius: 8px;
    background: rgba(237, 202, 3, .16);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--amarillo);
}
.sidebar-menu.ui.menu .item.active > i.icon { color: var(--amarillo); }

.marca-item { display: flex !important; gap: 13px; align-items: center; padding: 28px 22px 22px !important; }
.marca-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--amarillo);
    color: var(--azul);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .4px;
}
.marca-texto strong { display: block; color: #fff; font-size: 15px; line-height: 1.2; }
.marca-texto small { display: block; color: #aebce0; font-size: 12px; }

.menu-titulo {
    padding: 12px 22px 8px !important;
    color: #7f91bf !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.menu-pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block !important;
    padding: 18px 22px 22px !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #8fa1cd !important;
    font-size: 11px !important;
}
.menu-pie span { display: block; color: #dbe3f4; font-weight: 600; }

.menu-movil {
    position: fixed;
    top: 9px;
    left: 12px;
    z-index: 1100;
    display: none !important;
    margin: 0 !important;
    background: var(--azul) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* -------------------------------- Top nav ------------------------------ */
.top-nav.ui.inverted.menu {
    min-height: 62px;
    margin: 0;
    border-radius: 0;
    background: var(--azul);
    box-shadow: 0 2px 12px rgba(0, 29, 91, .12);
}
.top-nav.ui.menu .item { padding: 10px 12px; }
.top-nav.ui.menu .right.menu > .item { display: flex; align-items: center; }
.top-nav.ui.menu .ui.button { margin: 0; }
.top-nav .ui.yellow.button { padding: 9px 16px; font-size: 12.5px; }

/* -------------------------------- Secciones ---------------------------- */
.ui.segment.panel {
    margin: 0 0 20px;
    padding: 22px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--blanco);
    box-shadow: var(--sombra);
}
.ui.segment.panel:last-child { margin-bottom: 0; }
.ui.segment.panel .panel-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}
.panel-header h2 { margin: 0 0 2px; color: var(--texto); font-size: 16px; font-weight: 700; }
.panel-header p { margin: 0; color: var(--muted); font-size: 12.5px; }
.panel-header .ui.button { flex-shrink: 0; }

.ui.grid { margin-bottom: 0; }
.ui.grid > .column > .ui.segment.panel,
.ui.grid > .row > .column > .ui.segment.panel { margin-bottom: 20px; }
.ui.grid > .column:last-child > .ui.segment.panel,
.ui.grid > .row > .column:last-child > .ui.segment.panel { margin-bottom: 0; }

/* ------------------------------- Estadísticas -------------------------- */
.ui.segment.stat-card { border-top: 3px solid var(--azul); }
.ui.segment.stat-card.amarillo { border-top-color: var(--amarillo); }
.stat-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-value { display: block; margin: 5px 0 2px; color: var(--azul); font-size: 30px; font-weight: 900; letter-spacing: -1px; }
.stat-detail { color: var(--muted); font-size: 11.5px; }

.progreso-cabecera { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.progreso-cabecera h2 { margin-bottom: 2px; font-size: 16px; font-weight: 700; }
.progreso-cabecera p { margin: 0; color: var(--muted); font-size: 12.5px; }
.porcentaje { color: var(--azul); font-size: 26px; font-weight: 900; }
.ui.progress { margin: 0; border-radius: 999px; background: #e9edf8; }
.ui.progress .bar { min-width: 0; border-radius: 999px; background: var(--azul); transition: width .3s ease; }
.ui.progress.amarillo .bar { background: var(--amarillo); }
.mini-progress { width: 100%; min-width: 70px; height: 6px; overflow: hidden; border-radius: 999px; background: #e9edf8; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--amarillo); }
.col-progreso { width: 110px; }

/* -------------------------------- Tablas -------------------------------- */
.ui.table { margin: 0; border: 0; box-shadow: none; font-size: 13px; }
.ui.table thead th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--borde);
    background: transparent;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ui.table td { padding: 12px; border-top: 1px solid #edf0f7; vertical-align: middle; }
.ui.striped.table > tbody > tr:nth-child(2n) { background: #f8f9fd; }
.ui.table tr:last-child td { border-bottom: 0; }
.ui.table .vacio { padding: 34px 12px; color: var(--muted); text-align: center; }
.col-acciones { width: 1%; white-space: nowrap; }
.acciones-tabla { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.celda-mensaje { max-width: 460px; color: var(--muted); font-size: 12px; }
.ahora { white-space: nowrap; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.subtexto { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.etiqueta-manzana {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--azul);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}
.codigo-manzana { color: var(--azul); font-weight: 700; }

/* -------------------------------- Estados ------------------------------- */
.estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.estado.disponible { background: var(--amarillo-suave); color: #615300; }
.estado.asignado, .estado.activa, .estado.generada { background: #e7edfa; color: var(--azul); }
.estado.anulada, .estado.peligro { background: var(--rojo-suave); color: var(--rojo); }
.estado.pendiente { background: #fff3cd; color: #725a00; }
.estado.neutro { background: #eef1f7; color: #5f6b82; }

/* -------------------------------- Botones ------------------------------- */
.ui.button {
    border-radius: 8px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: none;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ui.primary.button, .ui.primary.buttons .button { background-color: var(--azul); }
.ui.primary.button:hover, .ui.primary.buttons .button:hover { background-color: var(--azul-medio); }
.ui.yellow.button, .ui.yellow.buttons .button { background-color: var(--amarillo); color: var(--azul); }
.ui.yellow.button:hover, .ui.yellow.buttons .button:hover { background-color: #f5d83a; color: var(--azul); }
.ui.red.button, .ui.red.buttons .button { background-color: var(--rojo); }
.ui.red.button:hover, .ui.red.buttons .button:hover { background-color: #d81a02; }
.ui.basic.button {
    background: #fff !important;
    color: var(--azul) !important;
    box-shadow: inset 0 0 0 1px var(--borde) !important;
}
.ui.basic.button:hover {
    background: #f5f8fd !important;
    box-shadow: inset 0 0 0 1px #b9c7e4 !important;
}
.ui.tiny.button { font-size: 11.5px; }
.ui.button.texto { padding: 4px 0; background: transparent !important; box-shadow: none !important; color: var(--azul) !important; }
.ui.button.texto:hover { background: transparent !important; text-decoration: underline; }
.ui.buttons .button { border-radius: 0; }

/* -------------------------------- Mensajes ------------------------------ */
.ui.message.mensaje {
    position: relative;
    margin: 0 0 10px;
    padding: 13px 42px 13px 16px;
    border-radius: 10px;
    border-left: 4px solid var(--azul);
    background: #eef2fa;
    color: var(--azul);
    box-shadow: none;
    font-size: 13px;
}
.ui.message.mensaje.success { border-left-color: var(--amarillo); background: var(--amarillo-suave); color: #5d5000; }
.ui.message.mensaje.warning { border-left-color: var(--amarillo); background: #fffbdc; color: #6b5a00; }
.ui.message.mensaje.error { border-left-color: var(--rojo); background: var(--rojo-suave); color: #8f1806; }
.ui.message.mensaje.info { border-left-color: var(--azul); background: #eef2fa; color: var(--azul); }
.ui.message > .close.icon { top: .75em; right: .8em; color: inherit; opacity: .55; cursor: pointer; }
.ui.message > .close.icon:hover { opacity: 1; }

/* -------------------------------- Avisos -------------------------------- */
.aviso {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sombra);
}
.aviso h2 { margin-bottom: 3px; font-size: 16px; font-weight: 700; }
.aviso p { margin: 0; color: var(--muted); font-size: 13px; }
.aviso.destacado { border-left: 4px solid var(--amarillo); background: linear-gradient(120deg, #fffdf0, #fff); }
.aviso.suave { padding: 12px 14px; background: #f6f8fd; box-shadow: none; color: var(--muted); font-size: 12px; }
.aviso.advertencia { border-left: 4px solid var(--amarillo); background: #fffbdc; }
.aviso.advertencia p { color: #6b5a00; }

/* ------------------------------- Formularios ---------------------------- */
.ui.form .field { margin-bottom: 18px; }
.ui.form .field > label { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="search"],
.ui.form input[type="number"], .ui.form input[type="date"], .ui.form input[type="tel"],
.ui.form textarea, .ui.form select {
    border: 1px solid #d6dfd8;
    border-radius: 7px;
    color: var(--texto);
    font-family: "Lato", sans-serif;
    font-size: 13px;
}
.ui.form input:not([type]):focus, .ui.form input[type="text"]:focus, .ui.form input[type="search"]:focus,
.ui.form input[type="number"]:focus, .ui.form input[type="date"]:focus, .ui.form input[type="tel"]:focus,
.ui.form textarea:focus, .ui.form select:focus {
    border-color: var(--azul);
    box-shadow: none;
    outline: none;
}
.ui.form .field .help, .ayuda { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.error, .ui.form .field .error { color: var(--rojo) !important; font-size: 11.5px; font-weight: 600; }
.ui.form .field.error input, .ui.form .field.error select, .ui.form .field.error textarea { border-color: var(--rojo); }
.ui.form textarea { min-height: 92px; }

.ui.dropdown { border-radius: 7px; }
.ui.selection.dropdown {
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid #d6dfd8;
    color: var(--texto);
    font-family: "Lato", sans-serif;
    font-size: 13px;
}
.ui.selection.dropdown:hover { border-color: #b9c7e4; }
.ui.selection.dropdown.active, .ui.selection.dropdown.visible, .ui.selection.dropdown:focus {
    border-color: var(--azul);
    box-shadow: none;
}
.ui.selection.dropdown > .text { color: var(--texto); }
.ui.selection.dropdown > .dropdown.icon { color: var(--azul); }
.ui.dropdown .menu { border-color: var(--borde); }
.ui.dropdown .menu > .item { color: var(--texto); font-size: 13px; }
.ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .item.active { background: #eef2fb; color: var(--azul); }
.ui.dropdown .menu > .item.selected { color: var(--azul); font-weight: 700; }
.ui.form .fields { margin-bottom: 0; }

.archivo-oculto input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.archivo-nombre[readonly] { background: #fbfcff; }
.acciones-formulario { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.acciones-formulario form { margin: 0; }

/* --------------------------- Buscador personas -------------------------- */
.buscador-persona { position: relative; }
.resultados-busqueda {
    max-height: 270px;
    overflow-y: auto;
    margin: -8px 0 16px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 29, 91, .10);
}
.resultado-persona {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid #eef1f7;
    background: #fff;
    color: var(--texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.resultado-persona:last-child { border-bottom: 0; }
.resultado-persona:hover { background: #f4f7fd; }
.resultado-persona strong { display: block; font-size: 13px; }
.resultado-persona span { color: var(--muted); font-size: 11.5px; }
.resultado-vacio { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; }
.persona-seleccionada {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 14px;
    padding: 12px 14px;
    border: 1px solid #c9d6f2;
    border-radius: 10px;
    background: #eef2fb;
}
.persona-seleccionada strong { display: block; color: var(--azul); font-size: 13px; }
.persona-seleccionada span { color: var(--muted); font-size: 11.5px; }
.bloque-nueva-persona { margin-bottom: 8px; padding-top: 12px; border-top: 1px dashed var(--borde); }

.resumen-solar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    margin-top: 4px;
    padding: 14px 16px;
    border-left: 4px solid var(--amarillo);
    border-radius: 8px;
    background: #fffdf0;
    font-size: 12.5px;
}
.resumen-solar span { color: var(--muted); }
.resumen-solar strong { color: var(--azul); text-align: right; }

/* ------------------------------- Documentos ----------------------------- */
.documento-estado {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 15px 16px;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--azul);
    border-radius: 10px;
    background: #fbfcff;
}
.documento-estado.pendiente { border-left-color: var(--amarillo); }
.documento-estado strong { color: var(--azul); font-size: 13px; }
.hojas-esperadas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: #f6f8fd; color: var(--muted); font-size: 12px; }
.hojas-esperadas strong { color: var(--azul); }
.separador { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: #9aa5b9; font-size: 11px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.lista-explicativa { margin: 0 0 18px; padding-left: 18px; color: #4d5c7e; font-size: 12.5px; }
.lista-explicativa li { margin-bottom: 7px; }
.lista-explicativa code { padding: 1px 5px; border-radius: 4px; background: #eef2fa; color: var(--azul); font-size: 11.5px; }

/* -------------------------------- Detalle ------------------------------- */
.detalle-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.detalle-identidad { display: flex; align-items: center; gap: 16px; }
.avatar-inicial {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--azul);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
}
.detalle-identidad h2 { margin: 5px 0 2px; color: var(--azul); font-size: 21px; font-weight: 900; }
.detalle-identidad p { margin: 0; color: var(--muted); font-size: 13px; }
.detalle-identidad .ui.labels { display: flex; gap: 6px; }
.encabezado-detalle { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.encabezado-detalle > div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.acciones-detalle { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-datos { margin: 0 0 14px; }
.lista-datos > div { display: flex; gap: 16px; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef1f7; }
.lista-datos > div:last-child { border-bottom: 0; }
.lista-datos dt { color: var(--muted); font-size: 12px; }
.lista-datos dd { margin: 0; font-weight: 700; text-align: right; }
.observaciones { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #f6f8fd; }
.observaciones span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.observaciones p { margin: 0; font-size: 13px; }

/* ------------------------------- Paginación ----------------------------- */
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-top: 16px; flex-wrap: wrap; }
.pagina-numeros { display: flex; gap: 5px; flex-wrap: wrap; }
.paginacion .ui.button { margin: 0; }
.paginacion .pagina-numero.activo { background: var(--azul); color: #fff; box-shadow: none; }

/* --------------------------------- Footer ------------------------------- */
.pie { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: auto; padding: 24px 0 4px; color: #8a95ab; font-size: 11px; }

/* ------------------------------- Responsive ----------------------------- */
@media (max-width: 1200px) {
    .contenedor { padding: 0 24px 28px; }
}

@media (max-width: 992px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.abierto { transform: translateX(0); box-shadow: 12px 0 40px rgba(0, 20, 60, .25); }
    .main-content { margin-left: 0; }
    .menu-movil { display: inline-flex !important; }
    .top-nav.ui.menu { padding-left: 44px; }
    .cabecera-pagina { padding-top: 22px; }
    .contenedor { padding: 0 20px 28px; }
}

@media (max-width: 600px) {
    h1 { font-size: 22px; }
    .top-nav.ui.menu { min-height: 58px; }
    .top-nav .ui.yellow.button { padding: 8px 12px; font-size: 11.5px; }
    .contenedor { padding: 0 14px 24px; }
    .ui.segment.panel { padding: 18px 16px; }
    .acciones-formulario { width: 100%; }
    .acciones-formulario .ui.button { flex: 1; }
    .aviso { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------- Hero panel ----------------------------- */
.hero-panel {
    position: relative;
    display: flex;
    gap: 34px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 34px 38px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--azul) 0%, #062c7c 62%, var(--azul-claro) 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 29, 91, .18);
}
.hero-texto { position: relative; z-index: 2; max-width: 640px; }
.hero-kicker {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 11px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.hero-kicker i.icon { margin: 0; color: var(--amarillo); }
.hero-panel h2 { margin: 0 0 10px; color: #fff; font-size: 34px; font-weight: 900; letter-spacing: -.7px; line-height: 1.1; }
.hero-panel p { max-width: 560px; margin: 0 0 20px; color: #c9d6f2; font-size: 13.5px; }
.hero-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-panel .ui.yellow.button { font-size: 12.5px; }
.hero-panel .ui.inverted.basic.button {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45) !important;
}
.hero-panel .ui.inverted.basic.button:hover { background: rgba(255, 255, 255, .08) !important; }
.hero-visual { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 168px; }
.hero-donut {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(var(--amarillo) calc(var(--p) * 1%), rgba(255, 255, 255, .17) 0);
}
.donut-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
}
.donut-inner strong { font-size: 27px; font-weight: 900; line-height: 1; }
.donut-inner span { margin-top: 4px; color: #b9c8e8; font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; }
.hero-nota { color: #c9d6f2; font-size: 11.5px; }
.hero-deco { position: absolute; border-radius: 50%; }
.deco-uno { top: -120px; right: 130px; width: 260px; height: 260px; background: rgba(237, 202, 3, .10); }
.deco-dos { bottom: -80px; left: 44%; width: 160px; height: 160px; background: rgba(255, 255, 255, .05); }

/* ----------------------------- Estadísticas ----------------------------- */
.stat-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.stat-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2fa;
    color: var(--azul);
    font-size: 15px;
}
.stat-icon.amarillo { background: var(--amarillo-suave); color: #7c6900; }
.progreso-leyenda { display: flex; gap: 20px; margin-top: 12px; color: var(--muted); font-size: 11.5px; flex-wrap: wrap; }
.progreso-leyenda i.icon { margin: 0 4px 0 0; }
.leyenda-asignado { color: var(--azul); }
.leyenda-disponible { color: var(--amarillo); }

/* ----------------------------- Accesos rápidos -------------------------- */
.accesos-rapidos { margin-bottom: 20px; }
.ui.button.acceso {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 15px 17px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: #fff !important;
    color: var(--texto) !important;
    box-shadow: var(--sombra) !important;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease;
}
.ui.button.acceso:hover { border-color: #b9c7e4; transform: translateY(-1px); }
.acceso-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #eef2fa; color: var(--azul); font-size: 16px; }
.acceso-texto { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.acceso-texto strong { color: var(--azul); font-size: 13px; font-weight: 700; }
.acceso-texto small { color: var(--muted); font-size: 11px; }
.acceso-flecha { margin: 0 !important; color: #a9b5cb !important; }

/* --------------------------- Padrón por parroquia ----------------------- */
.parroquias-lista .parroquia-fila { margin-bottom: 15px; }
.parroquias-lista .parroquia-fila:last-child { margin-bottom: 0; }
.parroquia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 12.5px; }
.parroquia-cabecera strong { color: var(--azul); }
.parroquia-barra { height: 8px; overflow: hidden; border-radius: 999px; background: #edf0f8; }
.parroquia-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), #2b5bb5); }

/* ------------------------------ Últimas cargas --------------------------- */
.carga-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1f7; }
.carga-item:last-child { border-bottom: 0; }
.carga-icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--amarillo-suave); color: #7c6900; }
.carga-detalle { display: flex; flex-direction: column; flex: 1; }
.carga-detalle strong { color: var(--texto); font-size: 12.5px; }
.carga-detalle span { color: var(--muted); font-size: 11px; }

/* ------------------------------- Filtros --------------------------------- */
.filtros-acciones { display: flex; gap: 8px; align-items: flex-end; padding-top: 25px; }
.filtros-acciones .ui.button { margin: 0; }

/* ------------------------------- Responsive ------------------------------ */
@media (max-width: 900px) {
    .hero-panel { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .hero-visual { flex-direction: row; width: 100%; justify-content: flex-start; }
    .hero-donut { width: 118px; height: 118px; }
    .donut-inner { width: 88px; height: 88px; }
    .donut-inner strong { font-size: 22px; }
}

.tabla-scroll { width: 100%; overflow-x: auto; }

@media (max-width: 600px) {
    .top-nav.ui.menu { padding-left: 42px; }
    .top-nav .right.menu { display: flex; flex-wrap: nowrap; gap: 3px; }
    .top-nav .right.menu > .item { padding: 6px 2px; }
    .top-nav .ui.button { padding: 7px 9px; font-size: 10.5px; }
    .top-nav .ui.button i.icon { margin-right: 2px; }
}

/* ------------------------------- Usuario ------------------------------- */
.menu-usuario {
    display: flex !important;
    gap: 10px;
    align-items: center;
    margin: 12px 10px 0;
    padding: 12px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.usuario-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(237, 202, 3, .18);
    color: var(--amarillo);
    font-size: 13px;
    font-weight: 900;
}
.usuario-datos { flex: 1; min-width: 0; }
.usuario-datos strong { display: block; overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.usuario-datos span { display: block; color: #aebce0; font-size: 10.5px; }
.menu-usuario form { margin: 0; }
.menu-usuario .ui.basic.icon.button {
    margin: 0 !important;
    background: transparent !important;
    color: #dbe3f4 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}
.menu-usuario .ui.basic.icon.button:hover { background: rgba(255, 255, 255, .08) !important; }

/* --------------------------------- Login -------------------------------- */
.login-page { background: var(--fondo); }
.login-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 64px 68px;
    background: linear-gradient(135deg, var(--azul) 0%, #062c7c 64%, var(--azul-claro) 100%);
    color: #fff;
}
.login-deco { position: absolute; border-radius: 50%; }
.login-deco.uno { top: -150px; right: -70px; width: 420px; height: 420px; background: rgba(237, 202, 3, .10); }
.login-deco.dos { bottom: -110px; left: 30%; width: 260px; height: 260px; background: rgba(255, 255, 255, .05); }
.login-marca { position: relative; z-index: 2; display: flex; gap: 12px; align-items: center; margin-bottom: 54px; }
.marca-icono.grande { width: 52px; height: 52px; font-size: 15px; }
.login-marca-texto strong { display: block; color: #fff; font-size: 17px; font-weight: 900; line-height: 1.1; }
.login-marca-texto small { display: block; color: #aebce0; font-size: 12px; }
.login-kicker { position: relative; z-index: 2; display: inline-flex; gap: 8px; align-items: center; width: fit-content; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.login-kicker i.icon { margin: 0; color: var(--amarillo); }
.login-brand h1 { position: relative; z-index: 2; margin: 0 0 18px; color: #fff; font-size: 52px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.02; }
.login-ilustracion { position: relative; z-index: 2; width: 100%; max-width: 640px; margin-top: 8px; }
.login-ilustracion img { display: block; width: 100%; height: auto; }
.login-panel { display: flex; align-items: center; justify-content: stretch; padding: 48px 6vw; background: #fff; }
.ui.segment.login-card { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-card-header { margin-bottom: 28px; text-align: left; }
.login-icono { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px; border-radius: 12px; background: #eef2fa; color: var(--azul); font-size: 18px; }
.login-card-header h2 { margin: 0 0 5px; color: var(--azul); font-size: 24px; font-weight: 900; }
.login-card-header p { margin: 0; color: var(--muted); font-size: 12.5px; }
.login-card .field { margin-bottom: 18px; }
.login-card .ui.left.icon.input { width: 100%; }
.login-card .ui.left.icon.input > input { height: 48px; font-size: 14px; }
.login-card .ui.primary.fluid.button { margin-top: 8px; padding: 14px 18px; font-size: 14px; }
.login-pie { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde); color: var(--muted); font-size: 11px; text-align: center; }
.login-pie i.icon { margin-right: 4px; color: var(--azul); }

.ui.form input[type="password"] { border: 1px solid #d6dfd8; border-radius: 7px; color: var(--texto); font-family: "Lato", sans-serif; font-size: 13px; }
.ui.form input[type="password"]:focus { border-color: var(--azul); box-shadow: none; outline: none; }

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand { min-height: auto; padding: 38px 26px 34px; }
    .login-marca { margin-bottom: 24px; }
    .login-brand h1 { font-size: 36px; }
    .login-ilustracion { max-width: 100%; }
    .login-ilustracion img { max-height: 230px; object-fit: contain; object-position: left center; }
    .login-panel { padding: 30px 22px; }
    .ui.segment.login-card { padding: 0; }
}