/* ====================================================================
   CRIL · Gestoría Laboral — Paleta corporativa CRIL
   Verde esmeralda → teal (gradiente del logotipo) + turquesa claro
==================================================================== */
:root {
    --cril-verde: #1faf7f;
    --cril-teal: #0e8a8c;
    --cril-turquesa: #2ad5b6;
    --cril-oscuro: #0b5e60;
    --gris-fondo: #f2f7f6;
    --gris-texto: #2c3e50;
    --gris-suave: #7f9a96;
    --blanco: #ffffff;
    --rojo: #e74c3c;
    --ambar: #f39c12;
    --radius: 12px;
    --sombra: 0 2px 10px rgba(11, 94, 96, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--gris-fondo);
    color: var(--gris-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------ Barra superior */
.topbar {
    background: linear-gradient(135deg, var(--cril-verde) 0%, var(--cril-teal) 100%);
    color: var(--blanco);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 28px;
    flex-wrap: wrap;
    box-shadow: var(--sombra);
}
.logo { font-size: 1.35rem; font-weight: 800; letter-spacing: 2px; }
.logo-icon { color: var(--cril-turquesa); }
.logo-sub { font-size: .8rem; font-weight: 400; letter-spacing: 0; opacity: .85; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topbar nav a {
    color: var(--blanco); text-decoration: none; padding: 7px 13px;
    border-radius: 8px; font-size: .92rem; transition: background .15s;
}
.topbar nav a:hover { background: rgba(255,255,255,.18); }
.btn-nav { background: var(--cril-turquesa); color: var(--cril-oscuro) !important; font-weight: 700; }
.user-box { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.user-rol { padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.rol-empresa  { background: var(--cril-turquesa); color: var(--cril-oscuro); }
.rol-gestoria { background: #ffffff33; }
.rol-admin    { background: var(--ambar); color: #5b3a00; }
.btn-salir { color: var(--blanco); text-decoration: none; opacity: .85; font-size: .85rem; }
.btn-salir:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------ Contenido */
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 1.5rem; color: var(--cril-oscuro); margin-bottom: 20px; }
h2 { font-size: 1.1rem; color: var(--cril-teal); margin: 22px 0 12px; }

.card {
    background: var(--blanco); border-radius: var(--radius);
    box-shadow: var(--sombra); padding: 22px; margin-bottom: 20px;
}

/* KPIs del panel */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi {
    background: var(--blanco); border-radius: var(--radius); padding: 18px;
    box-shadow: var(--sombra); border-top: 4px solid var(--cril-verde); text-align: center;
}
.kpi.alerta { border-top-color: var(--rojo); }
.kpi.aviso  { border-top-color: var(--ambar); }
.kpi .num { font-size: 2rem; font-weight: 800; color: var(--cril-oscuro); }
.kpi .lbl { font-size: .82rem; color: var(--gris-suave); text-transform: uppercase; letter-spacing: .5px; }

/* ------------------------------------------------ Tablas */
table { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); }
th { background: var(--cril-oscuro); color: var(--blanco); text-align: left; padding: 11px 14px; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
td { padding: 11px 14px; border-bottom: 1px solid #e8f0ef; font-size: .92rem; }
tr:hover td { background: #f0faf8; }
tr.vencida td { background: #fdecea; }
tr.aviso td { background: #fef5e7; }

.badge { color: #fff; padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.plazo-vencida { color: var(--rojo); font-weight: 700; }
.plazo-aviso { color: var(--ambar); font-weight: 700; }

/* ------------------------------------------------ Formularios */
form.panel { display: grid; gap: 14px; }
label { font-size: .85rem; font-weight: 600; color: var(--cril-oscuro); display: block; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], select, textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid #cfe3e0;
    border-radius: 8px; font-size: .95rem; font-family: inherit; background: #fbfdfd;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cril-verde); background: #fff; }
textarea { min-height: 90px; resize: vertical; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .fila2 { grid-template-columns: 1fr; } }

.btn {
    background: linear-gradient(135deg, var(--cril-verde), var(--cril-teal));
    color: #fff; border: 0; padding: 11px 26px; border-radius: 8px;
    font-size: .95rem; font-weight: 700; cursor: pointer; transition: opacity .15s;
    text-decoration: none; display: inline-block;
}
.btn:hover { opacity: .9; }
.btn-sec { background: #e8f0ef; color: var(--cril-oscuro); }
.btn-peligro { background: var(--rojo); }
.btn-mini { padding: 6px 14px; font-size: .82rem; }

/* ------------------------------------------------ Flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .92rem; }
.flash.ok { background: #d9f7ef; color: #0b5e47; border: 1px solid var(--cril-turquesa); }
.flash.error { background: #fdecea; color: #922b21; border: 1px solid #f1948a; }

/* ------------------------------------------------ Login */
.login-bg {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cril-verde) 0%, var(--cril-teal) 60%, var(--cril-oscuro) 100%);
    padding: 20px;
}
.login-card {
    background: var(--blanco); border-radius: 18px; padding: 38px 34px;
    width: 100%; max-width: 410px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.login-card .logo-grande { text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: 4px; color: var(--cril-teal); margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--gris-suave); margin-bottom: 24px; font-size: .9rem; }
.perfil-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.perfil-tabs label {
    border: 2px solid #cfe3e0; border-radius: 10px; padding: 12px;
    text-align: center; cursor: pointer; font-weight: 700; color: var(--gris-suave);
}
.perfil-tabs input { display: none; }
.perfil-tabs input:checked + span { color: var(--cril-teal); }
.perfil-tabs label:has(input:checked) { border-color: var(--cril-verde); background: #eafaf5; color: var(--cril-teal); }

/* ------------------------------------------------ Chat */
.chat-caja { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.msg { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; }
.msg .meta { font-size: .72rem; opacity: .7; margin-top: 4px; }
.msg.mio { align-self: flex-end; background: linear-gradient(135deg, var(--cril-verde), var(--cril-teal)); color: #fff; border-bottom-right-radius: 4px; }
.msg.otro { align-self: flex-start; background: #e8f0ef; border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 10px; margin-top: 14px; }
.chat-form textarea { flex: 1; min-height: 48px; }

/* ------------------------------------------------ Línea de tiempo (traza) */
.timeline { list-style: none; border-left: 3px solid var(--cril-turquesa); margin-left: 8px; padding-left: 20px; }
.timeline li { margin-bottom: 16px; position: relative; }
.timeline li::before {
    content: ''; position: absolute; left: -27px; top: 4px;
    width: 11px; height: 11px; border-radius: 50%; background: var(--cril-verde);
    border: 2px solid #fff; box-shadow: 0 0 0 2px var(--cril-turquesa);
}
.timeline .t-fecha { font-size: .78rem; color: var(--gris-suave); }
.timeline .t-hash { font-size: .68rem; color: #b0c4c0; font-family: monospace; word-break: break-all; }

.sello { background: #eafaf5; border: 1px dashed var(--cril-verde); border-radius: 8px; padding: 10px 14px; font-size: .8rem; font-family: monospace; word-break: break-all; color: var(--cril-oscuro); }
.integra-ok { color: #27ae60; font-weight: 700; }
.integra-mal { color: var(--rojo); font-weight: 700; }

/* ------------------------------------------------ Checks enviado/visto */
.check { color: #9fb8b4; font-weight: 700; letter-spacing: -2px; cursor: default; }
.check.visto { color: var(--cril-turquesa); }
.msg.mio .check { color: rgba(255,255,255,.55); }
.msg.mio .check.visto { color: #7dfbe0; }
.no-leidos {
    background: var(--ambar); color: #fff; border-radius: 20px;
    padding: 2px 9px; font-size: .75rem; font-weight: 700; white-space: nowrap;
}

/* ------------------------------------------------ Filtros */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }
.filtros > div { min-width: 150px; }

footer { text-align: center; padding: 18px; font-size: .8rem; color: var(--gris-suave); }
footer a { color: var(--cril-teal); }