/* ============================================================
   estilos.css — Fondo Documental SGC
   Hoja de estilos compartida por todas las páginas.
   ============================================================ */

:root {
    --azul: #142a45;
    --azul-hover: #0d1c30;
    --azul-bg: #eef4fc;
    --azul-texto: #0c447c;

    --verde-bg: #e7f7ef;
    --verde-texto: #146c43;
    --verde-borde: #b6e4cd;

    --ambar-bg: #fff6e0;
    --ambar-texto: #8a6d1a;
    --ambar-borde: #f5e2a8;

    --rojo-bg: #fdecec;
    --rojo-texto: #a31212;
    --rojo-borde: #f3c6c6;

    --gris-texto: #667085;
    --gris-borde: #e4e7ec;
    --gris-fondo: #f7f8fa;

    --superficie: #ffffff;
    --radio: 10px;
    --radio-sm: 7px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
}

body {
    background: var(--gris-fondo);
    color: #1d2939;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Header ─────────────────────────────────────────────── */
.header {
    background: var(--azul);
    color: #fff;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(20, 42, 69, .15);
}
.header strong { font-size: 1.02rem; font-weight: 600; letter-spacing: .1px; }
.header .btn-outline-light { border-color: rgba(255,255,255,.35); font-size: .82rem; }
.header .btn-outline-light:hover { background: rgba(255,255,255,.12); }

.badge-rol {
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: .74rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: .2px;
}

/* ── Contenedor de página ──────────────────────────────────*/
.container { max-width: 1100px; }
.container.py-4, .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

h5, h6 { font-weight: 600; color: #101828; }

/* ── Tarjetas ───────────────────────────────────────────── */
.card {
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.card .card-body { padding: 1.5rem 1.6rem; }

/* ── Tablas ─────────────────────────────────────────────── */
.table-wrap-sgc {
    background: var(--superficie);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}
table { margin-bottom: 0; }
table thead tr {
    background: #fafbfc;
    border-bottom: 1px solid var(--gris-borde);
}
table thead th {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris-texto);
    padding: 12px 16px !important;
    border: none !important;
}
table tbody td {
    padding: 13px 16px !important;
    border-top: 1px solid #f0f1f3 !important;
    vertical-align: middle;
    font-size: .87rem;
}
table tbody tr { transition: background .1s; }
table tbody tr:hover { background: #fafbfc; }

/* ── Badges de estado ───────────────────────────────────── */
.badge-ok, .badge-estado-finalizado {
    background: var(--verde-bg); color: var(--verde-texto); border: 1px solid var(--verde-borde);
    font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 20px;
}
.badge-warn, .badge-estado-borrador {
    background: var(--ambar-bg); color: var(--ambar-texto); border: 1px solid var(--ambar-borde);
    font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 20px;
}
.badge-danger {
    background: var(--rojo-bg); color: var(--rojo-texto); border: 1px solid var(--rojo-borde);
    font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 20px;
}
.badge-pendiente {
    background: var(--azul-bg); color: var(--azul-texto);
    font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 20px;
}

/* ── Botones ────────────────────────────────────────────── */
.btn { border-radius: var(--radio-sm); font-weight: 500; font-size: .85rem; }
.btn-primary, .btn-sgc-primary {
    background: var(--azul); border-color: var(--azul); color: #fff;
}
.btn-primary:hover, .btn-sgc-primary:hover { background: var(--azul-hover); border-color: var(--azul-hover); }
.btn-outline-secondary { border-color: #d0d5dd; color: #344054; }
.btn-outline-secondary:hover { background: #f9fafb; border-color: #98a2b3; color: #1d2939; }
.btn-outline-danger { border-color: #fda29b; color: #b42318; }
.btn-outline-danger:hover { background: var(--rojo-bg); border-color: #b42318; }
.btn-sm { padding: 5px 12px; font-size: .8rem; }

.btn-accion {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; font-size: .78rem; font-weight: 500;
    border-radius: 7px; border: 1px solid var(--gris-borde);
    background: #fff; color: #344054; text-decoration: none;
    transition: background .1s, border-color .1s;
}
.btn-accion:hover { background: #f9fafb; border-color: #98a2b3; color: #1d2939; }
.btn-accion.peligro { color: #b42318; border-color: #fda29b; }
.btn-accion.peligro:hover { background: var(--rojo-bg); }
.btn-accion i { font-size: .95rem; }

/* ── Formularios ────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radio-sm);
    border-color: #d0d5dd;
    font-size: .87rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 42, 69, .1);
}
.form-label { font-size: .8rem; font-weight: 500; color: #344054; margin-bottom: 5px; }

/* ── Alertas ────────────────────────────────────────────── */
.alert { border-radius: var(--radio-sm); font-size: .85rem; border: 1px solid transparent; }
.alert-danger { background: var(--rojo-bg); color: var(--rojo-texto); border-color: var(--rojo-borde); }
.alert-success { background: var(--verde-bg); color: var(--verde-texto); border-color: var(--verde-borde); }

/* ── Buscador ───────────────────────────────────────────── */
.buscador-sgc { max-width: 360px; }
.buscador-sgc .form-control { border-radius: var(--radio-sm) 0 0 var(--radio-sm); }

/* ── Paginación ─────────────────────────────────────────── */
.pagina-btn { min-width: 34px; border-radius: 7px !important; margin: 0 1px; }

/* ── Modales ────────────────────────────────────────────── */
.modal-content { border-radius: var(--radio); border: none; box-shadow: 0 8px 32px rgba(16,24,40,.18); }
.modal-header { border-bottom: 1px solid var(--gris-borde); padding: 1.1rem 1.4rem; }
.modal-body { padding: 1.3rem 1.4rem; }
.modal-footer { border-top: 1px solid var(--gris-borde); padding: 1rem 1.4rem; }
.modal-title { font-weight: 600; font-size: .98rem; }

/* ── Páginas de autenticación ───────────────────────────── */
.pagina-auth {
    background: var(--gris-fondo);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.card-login {
    max-width: 410px;
    margin: auto;
    border: 1px solid var(--gris-borde);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, .07);
}
.card-login .card-body { padding: 2.4rem 2.1rem; }
.logo-badge {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--azul-bg); display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

/* ── Estado vacío ───────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gris-texto); }
.empty-state i { font-size: 2rem; color: #d0d5dd; margin-bottom: .75rem; display: block; }