/* ═══════════════════════════════════════════════════════════════════════════
   Mercatoria Truck — Panel de administración
   Paleta según Manual de Identidad Visual (junio 2023), aplicada en versión
   clara/pastel: los colores de marca a plena intensidad solo en el logo, la
   acción principal y los estados activos; todo lo demás usa tintas suaves.
   Los valores viven en static/css/tokens.css (generado desde tokens/*.json).
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-base);
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

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

/* ── SIDEBAR (clara) ─────────────────────────────────────────────────────── */

.sidebar {
    width: 268px;
    min-height: 100vh;
    background: var(--barra-lateral-fondo);
    border-right: 1px solid var(--borde);
    color: var(--barra-lateral-texto);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    margin-bottom: 26px;
}

.brand-logo { width: 32px; height: 32px; flex-shrink: 0; }

.brand strong,
.brand-name {
    font-family: var(--fuente-titulos);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--texto);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-section {
    margin: 22px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--barra-lateral-atenuado);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--barra-lateral-texto);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item i {
    font-size: 17px;
    color: var(--atenuado);
    transition: color 0.15s ease;
}

.nav-item:hover {
    background: var(--gris-suave);
    color: var(--texto);
}
.nav-item:hover i { color: var(--principal); }

.nav-item.logout {
    margin-top: auto;
    background: transparent;
    color: var(--atenuado);
    border: 1px dashed var(--borde);
}
.nav-item.logout:hover {
    background: var(--rojo-suave);
    color: var(--texto-rojo);
    border-color: transparent;
}
.nav-item.logout:hover i { color: var(--texto-rojo); }

.nav-item-active {
    background: var(--naranja-suave) !important;
    color: var(--texto-naranja) !important;
}
.nav-item-active i { color: var(--principal) !important; }
.nav-item-active:hover {
    background: var(--naranja-suave) !important;
    color: var(--texto-naranja) !important;
}

.badge-admin {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: var(--gris-suave);
    color: var(--atenuado);
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── NAV GROUPS: secciones plegables ── */
.nav-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: var(--barra-lateral-atenuado);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 18px 12px 6px;
    cursor: pointer;
    text-align: left;
    gap: 6px;
    line-height: 1;
}
.nav-group-header:hover { color: var(--texto); }
.nav-group-arrow {
    margin-left: auto;
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.22s ease;
}
.nav-group.open .nav-group-arrow { transform: rotate(-180deg); }
.nav-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.nav-group.open .nav-group-items { max-height: 440px; }

/* ── MAIN ────────────────────────────────────────────────────────────────── */

.main-content {
    flex: 1;
    padding: 36px 40px;
    overflow-y: auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--principal);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.page-header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fuente-titulos);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--texto);
}

.page-header p {
    margin: 8px 0 0;
    color: var(--atenuado);
    font-size: 15px;
}
.h1-icono {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--naranja-suave);
    color: var(--principal);
    font-size: 20px;
    flex-shrink: 0;
}
.page-header .eyebrow { display: none; }  /* la sección ya la marca el sidebar */

/* ── KPI ── */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.kpi-card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}

.kpi-card span {
    display: block;
    color: var(--atenuado);
    font-size: 13.5px;
    font-weight: 600;
}

.kpi-card strong {
    display: block;
    margin-top: 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--texto);
}

.kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.kpi-icon i { font-size: 21px; }

.kpi-icon.primary { background: var(--naranja-suave);  color: var(--principal); }
.kpi-icon.success { background: var(--verde-suave);    color: var(--texto-verde); }
.kpi-icon.warning { background: var(--amarillo-suave); color: var(--texto-amarillo); }
.kpi-icon.info    { background: var(--gris-suave);     color: var(--atenuado); }
.kpi-icon.neutral { background: var(--gris-suave);     color: var(--texto); }

/* Dashboard: filas fijas de KPIs y tira de destacado */
.kpi-fila { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi-fila .kpi-card { padding: 14px 16px; gap: 12px; }
.kpi-fila .kpi-icon { width: 40px; height: 40px; border-radius: 12px; }
.kpi-fila .kpi-icon i { font-size: 18px; }
.kpi-fila .kpi-card span { font-size: 12.5px; line-height: 1.2; white-space: normal; }
.kpi-fila .kpi-card strong { font-size: 24px; margin-top: 4px; }
a.kpi-card { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
a.kpi-card:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); border-color: var(--naranja-borde); }
.kpi-texto { min-width: 0; }
.kpi-card .kpi-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-destacado {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
    margin: 4px 0 28px; padding: 8px 14px 8px 10px;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 999px;
    box-shadow: var(--shadow); text-decoration: none; color: var(--texto); font-size: 13px;
}
.kpi-destacado i { color: var(--amarillo); font-size: 15px; }
.kpi-destacado-etiqueta { color: var(--atenuado); font-weight: 600; white-space: nowrap; }
.kpi-destacado strong { font-family: var(--fuente-titulos); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.kpi-destacado:hover { border-color: var(--naranja-borde); color: var(--texto-naranja); }

/* ── PANELS ── */

.panel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--borde);
    background: var(--panel);
}

.panel-header h2 {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.panel-header p {
    margin: 6px 0 0;
    color: var(--atenuado);
    font-size: 14px;
}

/* ── TABLE ── */

.table-wrapper { width: 100%; overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
}

.data-table th {
    background: var(--panel-suave);
    color: var(--atenuado);
    padding: 12px 18px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--panel-suave); }

.empty-state {
    text-align: center;
    color: var(--atenuado);
    padding: 38px 16px !important;
}

/* ── COMPONENTES TIPO BOOTSTRAP ── */

.card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-body { padding: 24px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-primary { background: var(--boton-principal); color: var(--boton-principal-texto) !important; border: 1px solid var(--boton-principal-borde); }
.btn-primary:hover { background: var(--boton-principal-hover); color: var(--boton-principal-texto) !important; }

.btn-success { background: var(--verde-suave); color: var(--texto-verde) !important; border: 1px solid var(--verde-borde); }
.btn-success:hover { background: var(--verde-borde); color: var(--texto-verde) !important; }

.btn-soft { background: var(--naranja-suave); color: var(--texto-naranja); }
.btn-soft:hover { background: var(--boton-principal); color: var(--boton-principal-texto); }

.form-control, .form-select {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--panel);
    font-size: 14px;
    font-family: var(--fuente-base);
    color: var(--texto);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: auto;
}

.form-control:focus, .form-select:focus {
    border-color: var(--principal);
    box-shadow: 0 0 0 3px rgba(241, 106, 48, 0.12);
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto);
}

.table { width: 100%; border-collapse: collapse; }

.table th {
    background: var(--panel-suave);
    color: var(--atenuado);
    padding: 12px 16px;
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--borde);
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
    vertical-align: middle;
}

.table-hover tbody tr:hover td { background: var(--panel-suave); }

/* ── UTILIDADES ── */

.route-cell { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.route-cell i { color: var(--atenuado); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gris-suave);
    color: var(--texto);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-warn   { background: var(--amarillo-suave); color: var(--texto-amarillo); }
.badge-active { background: var(--naranja-suave);  color: var(--texto-naranja); }
.badge-ok     { background: var(--verde-suave);    color: var(--texto-verde); }
.badge-danger { background: var(--rojo-suave);     color: var(--texto-rojo); }
.badge-info   { background: var(--gris-suave);     color: var(--atenuado); }

/* LEGACY */

.layout { display: flex; min-height: 100vh; }
.contenido { flex: 1; padding: 38px; overflow-y: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.btn-link { all: unset; cursor: pointer; }
.panel-spaced { margin-top: 24px; }

.form-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.form-grid input, .form-grid select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--panel);
    font-size: 14px;
    color: var(--texto);
}

.btn-submit {
    border: none;
    border-radius: 10px;
    background: var(--boton-principal);
    color: var(--boton-principal-texto);
    border: 1px solid var(--boton-principal-borde);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 12px 16px;
}
.btn-submit:hover { background: var(--boton-principal-hover); }

/* SPACING & HELPERS */

.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.text-muted { color: var(--atenuado) !important; }
.text-success { color: var(--texto-verde) !important; }
.text-danger { color: var(--texto-rojo) !important; }
.text-center { text-align: center !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.w-100 { width: 100% !important; }
.small { font-size: 12px !important; }
.fs-5 { font-size: 1.1rem !important; }
.rounded { border-radius: var(--radius) !important; }

.row { display: flex; flex-wrap: wrap; margin: -6px; }

.g-2 { gap: 8px !important; }
.g-3 { gap: 12px !important; }
.g-4 { gap: 16px !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }

.col-6  { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); padding: 6px; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 6px; }

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 calc(8.333% - 12px); max-width: calc(8.333% - 12px); padding: 6px; }
    .col-md-2 { flex: 0 0 calc(16.666% - 12px); max-width: calc(16.666% - 12px); padding: 6px; }
    .col-md-3 { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); padding: 6px; }
    .col-md-5 { flex: 0 0 calc(41.666% - 12px); max-width: calc(41.666% - 12px); padding: 6px; }
    .col-md-7 { flex: 0 0 calc(58.333% - 12px); max-width: calc(58.333% - 12px); padding: 6px; }
}

/* ── Botones de icono del header (Importar / Exportar / Plantilla) ──
   Regla de rediseño #2: acciones secundarias como iconos con tooltip.
   Tintas pastel de la paleta: exportar = verde lima, importar = amarillo. */
.btn-icon-group { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, transform .1s, border-color .15s;
}
.btn-icon:hover { transform: translateY(-1px); }
.btn-icon-export          { background: var(--verde-suave);    color: var(--texto-verde);    border-color: var(--verde-borde); }
.btn-icon-export:hover    { background: var(--verde-borde);    color: var(--texto-verde); }
.btn-icon-import          { background: var(--amarillo-suave); color: var(--texto-amarillo); border-color: var(--amarillo-borde); }
.btn-icon-import:hover    { background: var(--amarillo-borde); color: var(--texto-amarillo); }
.btn-icon-plantilla       { background: var(--gris-suave);     color: var(--atenuado);       border-color: var(--borde); }
.btn-icon-plantilla:hover { background: var(--borde);          color: var(--texto); }

/* ── Componentes CRUD (botón "+", modal de alta, campos y acciones de tabla) ──
   Fuente única: antes cada template repetía estas reglas en su <style>.
   Regla de rediseño #1: toda alta de datos se hace con .btn-nuevo → modal_form()
   (ver templates/admin/_modal.html). */
.btn-crud-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--boton-principal);
    color: var(--boton-principal-texto);
    padding: 10px 20px;
    border: 1px solid var(--boton-principal-borde);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn-crud-primary:hover { background: var(--boton-principal-hover); color: var(--boton-principal-texto); text-decoration: none; }

.btn-crud-secondary,
.btn-cancelar-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--gris-suave);
    color: var(--texto);
    padding: 10px 20px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-crud-secondary:hover,
.btn-cancelar-modal:hover { background: var(--borde); color: var(--texto); text-decoration: none; }
a.btn-crud-secondary { text-decoration: none; }

.btn-nuevo { flex-shrink: 0; }

.modal-crud { border-radius: 16px; border: 1px solid var(--borde); box-shadow: var(--sombra-md); }
.modal-crud-header { border-bottom: 1px solid var(--borde); padding: 20px 24px; align-items: flex-start; }
.modal-crud-header .modal-title { font-size: 17px; font-weight: 700; color: var(--texto); }
.modal-crud-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--atenuado); }
.modal-crud-body { padding: 24px; }
.modal-crud-footer { border-top: 1px solid var(--borde); padding: 16px 24px; gap: 8px; background: var(--panel-suave); border-radius: 0 0 16px 16px; }
.modal-crud-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rojo-suave);
    color: var(--texto-rojo);
    border: 1px solid var(--rojo-borde);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.form-crud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    align-items: start;
}
.form-crud-stack { display: flex; flex-direction: column; gap: 14px; }
.form-crud-full { grid-column: 1 / -1; }
.form-crud-field label {
    display: block;
    font-size: 11.5px;
    color: var(--atenuado);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.form-crud-field .req { color: var(--principal); }
.form-crud-hint { display: block; color: var(--atenuado-claro); font-size: 11px; margin-top: 4px; }
.form-crud-field label.check-crud { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; }
.check-crud input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--principal); cursor: pointer; }
.form-crud-section {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--principal);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.input-crud {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--fuente-base);
    box-sizing: border-box;
    background: var(--panel-suave);
    color: var(--texto);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-crud:focus { outline: none; border-color: var(--principal); background: var(--panel); box-shadow: 0 0 0 3px rgba(241, 106, 48, 0.12); }
.input-crud[type="file"] { padding: 7px 10px; }

.td-acciones { white-space: nowrap; }
.btn-accion-edit, .btn-accion-del, .btn-accion-ok {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    margin-right: 4px;
    transition: background .15s;
}
.btn-accion-edit { background: var(--gris-suave);  color: var(--texto);       border-color: var(--borde); }
.btn-accion-edit:hover { background: var(--naranja-suave); color: var(--texto-naranja); border-color: var(--naranja-borde); }
.btn-accion-del  { background: var(--rojo-suave);  color: var(--texto-rojo);  border-color: var(--rojo-borde); }
.btn-accion-del:hover { background: var(--rojo-borde); }
.btn-accion-ok   { background: var(--verde-suave); color: var(--texto-verde); border-color: var(--verde-borde); }
.btn-accion-ok:hover { background: var(--verde-borde); }

.estado-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gris-suave);
    color: var(--texto);
}
.estado-pill.estado-disponible { background: var(--verde-suave);    color: var(--texto-verde); }
.estado-pill.estado-en-viaje   { background: var(--amarillo-suave); color: var(--texto-amarillo); }
.estado-pill.estado-inactivo   { background: var(--gris-suave);     color: var(--atenuado); }

.pag-btn {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    background: var(--panel);
    text-decoration: none;
    border: 1px solid var(--borde);
}
.pag-btn:hover { background: var(--gris-suave); }
.pag-active { background: var(--boton-principal) !important; color: var(--boton-principal-texto) !important; border-color: var(--boton-principal-borde) !important; }

.badge-prio {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    margin-top: 3px;
}
.badge-prio-alta    { background: var(--amarillo-suave); color: var(--texto-amarillo); border: 1px solid var(--amarillo-borde); }
.badge-prio-urgente { background: var(--rojo-suave);     color: var(--texto-rojo);     border: 1px solid var(--rojo-borde); }

/* ── Categoría de cliente ── */
.badge-cat {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-cat-normal      { background: var(--gris-suave);     color: var(--atenuado); }
.badge-cat-vip         { background: var(--amarillo-suave); color: var(--texto-amarillo); border: 1px solid var(--amarillo-borde); }
.badge-cat-estrategico { background: var(--naranja-suave);  color: var(--texto-naranja);  border: 1px solid var(--naranja-borde); }
.badge-cat-humanitario { background: var(--verde-suave);    color: var(--texto-verde);    border: 1px solid var(--verde-borde); }

/* ── Solo móvil: oculto en escritorio ── */
.mobile-topbar  { display: none; }
.mobile-overlay { display: none; }

/* ── Layout móvil (max-width: 768px) ── */
@media (max-width: 768px) {
    html, body { height: auto; overflow-y: auto; }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 54px;
        padding: 0 16px;
        background: var(--barra-lateral-fondo);
        border-bottom: 1px solid var(--borde);
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 600;
        box-shadow: var(--sombra-sm);
    }
    .mobile-topbar-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--texto);
        font-family: var(--fuente-titulos);
        font-weight: 700;
        font-size: 16px;
    }
    .mobile-hamburger {
        background: none;
        border: none;
        color: var(--texto);
        font-size: 24px;
        cursor: pointer;
        padding: 6px 8px;
        line-height: 1;
        border-radius: 8px;
        display: flex;
        align-items: center;
    }
    .mobile-hamburger:hover { background: var(--gris-suave); }

    .mobile-overlay {
        display: none;
        position: fixed;
        top: 54px; left: 0; right: 0; bottom: 0;
        background: rgba(79, 79, 86, 0.45);
        z-index: 400;
    }
    .mobile-overlay.active { display: block; }

    .app-shell { display: block; min-height: auto; }

    .sidebar {
        display: none;
        position: fixed;
        top: 54px;
        left: 0;
        width: min(100vw, 320px);
        height: calc(100vh - 54px);
        min-height: unset;
        z-index: 500;
        overflow-y: auto;
        padding: 12px 12px 40px;
        background: var(--barra-lateral-fondo);
        border-right: 1px solid var(--borde);
        box-shadow: var(--sombra-md);
        flex-direction: column;
    }
    .sidebar.mobile-open { display: flex; }

    .main-content {
        width: 100%;
        padding: 68px 14px 32px;
        height: auto;
        overflow-y: visible;
    }

    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
    .page-header h1 { font-size: 22px; }
    .kpi-grid, .kpi-fila { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
    .kpi-card { padding: 14px; }
    .kpi-card strong { font-size: 24px; }
}

/* ── CONFIG TABS ── */
.config-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--borde);
}
.config-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--atenuado);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.config-tab:hover { color: var(--texto); }
.config-tab.cfg-active { color: var(--principal); border-bottom-color: var(--principal); }
.config-tab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fuente-titulos); }
.config-tab i { font-size: 15px; }
.config-tab-badge { background: var(--rojo-suave); color: var(--texto-rojo); border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.config-tab-content { display: none; }
.config-tab-content.cfg-active { display: block; }

/* ── ACCESOS RÁPIDOS ── */
.accesos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.acceso-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--texto);
    font-weight: 700;
    font-size: 15px;
    transition: box-shadow 0.15s, transform 0.15s, color 0.15s, border-color 0.15s;
    box-shadow: var(--shadow);
}
.acceso-card:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
    color: var(--texto-naranja);
    border-color: var(--naranja-borde);
}
.acceso-card i {
    font-size: 22px;
    color: var(--principal);
    opacity: 0.9;
    flex-shrink: 0;
}

/* ── Controles de formulario — regla de rediseño #5 ──────────────────────
   Todos los inputs/selects/textarea del panel comparten el mismo aspecto de
   marca. Nada de estilos inline ni aspecto nativo del sistema (el desplegable
   azul de Windows). Los selects usan un chevron propio y, en navegadores que
   lo soportan (Chrome 135+), la lista desplegada también se estiliza. */
.main-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
.main-content select,
.main-content textarea,
.modal-crud-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.modal-crud-body select,
.modal-crud-body textarea {
    font-family: var(--fuente-base);
    font-size: 14px;
    color: var(--texto);
    background: var(--panel-suave);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 9px 13px;
    line-height: 1.3;
    transition: border-color .15s, box-shadow .15s, background .15s;
    accent-color: var(--principal);
}
.main-content input:focus, .main-content select:focus, .main-content textarea:focus,
.modal-crud-body input:focus, .modal-crud-body select:focus, .modal-crud-body textarea:focus {
    outline: none;
    border-color: var(--principal);
    background: var(--panel);
    box-shadow: 0 0 0 3px rgba(241, 106, 48, 0.12);
}
.main-content input::placeholder, .main-content textarea::placeholder,
.modal-crud-body input::placeholder, .modal-crud-body textarea::placeholder { color: var(--atenuado-claro); }

/* Select: chevron propio en lugar de la flecha del sistema */
.main-content select, .modal-crud-body select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%237c7c85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
.main-content select option, .modal-crud-body select option {
    font-family: var(--fuente-base);
    color: var(--texto);
    background: var(--panel);
}

/* Lista desplegada estilizada (progressive enhancement) */
@supports (appearance: base-select) {
    .main-content select, .modal-crud-body select, .flatpickr-calendar select,
    .main-content select::picker(select), .modal-crud-body select::picker(select), .flatpickr-calendar select::picker(select) { appearance: base-select; }
    .main-content select::picker-icon, .modal-crud-body select::picker-icon, .flatpickr-calendar select::picker-icon { display: none; }
    .main-content select::picker(select), .modal-crud-body select::picker(select), .flatpickr-calendar select::picker(select) {
        border: 1px solid var(--borde);
        border-radius: 12px;
        background: var(--panel);
        box-shadow: var(--sombra-md);
        padding: 6px;
        margin-top: 4px;
        min-width: anchor-size(width);
    }
    .main-content select option, .modal-crud-body select option, .flatpickr-calendar select option {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
    }
    .main-content select option::checkmark, .modal-crud-body select option::checkmark, .flatpickr-calendar select option::checkmark { color: var(--principal); order: 2; margin-left: auto; }
    .main-content select option:hover, .modal-crud-body select option:hover, .flatpickr-calendar select option:hover,
    .main-content select option:focus-visible, .modal-crud-body select option:focus-visible, .flatpickr-calendar select option:focus-visible { background: var(--gris-suave); outline: none; }
    .main-content select option:checked, .modal-crud-body select option:checked, .flatpickr-calendar select option:checked { background: var(--naranja-suave); color: var(--texto-naranja); font-weight: 600; }
}

/* Píldoras de filtro (estado, rol…) — activa en naranja suave, nunca en negro */
.pills-filtro { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill-filtro {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-family: var(--fuente-titulos); font-size: 12.5px; font-weight: 600;
    text-decoration: none; color: var(--texto);
    background: var(--panel); border: 1px solid var(--borde);
    transition: background .15s, border-color .15s, color .15s;
}
.pill-filtro:hover { background: var(--gris-suave); color: var(--texto); }
.pill-filtro.pill-activo { background: var(--naranja-suave); color: var(--texto-naranja); border-color: var(--naranja-borde); }

.form-crud-field label.pill-filtro, .edit-field label.pill-filtro { display: inline-flex; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--texto); margin: 0; }
.form-crud-field label.pill-filtro.pill-activo { color: var(--texto-naranja); }
.pill-filtro .pill-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-filtro:has(.pill-radio) { cursor: pointer; }
.pill-filtro:has(.pill-radio:disabled) { opacity: .5; cursor: not-allowed; }

/* Barra de filtros común a todos los listados */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.filtros .campo { display: flex; flex-direction: column; gap: 4px; }
.filtros .campo > label {
    font-family: var(--fuente-titulos);
    font-size: 11px;
    font-weight: 700;
    color: var(--atenuado);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.filtros input[type="text"], .filtros input[type="search"] { min-width: 240px; }
.filtros input[type="date"] { min-width: 150px; }
.filtros select { min-width: 160px; }
.filtros .btn-crud-primary { padding: 9px 18px; font-size: 13px; }
.filtros .limpiar {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 9px 10px; font-size: 13px; color: var(--atenuado); text-decoration: none; border-radius: 8px;
}
.filtros .limpiar:hover { color: var(--texto-rojo); background: var(--rojo-suave); }

/* ── Botones de icono en filas de tabla (editar / eliminar / secundarios) ── */
.btn-icon-action, .btn-icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    vertical-align: middle;
}
.btn-icon-action { background: var(--gris-suave); color: var(--texto); border-color: var(--borde); }
.btn-icon-action:hover { background: var(--naranja-suave); color: var(--texto-naranja); border-color: var(--naranja-borde); }
.btn-icon-action.btn-icon-ok { background: var(--verde-suave); color: var(--texto-verde); border-color: var(--verde-borde); }
.btn-icon-action.btn-icon-ok:hover { background: var(--verde-borde); }
.btn-icon-danger { background: var(--panel); color: var(--texto-rojo); border-color: var(--rojo-borde); margin-left: 4px; }
.btn-icon-danger:hover { background: var(--rojo-suave); }
.pagination .page-item.active .page-link { background: var(--boton-principal); border-color: var(--boton-principal-borde); color: var(--boton-principal-texto); }
.pagination .page-link { color: var(--texto-naranja); border-radius: 6px; }

/* Filas con detalle (doble clic) */
.data-table tr.fila-enlace { cursor: pointer; }
.data-table tr.fila-enlace:hover td { background: var(--naranja-suave); }

/* ── Celdas compactas de tabla (principal + secundario en una sola fila) ── */
.celda-id { color: var(--atenuado-claro); font-size: 12px; font-weight: 700; white-space: nowrap; }
.celda-principal { font-weight: 600; color: var(--texto); white-space: nowrap; }
.celda-ruta i { color: var(--principal); font-size: 12px; margin: 0 2px; }
.celda-sub { font-size: 12px; color: var(--atenuado-claro); white-space: nowrap; margin-top: 2px; }
.celda-sub i { font-size: 11px; }
.celda-ok { color: var(--texto-verde); }
.celda-warn { color: var(--texto-amarillo); }
.celda-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.celda-etiquetas .badge, .celda-etiquetas .badge-cat, .celda-etiquetas .badge-prio { margin: 0; }
.data-table .td-acciones { white-space: nowrap; }

/* ── Calendario (flatpickr) con el estilo de la web ── */
.flatpickr-calendar {
    font-family: var(--fuente-base);
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: var(--sombra-md);
    padding: 6px;
    width: 320px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none; }
.flatpickr-months { padding: 6px 4px 2px; }
.flatpickr-months .flatpickr-month { height: 40px; color: var(--texto); }
.flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--fuente-titulos); font-size: 15px; font-weight: 700; padding: 4px 0 0; color: var(--texto); }
/* Mes: desplegable clicable con chevron propio */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none; -webkit-appearance: none;
    font-family: var(--fuente-titulos); font-size: 15px; font-weight: 700; color: var(--texto);
    background: var(--gris-suave) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%237c7c85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 8px center;
    border: 1px solid var(--borde); border-radius: 8px; padding: 4px 26px 4px 10px; margin: 0; cursor: pointer; width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: var(--naranja-suave); border-color: var(--naranja-borde); color: var(--texto-naranja); }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px rgba(241,106,48,0.12); }
.flatpickr-monthDropdown-month { font-family: var(--fuente-base); color: var(--texto); background: var(--panel); }
.flatpickr-calendar select::picker(select) { max-height: 300px; overflow-y: auto; }
@supports (appearance: base-select) {
    /* flatpickr fuerza appearance: menulist con más especificidad; se anula aquí */
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months,
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months::picker(select) { appearance: base-select !important; -webkit-appearance: base-select !important; }
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months::picker-icon { display: none; }
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months option.flatpickr-monthDropdown-month {
        padding: 8px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; background: var(--panel); color: var(--texto);
    }
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months option:hover,
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months option:focus-visible { background: var(--gris-suave); outline: none; }
    .flatpickr-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months option:checked { background: var(--naranja-suave); color: var(--texto-naranja); font-weight: 600; }
}
/* Año: editable, con flechas visibles */
.flatpickr-current-month .numInputWrapper { width: 78px; border: 1px solid var(--borde); border-radius: 8px; background: var(--gris-suave); }
.flatpickr-current-month .numInputWrapper:hover { background: var(--naranja-suave); border-color: var(--naranja-borde); }
.flatpickr-current-month input.cur-year { font-family: var(--fuente-titulos); font-size: 15px; font-weight: 700; color: var(--texto); padding: 4px 18px 4px 8px; }
.flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-current-month .numInputWrapper span.arrowDown { opacity: 1; border: none; width: 18px; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--atenuado); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--atenuado); }
.flatpickr-current-month .numInputWrapper span:hover { background: transparent; }
.flatpickr-current-month .numInputWrapper span:hover:after { border-bottom-color: var(--principal); border-top-color: var(--principal); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--atenuado); fill: var(--atenuado); padding: 8px; top: 6px; border-radius: 8px; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--principal); background: var(--naranja-suave); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--principal); }
.flatpickr-weekdays { margin-top: 4px; }
span.flatpickr-weekday { font-family: var(--fuente-titulos); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--atenuado-claro); }
.dayContainer { width: 308px; min-width: 308px; max-width: 308px; padding: 2px 0 6px; }
.flatpickr-days { width: 308px; }
.flatpickr-day {
    width: 40px; max-width: 40px; height: 38px; line-height: 38px; margin: 2px;
    border-radius: 10px; border: 1px solid transparent;
    color: var(--texto); font-size: 13.5px; font-weight: 500;
}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--gris-suave); border-color: var(--borde); color: var(--texto); }
.flatpickr-day.today { border-color: var(--naranja-borde); color: var(--texto-naranja); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--naranja-suave); border-color: var(--naranja-borde); color: var(--texto-naranja); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--boton-principal); border-color: var(--boton-principal-borde); color: var(--boton-principal-texto); font-weight: 700;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--atenuado-claro); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--borde); background: transparent; border-color: transparent; cursor: not-allowed; }
.flatpickr-input[readonly] { cursor: pointer; }

/* ── Autocompletado (lista de sugerencias con estilo de la web) ── */
.ac-lista {
    position: absolute; z-index: 2000;
    margin: 0; padding: 6px; list-style: none;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: var(--sombra-md); max-height: 280px; overflow-y: auto; min-width: 220px;
}
.ac-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--texto); cursor: pointer; }
.ac-item.ac-activo { background: var(--naranja-suave); color: var(--texto-naranja); }
.ac-icono { color: var(--atenuado-claro); font-size: 13px; flex-shrink: 0; }
.ac-item.ac-activo .ac-icono { color: var(--principal); }
.ac-valor { font-weight: 600; white-space: nowrap; }
.ac-detalle { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--atenuado-claro); white-space: nowrap; }

/* ── Historial: papelera y mensajes (templates/admin/historial/) ── */
.btn-restaurar {
    padding: 5px 12px; background: var(--verde-suave); color: var(--texto-verde);
    border: 1px solid var(--verde-borde); border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
.btn-restaurar:hover { background: var(--verde-claro); }
.mensajes-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .mensajes-grid { grid-template-columns: 1fr; } }
.mensajes-preview { margin-top: 8px; font-size: 12.5px; color: var(--atenuado); }
.mensajes-preview #preview-count { font-weight: 700; color: var(--texto-naranja); }
.mensajes-lista { list-style: none; margin: 0; padding: 4px 24px 12px; }
.mensajes-lista li { padding: 10px 0; border-bottom: 1px solid var(--gris-suave); font-size: 13px; }
.mensajes-lista li:last-child { border-bottom: 0; }

/* ── Avatar de usuario (macro admin/_avatar.html) ── */
.avatar {
    --av: 32px;
    width: var(--av); height: var(--av); border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--naranja-suave); color: var(--texto-naranja); border: 1px solid var(--naranja-borde);
    font-family: var(--fuente-titulos); font-weight: 700; font-size: calc(var(--av) * .38); letter-spacing: .02em;
    box-sizing: border-box; vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tarjeta del usuario conectado en el menú lateral → /admin/mi-cuenta */
.perfil-card {
    display: flex; align-items: center; gap: 10px; margin-top: auto; margin-bottom: 8px;
    padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--texto);
    border: 1px solid var(--borde); background: var(--panel);
    transition: background .15s ease, border-color .15s ease;
}
.perfil-card:hover { background: var(--naranja-suave); border-color: var(--naranja-borde); color: var(--texto); }
.perfil-card-activa { background: var(--naranja-suave); border-color: var(--naranja-borde); }
.perfil-card-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.perfil-card-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-card-rol { font-size: 11.5px; color: var(--atenuado); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.perfil-card-flecha { margin-left: auto; color: var(--atenuado-claro); font-size: 13px; }
.perfil-card + .nav-item.logout { margin-top: 0; }

/* Página Mi perfil */
.perfil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; max-width: 980px; }
.perfil-form { padding: 22px 24px 24px; }
.perfil-cabecera { display: flex; align-items: center; gap: 18px; padding: 4px 8px 20px; margin-bottom: 20px; border-bottom: 1px solid var(--borde); }
.perfil-avatar { position: relative; cursor: pointer; flex-shrink: 0; border-radius: 50%; }
.perfil-avatar .avatar { border-width: 3px; border-color: var(--panel); box-shadow: 0 0 0 2px var(--naranja-borde); }
.perfil-avatar-cambiar {
    position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--boton-principal); color: var(--boton-principal-texto); border: 1px solid var(--boton-principal-borde);
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.perfil-avatar:hover .perfil-avatar-cambiar { background: var(--boton-principal-hover); }
.perfil-identidad { min-width: 0; }
.perfil-nombre { font-family: var(--fuente-titulos); font-size: 20px; font-weight: 700; line-height: 1.15; }
.perfil-meta { font-size: 13px; color: var(--atenuado); margin-top: 2px; }
.perfil-rol { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--gris-suave); color: var(--texto); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.perfil-acciones-foto { display: flex; gap: 8px; margin-top: 10px; }
.btn-crud-secondary.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }

/* Usuario con avatar dentro de una celda (Usuarios, Historial) */
.celda-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-usuario .celda-principal { font-weight: 600; font-size: 13px; }

/* ── Ayuda contextual con clic derecho (data-ayuda) ── */
.ayuda-pop {
    position: absolute; z-index: 3000; max-width: 340px;
    background: var(--gris-oscuro); color: #fff; border-radius: 12px;
    padding: 12px 14px; box-shadow: var(--sombra-md); font-size: 13px; line-height: 1.5;
}
.ayuda-pop-titulo { font-family: var(--fuente-titulos); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amarillo); margin-bottom: 4px; }
[data-ayuda] { cursor: help; border-radius: 10px; }
[data-ayuda].ayuda-activa { outline: 2px solid var(--naranja-borde); outline-offset: 4px; }
.ayuda-pista { display: inline-flex; align-items: center; gap: 6px; margin: -12px 0 18px; font-size: 12px; color: var(--atenuado-claro); }

/* Etiquetas de formulario: un solo estilo en toda la web */
.edit-field label, .config-label, .mt-label, .step-active label {
    display: block; font-family: var(--fuente-titulos); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--atenuado); margin-bottom: 6px;
}

/* ── Alertas de página (mensajes flash) — pastel ── */
.alerta {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}
.alerta-ok,   .alerta-exito { background: var(--verde-suave);    color: var(--texto-verde);    border-color: var(--verde-borde); }
.alerta-warn, .alerta-aviso { background: var(--amarillo-suave); color: var(--texto-amarillo); border-color: var(--amarillo-borde); }
.alerta-err,  .alerta-error { background: var(--rojo-suave);     color: var(--texto-rojo);     border-color: var(--rojo-borde); }
.alerta-info               { background: var(--naranja-suave);  color: var(--texto-naranja);  border-color: var(--naranja-borde); }