/* ==================================================================
   Transportes Con Con Ltda. — Estilos del panel administrativo
   ================================================================== */

:root {
    --azul-900: #071A33;
    --azul-800: #0B3A66;
    --azul-700: #0E4C92;
    --celeste:  #1E88E5;
    --gris-bg:  #F5F7FA;
    --gris-text:#4B5563;
    --amarillo: #F4B000;
    --verde:    #16A34A;
    --rojo:     #DC2626;
    --border:   #E5EAF0;
    --shadow-sm:0 2px 8px rgba(7,26,51,.06);
    --shadow:   0 10px 30px rgba(7,26,51,.10);
    --radius:   14px;
    --radius-sm:10px;
    --sidebar-w:260px;
    --font-body:'Inter','Segoe UI',sans-serif;
}

* { box-sizing: border-box; }
body { font-family: var(--font-body); margin: 0; }

.admin-body { background: var(--gris-bg); color: var(--gris-text); }
.req { color: var(--rojo); }
.brand-mark { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--amarillo); color: var(--azul-900); font-size: 1.25rem; }
.brand-mark-lg { width: 64px; height: 64px; font-size: 2rem; border-radius: 16px; }

/* ===================== LOGIN ===================== */
.admin-login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, #0E4C92 0%, #071A33 60%);
    padding: 1.5rem;
}
.login-wrapper { width: 100%; max-width: 420px; }
.login-card { background: #fff; border-radius: 18px; padding: 2.5rem 2rem; box-shadow: 0 25px 60px rgba(0,0,0,.35); animation: loginIn .5s ease; }
@keyframes loginIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-logo { max-height: 64px; margin-bottom: .5rem; }
.brand-mark-lg { margin: 0 auto .75rem; box-shadow: 0 8px 20px rgba(244,176,0,.4); }
.login-title { font-size: 1.4rem; font-weight: 700; color: var(--azul-900); margin: .5rem 0 .15rem; }
.login-sub { color: var(--gris-text); font-size: .9rem; margin: 0; }
.login-form .form-label { font-weight: 600; color: var(--azul-900); font-size: .9rem; }
.input-icon { position: relative; }
.input-icon > i:first-child { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--gris-text); pointer-events: none; }
.input-icon .form-control { padding-left: 2.5rem; }
.input-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gris-text); cursor: pointer; padding: .25rem; }
.input-toggle:hover { color: var(--azul-700); }
.login-back { display: block; text-align: center; margin-top: 1.25rem; color: var(--gris-text); font-size: .9rem; text-decoration: none; }
.login-back:hover { color: var(--azul-700); }
.login-footer { text-align: center; color: rgba(255,255,255,.6); font-size: .82rem; margin-top: 1.25rem; }

.btn { font-weight: 600; border-radius: var(--radius-sm); }
.btn-primary { background: var(--azul-700); border-color: var(--azul-700); }
.btn-primary:hover { background: var(--azul-800); border-color: var(--azul-800); }
.form-control:focus, .form-select:focus { border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(30,136,229,.15); }

/* ===================== LAYOUT ===================== */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--azul-900), var(--azul-800));
    color: rgba(255,255,255,.8); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
    transition: transform .3s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-logo { max-height: 40px; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-name { color: #fff; font-weight: 700; font-size: .98rem; }
.sidebar-sub { font-size: .72rem; color: var(--amarillo); letter-spacing: 1px; text-transform: uppercase; }
.sidebar-nav { flex: 1; padding: 1rem .75rem; overflow-y: auto; }
.sidebar-link {
    display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; border-radius: var(--radius-sm);
    color: rgba(255,255,255,.75); text-decoration: none; font-weight: 500; margin-bottom: .25rem; transition: all .2s ease;
}
.sidebar-link i { font-size: 1.15rem; width: 22px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--celeste); color: #fff; box-shadow: 0 6px 16px rgba(30,136,229,.4); }
.sidebar-footer { padding: 1rem .75rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-logout:hover { background: rgba(220,38,38,.2); color: #fff; }

.admin-overlay { display: none; position: fixed; inset: 0; background: rgba(7,26,51,.5); z-index: 1035; }
.admin-overlay.show { display: block; }

.admin-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
    height: 68px; background: #fff; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020;
}
.btn-sidebar-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--azul-900); cursor: pointer; }
.admin-page-title { font-size: 1.25rem; font-weight: 700; color: var(--azul-900); margin: 0; flex: 1; }
.admin-user { display: flex; align-items: center; gap: .75rem; }
.admin-user-name { display: block; font-weight: 600; color: var(--azul-900); font-size: .9rem; line-height: 1.1; }
.admin-user-role { display: block; font-size: .75rem; color: var(--gris-text); text-transform: capitalize; }
.admin-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--azul-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

.admin-content { flex: 1; padding: 1.75rem; }
.admin-footer-bar { padding: 1rem 1.5rem; color: var(--gris-text); font-size: .82rem; border-top: 1px solid var(--border); background: #fff; }

/* ===================== KPI CARDS ===================== */
.kpi-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; height: 100%; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kpi-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex-shrink: 0; }
.kpi-primary .kpi-icon { background: linear-gradient(135deg, var(--azul-700), var(--celeste)); }
.kpi-accent  .kpi-icon { background: linear-gradient(135deg, var(--amarillo), #e89a00); }
.kpi-info    .kpi-icon { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.kpi-warning .kpi-icon { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.kpi-value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--azul-900); line-height: 1; }
.kpi-label { display: block; font-size: .82rem; color: var(--gris-text); margin-top: .2rem; }

/* ===================== STATE CARDS ===================== */
.admin-section-head { margin: 0 0 1rem; }
.admin-section-title { font-size: 1.05rem; font-weight: 700; color: var(--azul-900); margin: 0; }
.state-card {
    display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem .5rem;
    text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; border-top: 3px solid var(--border);
}
.state-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.state-card i { font-size: 1.4rem; }
.state-value { font-size: 1.5rem; font-weight: 800; color: var(--azul-900); line-height: 1; }
.state-label { font-size: .78rem; color: var(--gris-text); font-weight: 600; }
.st-recibida     { border-top-color: #64748b; } .st-recibida i { color: #64748b; }
.st-revision     { border-top-color: var(--celeste); } .st-revision i { color: var(--celeste); }
.st-contactado   { border-top-color: #8b5cf6; } .st-contactado i { color: #8b5cf6; }
.st-entrevista   { border-top-color: var(--amarillo); } .st-entrevista i { color: var(--amarillo); }
.st-seleccionado { border-top-color: var(--verde); } .st-seleccionado i { color: var(--verde); }
.st-rechazado    { border-top-color: var(--rojo); } .st-rechazado i { color: var(--rojo); }

/* ===================== ADMIN CARD ===================== */
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.admin-card-title { font-size: 1.1rem; font-weight: 700; color: var(--azul-900); margin: 0; }

/* ===================== TABLES ===================== */
.admin-table { font-size: .92rem; }
.admin-table thead th { background: var(--gris-bg); color: var(--azul-900); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.admin-table tbody td { vertical-align: middle; border-color: var(--border); }
.admin-table tbody tr { transition: background .15s; }
.admin-table tbody tr:hover { background: #f8fafc; }
.row-unread { background: rgba(30,136,229,.04); }
.row-unread td:first-child { box-shadow: inset 3px 0 0 var(--celeste); }

/* ===================== BADGES DE ESTADO ===================== */
.badge-estado { display: inline-block; padding: .3rem .7rem; border-radius: 50px; font-size: .76rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.badge-recibida     { background: #e2e8f0; color: #475569; }
.badge-revision     { background: #dbeafe; color: #1d4ed8; }
.badge-contactado   { background: #ede9fe; color: #6d28d9; }
.badge-entrevista   { background: #fef3c7; color: #b45309; }
.badge-seleccionado { background: #dcfce7; color: #15803d; }
.badge-rechazado    { background: #fee2e2; color: #b91c1c; }
.badge-neutro       { background: #f1f5f9; color: #64748b; }

/* ===================== FILTROS / PAGINACIÓN ===================== */
.filters-bar { background: var(--gris-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1.25rem; }
.filters-bar .input-icon > i:first-child { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--gris-text); }
.filters-bar .input-icon .form-control { padding-left: 2.5rem; }
.admin-pagination { display: flex; justify-content: center; margin-top: 1.5rem; }
.pagination .page-link { color: var(--azul-700); border-radius: 8px; margin: 0 2px; border-color: var(--border); }
.pagination .page-item.active .page-link { background: var(--azul-700); border-color: var(--azul-700); }

/* ===================== BARRAS (por cargo) ===================== */
.bar-row { margin-bottom: 1rem; }
.bar-label { font-size: .88rem; font-weight: 600; color: var(--azul-900); }
.bar-value { font-size: .88rem; font-weight: 700; color: var(--azul-700); }
.bar-track { height: 8px; background: var(--gris-bg); border-radius: 50px; overflow: hidden; margin-top: .3rem; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--azul-700), var(--celeste)); border-radius: 50px; transition: width .8s ease; }

/* ===================== QUICK ACTIONS ===================== */
.quick-action { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--gris-bg); color: var(--azul-900); text-decoration: none; font-weight: 500; margin-bottom: .5rem; transition: all .2s; }
.quick-action:hover { background: var(--azul-700); color: #fff; transform: translateX(4px); }
.quick-action i { font-size: 1.2rem; }

/* ===================== DETALLE ===================== */
.detail-header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.detail-avatar { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--azul-700), var(--celeste)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; flex-shrink: 0; }
.detail-name { font-size: 1.4rem; margin: 0; color: var(--azul-900); }
.detail-sub { color: var(--gris-text); margin: 0; }
.detail-grid > div { margin-bottom: 1rem; }
.detail-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris-text); margin-bottom: .2rem; }
.detail-value { font-weight: 600; color: var(--azul-900); }
.detail-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.detail-text { color: var(--gris-text); margin-top: .35rem; white-space: pre-line; }
.sticky-side { position: sticky; top: 90px; }

/* ===================== TIMELINE ===================== */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-left: 2rem; padding-bottom: 1.25rem; }
.timeline-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--celeste); }
.timeline-head { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.timeline-obs { margin: .35rem 0; color: var(--gris-text); font-size: .92rem; background: var(--gris-bg); padding: .6rem .85rem; border-radius: var(--radius-sm); }
.timeline-meta { font-size: .8rem; color: var(--gris-text); }
.timeline-meta i { color: var(--celeste); }

.js-submit.is-loading .btn-label { display: none; }
.js-submit.is-loading .btn-loading { display: inline-flex !important; align-items: center; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .admin-main { margin-left: 0; }
    .btn-sidebar-toggle { display: inline-flex; }
}
@media (max-width: 575.98px) {
    .admin-content { padding: 1rem; }
    .kpi-value { font-size: 1.5rem; }
    .detail-header { flex-direction: column; text-align: center; }
}