/* ==========================================================================
   CareIA — panel de la direccion
   Un solo sistema: colores, tipografia y espaciado salen de estas variables.
   La fuente es la del sistema a proposito: una aplicacion de salud no le avisa
   a un tercero (Google Fonts) cada vez que alguien abre una pantalla.
   ========================================================================== */

:root {
    --marca: #0e6e66;
    --marca-oscura: #0a524c;
    --marca-suave: #e6f3f1;
    --marca-borde: #b8dcd7;

    --tinta: #132033;
    --tinta-2: #3b4a5e;
    --apagado: #67768b;
    --tenue: #94a2b5;

    --fondo: #f3f5f8;
    --superficie: #ffffff;
    --superficie-2: #f8fafc;
    --linea: #e3e8ef;
    --linea-fuerte: #cdd6e1;

    --ok: #0e6e66;      --ok-fondo: #e3f4ef;
    --aviso: #9a5b06;   --aviso-fondo: #fff3df;
    --alerta: #b42318;  --alerta-fondo: #fdecea;
    --info: #2453b8;    --info-fondo: #e9effd;
    --neutro: #4b5a6e;  --neutro-fondo: #eef2f6;

    --lateral: #0f1a2a;
    --lateral-2: #17263a;
    --lateral-texto: #c9d4e3;
    --lateral-tenue: #7d8ea6;

    --radio: 10px;
    --radio-chico: 7px;
    --sombra: 0 1px 2px rgba(16, 28, 45, .05), 0 1px 3px rgba(16, 28, 45, .06);
    --sombra-alta: 0 12px 32px rgba(16, 28, 45, .10), 0 2px 6px rgba(16, 28, 45, .06);

    --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--fuente-titulo); color: var(--tinta); letter-spacing: -.01em; }
h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: 650; }
h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 2px; }

/* ---------------------------------------------------------------- estructura */

.page { display: flex; min-height: 100vh; }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 252px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--lateral);
    color: var(--lateral-texto);
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: #fff; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #14a394, var(--marca));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-nombre { font-family: var(--fuente-titulo); font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.tenant-label { font-size: 12px; color: var(--lateral-tenue); font-weight: 500; }

.nav-grupo { margin-top: 14px; }
.nav-titulo {
    padding: 0 10px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--lateral-tenue);
}

.nav-link {
    display: flex; align-items: center; gap: 10px;
    color: var(--lateral-texto);
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.nav-link:hover { background: var(--lateral-2); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--lateral-2); color: #fff; box-shadow: inset 3px 0 0 #2cc0ad; }
.nav-link.active svg { opacity: 1; color: #5fd6c6; }

.session-box {
    margin-top: auto;
    padding: 14px 8px 4px;
    border-top: 1px solid #22334a;
    display: flex; align-items: center; gap: 10px;
}
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: #23384f; color: #dce6f2; font-size: 13px; font-weight: 700;
}
.session-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.session-datos strong { color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-datos span { color: var(--lateral-tenue); font-size: 12px; }
.salir {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
    color: var(--lateral-tenue);
}
.salir:hover { background: var(--lateral-2); color: #fff; }
.salir svg { width: 18px; height: 18px; }

.menu-movil { display: none; }
.nav-cuerpo { display: flex; flex-direction: column; flex: 1; }

main { flex: 1; min-width: 0; padding: 28px 36px 48px; }
.contenido { max-width: 1320px; margin: 0 auto; }

/* --------------------------------------------------------------- encabezados */

.toolbar {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
section.toolbar:not(:first-child) { margin-top: 30px; margin-bottom: 14px; align-items: center; }
.eyebrow {
    margin: 0 0 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--marca);
}
.lead { color: var(--apagado); margin: 6px 0 16px; max-width: 75ch; }

/* ------------------------------------------------------------------- botones */

button, .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px;
    border: 1px solid transparent;
    background: var(--marca);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radio-chico);
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
button:hover { background: var(--marca-oscura); }
button.secondary {
    background: var(--superficie);
    color: var(--tinta-2);
    border-color: var(--linea-fuerte);
    box-shadow: var(--sombra);
}
button.secondary:hover { background: var(--superficie-2); border-color: var(--tenue); }
button:disabled, button:disabled:hover {
    background: #e7ecf2; color: var(--tenue); border-color: transparent; box-shadow: none; cursor: not-allowed;
}

/* --------------------------------------------------------------- formularios */

label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--tinta-2);
}
label small { font-weight: 500; color: var(--apagado); }

input, select, textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-chico);
    padding: 8px 11px;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit; font-size: 14px; font-weight: 400;
    transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent);
}
textarea { min-height: 84px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--marca); }

.form-band {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 22px;
}
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 18px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }
.check-row { flex-direction: row; align-items: center; gap: 10px; align-self: end; min-height: 40px; }
.check-row input { width: 18px; }

/* El alta va plegada: lo primero que se ve es el listado, no un formulario vacio. */
details.form-band { padding: 0; }
details.form-band > summary {
    list-style: none;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 600; color: var(--marca);
    border-radius: var(--radio);
}
details.form-band > summary::-webkit-details-marker { display: none; }
details.form-band > summary::before {
    content: "+";
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--marca-suave); color: var(--marca);
    font-size: 18px; font-weight: 600; line-height: 1;
}
details.form-band[open] > summary { border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; }
details.form-band[open] > summary::before { content: "–"; }
details.form-band > summary:hover { background: var(--superficie-2); }
details.form-band > :not(summary) { margin: 18px 20px 20px; }

.form-error {
    margin: 0; padding: 10px 12px; border-radius: var(--radio-chico);
    background: var(--alerta-fondo); color: var(--alerta); font-size: 14px; font-weight: 500;
}
.form-message { margin-left: 12px; color: var(--ok); font-weight: 600; font-size: 14px; }
.form-message.inline { display: block; margin: 0 0 16px; }

/* ------------------------------------------------------------------- tarjetas */

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.metric {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    overflow: hidden;
}
.metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--marca); opacity: .8; }
.metric.warning::before { background: #d98b14; }
.metric.danger::before { background: var(--alerta); }
.metric span { color: var(--apagado); font-size: 13px; font-weight: 600; }
.metric strong { font-family: var(--fuente-titulo); font-size: 30px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric.warning strong { color: var(--aviso); }
.metric.danger strong { color: var(--alerta); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

/* Las listas son UNA tarjeta con renglones: veinte tarjetas sueltas cansan la vista. */
.list {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.row-card {
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border-bottom: 1px solid var(--linea);
}
.row-card:last-child { border-bottom: 0; }
.row-card:hover { background: #fafbfd; }
.row-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-card strong { font-weight: 600; }
.row-card span { color: var(--apagado); font-size: 14px; }
.row-card .chip { font-size: 12px; }
.row-card > .row-actions { flex-wrap: nowrap; flex-shrink: 0; }
.row-card > .row-actions button { min-height: 34px; padding: 6px 12px; }
.row-actions { display: flex; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.row-actions label { flex-direction: row; align-items: center; gap: 8px; }
.row-actions input, .row-actions select { width: auto; }
.status { font-size: 13px; font-weight: 600; color: var(--apagado); white-space: nowrap; }

.vacio {
    background: var(--superficie);
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    padding: 28px;
    text-align: center;
    color: var(--apagado);
}

.cargando { color: var(--apagado); padding: 40px 0; text-align: center; }

/* -------------------------------------------------------------------- tablas */

.table-shell {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th {
    position: sticky; top: 0;
    background: var(--superficie-2);
    color: var(--apagado);
    font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfd; }
td strong { font-weight: 600; }
.tabla-compacta table { min-width: 0; }
.tabla-compacta th, .tabla-compacta td { padding: 9px 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- chips */

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.6;
    background: var(--neutro-fondo); color: var(--neutro);
    white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.chip.ok { background: var(--ok-fondo); color: var(--ok); }
.chip.aviso, .chip.falta { background: var(--aviso-fondo); color: var(--aviso); }
.chip.alerta, .chip.atraso { background: var(--alerta-fondo); color: var(--alerta); }
.chip.info { background: var(--info-fondo); color: var(--info); }

/* --------------------------------------------------------------------- pestañas */

.tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 22px; padding: 4px;
    background: #e8edf3; border-radius: 10px; width: fit-content; max-width: 100%;
}
.tabs button {
    min-height: 34px;
    background: transparent; color: var(--tinta-2);
    border: 0; box-shadow: none; font-weight: 600;
}
.tabs button:hover { background: rgba(255, 255, 255, .6); }
.tabs button.activa { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra); }

/* ------------------------------------------------------------------- el legajo */

.hoja {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 32px 36px;
}
.hoja h2 {
    margin: 30px 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--tinta);
    font-size: 16px; text-transform: uppercase; letter-spacing: .04em;
}
.hoja h2:first-of-type { margin-top: 20px; }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
.dato span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--apagado); }
.dato strong { font-size: 15px; font-weight: 600; }

/* ================================================================ el ingreso */

.ingreso { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

.ingreso-marca {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px;
    color: #e6f2f0;
    background:
        radial-gradient(1100px 600px at -10% -10%, rgba(44, 192, 173, .35), transparent 60%),
        radial-gradient(900px 500px at 120% 110%, rgba(36, 83, 184, .35), transparent 55%),
        linear-gradient(160deg, #0d3b3f 0%, #0f1a2a 70%);
}
.ingreso-marca .brand { padding: 0; }
.ingreso-marca .brand-nombre { font-size: 22px; }
.ingreso-titular { max-width: 520px; }
.ingreso-titular h1 { color: #fff; font-size: 38px; line-height: 1.15; margin-bottom: 16px; }
.ingreso-titular p { margin: 0; color: #b9cdd0; font-size: 17px; line-height: 1.55; }
.ingreso-puntos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.ingreso-puntos li { display: flex; gap: 12px; align-items: flex-start; color: #d5e3e4; font-size: 15px; }
.ingreso-puntos svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: #5fd6c6; }
.ingreso-pie { font-size: 13px; color: #8aa3ab; }

.ingreso-form { display: grid; place-items: center; padding: 40px 24px; background: var(--superficie); }
.login-panel { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.login-panel h2 { font-size: 24px; margin: 0; }
.login-panel .lead { margin: -10px 0 4px; }
.login-panel button { width: 100%; min-height: 44px; font-size: 15px; margin-top: 4px; }
.login-panel input { min-height: 44px; }
.login-ayuda { font-size: 13px; color: var(--apagado); text-align: center; margin: 4px 0 0; }

/* ================================================================== celular */

@media (max-width: 1100px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-4 { grid-column: span 2; }
    .split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .page { flex-direction: column; }
    .sidebar {
        position: sticky; z-index: 20;
        width: 100%; height: auto;
        padding: 10px 14px;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        overflow: visible;
    }
    .brand { padding: 0; flex: 1; }
    .menu-movil {
        display: grid; place-items: center;
        width: 40px; height: 40px; min-height: 0; padding: 0;
        background: var(--lateral-2); color: #fff; border-radius: 9px;
    }
    .menu-movil svg { width: 22px; height: 22px; }
    .nav-cuerpo { display: none; width: 100%; max-height: 75vh; overflow-y: auto; padding: 6px 0 4px; }
    .sidebar.abierto .nav-cuerpo { display: flex; }
    .session-box { margin-top: 10px; }

    main { padding: 20px 16px 40px; }
    h1 { font-size: 22px; }
    .toolbar { align-items: flex-start; }
    .form-grid, .form-grid.two { grid-template-columns: 1fr; }
    .span-2, .span-4 { grid-column: auto; }
    .datos { grid-template-columns: 1fr 1fr; }
    .hoja { padding: 20px; }
    .row-card { flex-direction: column; align-items: flex-start; }

    .ingreso { grid-template-columns: 1fr; }
    .ingreso-marca { padding: 28px 24px 30px; }
    .ingreso-titular h1 { font-size: 26px; }
    .ingreso-titular p { font-size: 15px; }
    .ingreso-puntos, .ingreso-pie { display: none; }
    .ingreso-titular { margin-top: 26px; }
    .ingreso-form { align-items: start; padding: 32px 20px; }
}

/* ================================================================== en papel */

@media print {
    .sidebar, .toolbar, .tabs, button, .no-imprimir { display: none !important; }
    main { padding: 0; }
    body { background: white; font-size: 12px; }
    .hoja { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
    .hoja h2 { break-after: avoid; }
    .table-shell { box-shadow: none; border: 0; }
    table { break-inside: auto; }
    tr { break-inside: avoid; }
    @page { margin: 14mm; }
}

/* --------------------------------------------------------- celdas de tabla */
td.sin-corte { white-space: nowrap; }
td:has(> .chip) { white-space: nowrap; }
.celda-doble { display: flex; flex-direction: column; line-height: 1.3; }
.celda-doble small { color: var(--apagado); font-size: 12px; }

/* Un titulo que sigue a una tabla o una lista necesita aire arriba. */
.table-shell + h2, .list + h2, .split + h2, .vacio + h2, .table-shell + section, .list + section { margin-top: 30px; }