/* =========================
   1) TOKENS BASE
   ========================= */
:root {
    /* Brand institucional */
    --mc-rojo: #b32e2e;
    --mc-rojo-600: #9d2828;
    --mc-azul: #0D47A1;

    /* Primario del sistema */
    --mc-primario: var(--mc-rojo);

    /* Brand complementario — Arqueología Perú */
    --mc-arcilla: #A24A2A;
    --mc-arcilla-700: #7A341E;

    --mc-arena: #D8C3A5;
    --mc-piedra: #8B8E8A;

    --mc-oro: #B88A2A;
    --mc-oro-600: #9C7322;

    --mc-turquesa: #1F7A7A;
    --mc-obsidiana: #1B1F24;

    /* Acento secundario */
    --mc-accent: var(--mc-oro);

    /* Estados */
    --mc-success: #198754;
    --mc-warning: var(--mc-oro);
    --mc-danger: #dc3545;
    --mc-info: var(--mc-turquesa);

    /* Gradientes */
    --mc-grad-arqueo: linear-gradient(90deg, rgba(162, 74, 42, .14), rgba(184, 138, 42, .10));
    --mc-grad-arqueo-dark: linear-gradient(90deg, rgba(162, 74, 42, .20), rgba(184, 138, 42, .16));

    /* Texto & bordes */
    --mc-texto: #1f2937;
    --mc-muted: #6b7280;
    --mc-borde: #d1d5db;

    /* Superficies & sombra */
    --mc-body-bg: #f8f9fa;
    --mc-card: #ffffff;
    --mc-shadow: 0 6px 18px rgba(17, 24, 39, .08);

    /* Focus */
    --mc-focus: var(--mc-primario);
    --mc-focus-ring: rgba(179, 46, 46, .15);
    --mc-focus-alt: var(--mc-accent);
    --mc-focus-ring-alt: rgba(184, 138, 42, .18);

    /* Radius & spacing */
    --mc-radius: 12px;
    --mc-space-1: .5rem;
    --mc-space-2: .75rem;
    --mc-space-3: 1rem;
    --mc-space-4: 1.25rem;

    /* Alturas */
    --captcha-h: 78px;

    /* Readonly */
    --mc-readonly-bg: #f1f5f9;
    --mc-readonly-border: #d1d5db;
    --mc-readonly-text: #374151;

    /* Header */
    --mc-header-bg: var(--mc-rojo);
    --mc-header-color: #ffffff;

    /* Info box */
    --mc-info-bg: #fff5f5;
    --mc-info-border: #e03131;

    /* Sticky */
    --mc-sticky-bg: rgba(255, 255, 255, .95);

    /* Modal */
    --mc-modal-bg: #ffffff;
    --mc-modal-border-top: rgba(0, 0, 0, .06);

    /*Header tables*/
    --mc-table-head-bg: rgba(248, 249, 250, .92);
    --mc-table-head-text: var(--mc-texto);
    --mc-table-head-border: var(--mc-borde);

    --mc-table-row-hover: rgba(179, 46, 46, .06);
    --mc-table-row-selected-bg: rgba(13, 110, 253, .18); /* azul Bootstrap suave */
    --mc-table-row-selected-text: var(--mc-texto);

    --mc-table-stripe: rgba(17, 24, 39, .025);
    --mc-table-border: var(--mc-borde);

    /* Acciones */
    --mc-action-btn-bg: rgba(184, 138, 42, .24);     /* + contraste */
    --mc-action-btn-border: rgba(184, 138, 42, .60);
    --mc-action-btn-text: #8a661c;                   /* oro más oscuro */

    --mc-action-on-selected-bg: rgba(255,255,255,.35);
    --mc-action-on-selected-border: rgba(255,255,255,.65);
    --mc-action-on-selected-text: #ffffff;

    /*Color de contenidos*/
    --mc-content-bg: var(--mc-body-bg);
    --mc-content-text: var(--mc-texto);

    /* Header formulario */
    --mc-form-header-bg: var(--mc-rojo);
    --mc-form-header-text: #ffffff;

}

/* =========================
   2) THEMES (solo overrides)
   ========================= */
:root[data-bs-theme="light"] {
    --mc-body-bg: #f8f9fa;
    --mc-card: #ffffff;
    --mc-borde: #d1d5db;
    --mc-texto: #1f2937;
    --mc-muted: #6b7280;

    --mc-header-bg: var(--mc-rojo);
    --mc-header-color: #ffffff;

    --mc-info-bg: #fff5f5;
    --mc-info-border: #e03131;

    --mc-sticky-bg: rgba(255, 255, 255, .95);

    --mc-modal-bg: #ffffff;
    --mc-modal-border-top: rgba(0, 0, 0, .06);

    --mc-shadow: 0 6px 18px rgba(17, 24, 39, .08);

    /* Arqueo (light) */
    --mc-arcilla: #A24A2A;
    --mc-arena: #D8C3A5;
    --mc-oro: #B88A2A;
    --mc-turquesa: #1F7A7A;
    --mc-obsidiana: #1B1F24;

    --mc-grad-arqueo: linear-gradient(90deg, rgba(162, 74, 42, .14), rgba(184, 138, 42, .10));
}

:root[data-bs-theme="dark"] {
    --mc-body-bg: #020617;
    --mc-card: #0b1220;
    --mc-borde: #334155;
    --mc-texto: #e2e8f0;
    --mc-muted: #94a3b8;

    --mc-header-bg: #111827;
    --mc-header-color: #f9fafb;

    --mc-info-bg: #0f172a;
    --mc-info-border: #b91c1c;

    --mc-sticky-bg: rgba(15, 23, 42, .98);

    --mc-modal-bg: #0b1220;
    --mc-modal-border-top: rgba(148, 163, 184, .35);

    --mc-readonly-bg: #0f172a;
    --mc-readonly-border: #334155;
    --mc-readonly-text: #cbd5e1;

    --mc-shadow: 0 12px 26px rgba(0, 0, 0, .35);

    /* Focus ring más suave en dark */
    --mc-focus-ring: rgba(179, 46, 46, .22);

    /* Arqueo (dark) */
    --mc-arcilla: #C4633F;
    --mc-arena: #BFA889;
    --mc-oro: #D6B15A;
    --mc-turquesa: #4BB3B3;
    --mc-obsidiana: #0B0F14;

    --mc-grad-arqueo: var(--mc-grad-arqueo-dark);

    /*Header tables*/
    --mc-table-head-bg: rgba(226, 232, 240, .06);
    --mc-table-head-text: #e2e8f0;
    --mc-table-head-border: #334155;

    --mc-table-row-hover: rgba(179, 46, 46, .10);
    --mc-table-row-selected-bg: rgba(59, 130, 246, .22);
    --mc-table-row-selected-text: #e2e8f0;

    --mc-table-stripe: rgba(226, 232, 240, .03);
    --mc-table-border: #334155;

    --mc-action-btn-bg: rgba(214, 177, 90, .18);
    --mc-action-btn-border: rgba(214, 177, 90, .40);
    --mc-action-btn-text: #f5d27a;

    --mc-action-on-selected-bg: rgba(15,23,42,.55);
    --mc-action-on-selected-border: rgba(226,232,240,.45);
    --mc-action-on-selected-text: #e2e8f0;

    --mc-content-bg: #020617;
    --mc-content-text: #e2e8f0;

    --mc-form-header-bg: rgba(179, 46, 46, .85);
    --mc-form-header-text: #ffffff;
}

/* =========================================================
   3) BASE / LAYOUT
   ========================================================= */
html { font-size: 100%; }

body {
    font-family: Roboto, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
    background-color: var(--mc-body-bg);
    color: var(--mc-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

/* Micro-sensación premium */
a, button, .form-control, .form-select, .dropdown-menu, .page-link {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}

/* =========================================================
   4) NAVBAR RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse { width: 100%; }
    .navbar .navbar-nav { width: 100%; }
    .navbar .navbar-nav .nav-item,
    .navbar .navbar-nav .nav-link { width: 100%; }

    .navbar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        border: 0;
        box-shadow: none;
    }
}

@media (min-width: 992px) {
    .w-lg-auto { width: auto !important; }
    .d-lg-inline { display: inline-block !important; }
}

/* =========================================================
   5) CARDS / SECTIONS
   ========================================================= */
.section-card {
    background: var(--mc-card);
    border: 1px solid var(--mc-borde);
    border-radius: 16px;
    box-shadow: var(--mc-shadow);
    padding: 1.5rem;
    margin-bottom: var(--mc-space-3);
}

.section-card .section-title,
.section-card h6 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: .95rem;
    margin: 0 0 1rem 0;
    border-left: 4px solid var(--mc-primario);
    padding-left: .75rem;
}

.section-title--arqueo {
    border-left: 4px solid var(--mc-accent) !important;
    background: var(--mc-grad-arqueo);
    padding: .6rem .9rem;
    border-radius: 12px;
}

.card-arqueo { border: 1px solid rgba(184, 138, 42, .28); }
:root[data-bs-theme="dark"] .card-arqueo { border-color: rgba(214, 177, 90, .25); }

.section-card > p,
.section-card small {
    font-size: .85rem;
    color: var(--mc-muted);
}

.section-card .section-title {
    font-size: 1rem;
    font-weight: 800;
}

.section-card hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* =========================================================
   6) HEADER INSTITUCIONAL
   ========================================================= */
.mc-header {
    background: var(--mc-header-bg);
    color: var(--mc-header-color);
    border-radius: 0;
}
.mc-header h5, .mc-header h6 { font-weight: 700; }

/* ===============================
   RESUMEN EXPEDIENTE
   =============================== */
/* Resumen institucional */
.mc-exp-summary{
    background: var(--mc-card);
    border: 1px solid var(--mc-borde);
    /*border-radius: 0 0 12px 12px;*/
    padding: .85rem 1rem;
    box-shadow: var(--mc-shadow);
}

/* Labels del resumen (NO form-label) */
.mc-exp-label{
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mc-muted);
    margin-bottom: .25rem;
}

/* Valores */
.mc-exp-value{
    font-size: .95rem;
    font-weight: 600;
    color: var(--mc-texto);
}

/* Expediente destacado */
.mc-exp-value--strong{
    color: var(--mc-primario);
    font-weight: 900;
}


/* =========================================================
   7) INFO BOX
   ========================================================= */
.info-box {
    background: var(--mc-info-bg);
    border: 1px dashed var(--mc-info-border);
    border-radius: .75rem;
}
.info-box, .info-box * { color: var(--mc-texto); }

/* =========================================================
   8) FOCUS ACCESIBLE (mejora)
   ========================================================= */
:focus-visible {
    outline: 3px solid var(--mc-primario);
    outline-offset: 2px;
}

/* =========================================================
   9) INPUTS
   ========================================================= */
.form-control,
.form-select {
    border-radius: 12px;
    border: 1px solid var(--mc-borde);
    color: var(--mc-texto);
    padding: .45rem .75rem;
    font-size: .92rem;
}

.form-control::placeholder { color: var(--mc-muted); }

.form-control:focus,
.form-select:focus {
    border-color: var(--mc-focus);
    box-shadow: 0 0 0 .15rem var(--mc-focus-ring);
}

.input-focus-arqueo:focus {
    border-color: var(--mc-focus-alt) !important;
    box-shadow: 0 0 0 .15rem var(--mc-focus-ring-alt) !important;
}

.form-control[readonly],
.form-select[readonly] {
    background-color: var(--mc-readonly-bg) !important;
    border-color: var(--mc-readonly-border) !important;
    color: var(--mc-readonly-text);
    font-weight: 600;
    cursor: default;
}

.form-control[readonly]:focus,
.form-select[readonly]:focus {
    box-shadow: none;
    border-color: var(--mc-readonly-border);
}

.is-invalid.form-control,
.is-invalid.form-select {
    border-color: var(--mc-danger);
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .15);
}

.required::after {
    content: " *";
    color: var(--mc-primario);
    font-weight: 900;
}

.help,
.form-text {
    font-size: .85rem;
    color: var(--mc-muted);
}

/* =========================================================
   10) TABS
   ========================================================= */
.nav-tabs { border-bottom: 1px solid var(--mc-borde); }

.nav-tabs .nav-link {
    border: none;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    color: var(--mc-muted);
    padding: .55rem 1rem;
}

.nav-tabs .nav-link:hover { background: rgba(17, 24, 39, .04); }
:root[data-bs-theme="dark"] .nav-tabs .nav-link:hover { background: rgba(226, 232, 240, .06); }

.nav-tabs .nav-link.active {
    background: rgba(179, 46, 46, .10);
    color: var(--mc-primario);
    font-weight: 800;
}

/* =========================================================
   11) USER MENU (SCOPED)
   ========================================================= */
.user-dropdown .user-menu {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    padding: .4rem .7rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
}

.user-dropdown .user-menu:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .28);
}

.user-dropdown .avatar-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.user-block {
    display: grid;
    line-height: 1.05;
    max-width: 220px;
}

.user-name {
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-sub {
    font-size: .75rem;
    opacity: .75;
    white-space: nowrap;
}

.user-dropdown .dropdown-menu {
    min-width: 240px;
    border-radius: 12px;
    border: 1px solid var(--mc-borde);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
    background: var(--mc-card);
}

.user-dropdown .dropdown-item i { width: 18px; }

@media (max-width: 991.98px) {
    .user-dropdown .user-menu {
        width: 100%;
        justify-content: space-between;
    }
    .user-block { max-width: 100%; }
}

.mc-preferences .btn { border-color: rgba(255, 255, 255, .25); }
.mc-preferences .btn:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .35);
}
.mc-preferences .dropdown-menu { border-radius: 12px; }

/* =========================================================
   12) TABLE
   ========================================================= */
.mc-thead th,
.table thead th,
table.dataTable thead th,
table.dataTable thead td,
.dataTables_scrollHead thead th,
.dataTables_scrollHead thead td{
    background: var(--mc-table-head-bg) !important;
    color: var(--mc-table-head-text) !important;
    border-bottom: 1px solid var(--mc-table-head-border) !important;
    font-weight: 800;
    vertical-align: middle;
}

/* Sticky header correcto dentro de table-responsive */
.mc-thead th{
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Separadores del header (opcional pro) */
.mc-thead th + th{
    border-left: 1px solid rgba(148, 163, 184, .18);
}

/* =========================
   Bordes / fondo general
   ========================= */
.table,
table.dataTable{
    border-color: var(--mc-table-border) !important;
}

.table td,
.table th{
    border-color: var(--mc-table-border) !important;
}

/* Stripe (table-striped) theme-aware */
.table.table-striped > tbody > tr:nth-of-type(odd) > *{
    background-color: var(--mc-table-stripe) !important;
}

/* Hover (table-hover) theme-aware */
.table.table-hover > tbody > tr:hover > *{
    background-color: var(--mc-table-row-hover) !important;
}

/* =========================
   Selected row (DataTables)
   ========================= */
/* Si usas DataTables Select => agrega clase selected */
table.dataTable tbody tr.selected,
.table tbody tr.selected,
.table tbody tr.mc-selected{
    background: transparent !important; /* NO pintar el tr completo */
}

/* Pintamos celdas suave + borde institucional */
/* =========================================================
   ACCIONES visibles cuando la fila está selected
   ========================================================= */
table.dataTable tbody tr.selected td .mc-btn-table-accion.btn-sm,
.table tbody tr.selected td .mc-btn-table-accion.btn-sm,
.table tbody tr.mc-selected td .mc-btn-table-accion.btn-sm{
    background: var(--mc-action-on-selected-bg) !important;
    border: 1px solid var(--mc-action-on-selected-border) !important;
    color: var(--mc-action-on-selected-text) !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

table.dataTable tbody tr.selected td .mc-btn-table-accion.btn-sm i,
.table tbody tr.selected td .mc-btn-table-accion.btn-sm i,
.table tbody tr.mc-selected td .mc-btn-table-accion.btn-sm i{
    color: inherit !important;
}


/* =========================
   Botón de acciones (el lápiz)
   ========================= */
/* Cuando renderizas acciones con mc-btn-table-accion, lo estandarizamos */
/* Acciones: lápiz (mc-btn-table-accion) -> estilo arqueo */
.table .mc-btn-table-accion.btn-sm{
    background: var(--mc-action-btn-bg) !important;
    border: 1px solid var(--mc-action-btn-border) !important;
    color: var(--mc-action-btn-text) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.table .mc-btn-table-accion.btn-sm:hover{
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.table .mc-btn-table-accion.btn-sm:focus{
    box-shadow: 0 0 0 .18rem rgba(184, 138, 42, .25);
}

.table .mc-btn-table-accion.btn-sm i{
    color: inherit !important;
}

/* =========================
   DataTables paginación (si quieres coherencia total)
   ========================= */
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius: 10px !important;
}

/* =========================================================
   13) BADGES ESTADO
   ========================================================= */
.badge-status {
    display: inline-block;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .03em;

    padding: .28rem .6rem;

    border-radius: 6px;
    border: 1px solid var(--mc-borde);

    background: rgba(31, 41, 55, .04);
    color: var(--mc-texto);
}

.badge-status--ingresado {
    border-color: rgba(184, 138, 42, .35);
    background: rgba(184, 138, 42, .12);
    color: var(--mc-oro-600);
}
.badge-status--enviado {
    border-color: rgba(184, 138, 42, .35);
    background: rgba(184, 138, 42, .12);
    color: var(--mc-azul);
}

.badge-status--observado {
    border-color: rgba(162, 74, 42, .35);
    background: rgba(162, 74, 42, .12);
    color: var(--mc-arcilla-700);
}

.badge-status--aprobado {
    border-color: rgba(25, 135, 84, .35);
    background: rgba(25, 135, 84, .12);
    color: var(--mc-success);
}

.badge-status--denegado {
    border-color: rgba(220, 53, 69, .35);
    background: rgba(220, 53, 69, .12);
    color: var(--mc-danger);
}

/* =========================================================
   14) DATATABLES PAGING
   ========================================================= */
.dt-paging { margin-top: .75rem; }

.dt-paging .pagination {
    justify-content: flex-end;
    gap: .25rem;
}

.dt-paging .page-link {
    border: 1px solid var(--mc-borde);
    background: transparent;
    color: var(--mc-texto);
    border-radius: 10px;
    padding: .35rem .75rem;
}

.dt-paging .page-link:hover {
    background: rgba(179, 46, 46, .08);
    border-color: var(--mc-primario);
    color: var(--mc-primario);
}

.dt-paging .page-item.active .page-link {
    background: var(--mc-primario);
    border-color: var(--mc-primario);
    color: #fff;
    box-shadow: 0 6px 14px rgba(179, 46, 46, .22);
}

.dt-paging .page-item.disabled .page-link {
    opacity: .45;
    cursor: not-allowed;
}

.dt-paging .page-link i { font-size: .85rem; }

/* =========================================================
   15) STICKY ACTIONS
   ========================================================= */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--mc-sticky-bg);
    backdrop-filter: saturate(180%) blur(6px);
    border-top: 1px solid var(--mc-borde);
}

/* =========================================================
   16) RESPONSIVE TWEAKS / UTIL
   ========================================================= */
@media (max-width: 767.98px) {
    .section-card { padding: var(--mc-space-3); }
    .same-height { height: 56px; }
}

.logo-mc { max-height: 64px; }
.lang-select { width: 100px; }

/* =========================================================
   17) SUBMENU BOOTSTRAP 5 (MULTINIVEL)
   ========================================================= */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}

.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
    float: right;
    margin-top: .45rem;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
    content: "";
}

/* =========================================================
   18) BOTONERAS FLOTANTES
   ========================================================= */
.mc-floating-actions {
    display: inline-block;
    position: fixed;
    top: 35px;
    right: 0px;
    background-color: rgba(255, 255, 255, .5);
    color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 200;
    pointer-events: none;
}
.mc-floating-actions .btn, .mc-floating-actions button, .mc-floating-actions a { pointer-events: auto; }


/* =========================================================
   19) BOTÓN OUTLINE ARQUEO
   ========================================================= */
.btn-outline-arqueo {
    border: 1px solid rgba(184, 138, 42, .55);
    color: var(--mc-oro-600);
    background: transparent;
}

.btn-outline-arqueo:hover {
    background: rgba(184, 138, 42, .12);
    border-color: var(--mc-oro);
    color: var(--mc-oro);
}

/* =========================================================
   20) TEXTAREA + COUNTERS
   ========================================================= */
.mc-textarea { position: relative; }
.mc-textarea textarea { padding-bottom: 1.3rem; }

.mc-counter {
    position: absolute;
    bottom: .35rem;
    font-size: .75rem;
    color: var(--mc-muted);
    user-select: none;
}

.mc-counter-inline {
    font-size: .75rem;
    color: var(--mc-muted);
    margin-top: .25rem;
}

#mcGlobalEditor .mc-counter {
    font-size: .8rem;
    font-weight: 600;
    transition: color .2s ease, transform .15s ease;
}

.mc-counter-ok { color: #16a34a; }
.mc-counter-warning { color: #f59e0b; }
.mc-counter-danger { color: #dc2626; transform: scale(1.05); }
.mc-counter.is-max { color: #dc3545; font-weight: 700; }

.mc-compact-ta {
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: calc(1.5em + .6rem + 2px);
    line-height: 1.5;
}

/* =========================================================
   21) EMPTY STATE TABLA
   ========================================================= */
.mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.mc-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(179, 46, 46, .10);
    color: var(--mc-primario);
}

.mc-empty-title { font-weight: 800; }
.mc-empty-text { font-size: .9rem; }

/* =========================================================
   22) MODAL EDITOR GLOBAL
   ========================================================= */
.mc-editor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-editor[readonly] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(248, 249, 250, .9));
    cursor: pointer;
}

.mc-editor[readonly]:hover { border-color: var(--mc-primario); }

#mcGlobalEditor .modal-content {
    background: var(--mc-modal-bg, var(--mc-card));
    color: var(--mc-texto);
    border: 1px solid var(--mc-borde);
    border-radius: 16px;
    box-shadow: var(--mc-shadow);
    max-height: min(90vh, 760px);
    overflow: hidden;
}

#mcGlobalEditor .modal-header {
    background: linear-gradient(180deg, rgba(179, 46, 46, .10), rgba(179, 46, 46, 0));
    border-bottom: 1px solid var(--mc-borde);
    padding: .9rem 1.1rem;
    gap: .75rem;
    align-items: center;
}

#mcGlobalEditor .modal-title {
    color: var(--mc-texto);
    font-weight: 800;
    letter-spacing: .2px;
}

#mcGlobalEditor .btn-close {
    filter: none;
    opacity: .75;
}

:root[data-bs-theme="dark"] #mcGlobalEditor .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .65;
}

#mcGlobalEditor .mc-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(179, 46, 46, .12);
    color: var(--mc-primario);
}

#mcGlobalEditor .modal-body {
    padding: 1rem 1.1rem;
    overflow: auto;
}

#mcGlobalEditor #mcGlobalTextarea {
    background: var(--mc-card);
    color: var(--mc-texto);
    border: 1px solid var(--mc-borde);
    border-radius: 12px;
    line-height: 1.35;
    min-height: 220px;
    max-height: 55vh;
    resize: vertical;
    box-shadow: none;
}

#mcGlobalEditor #mcGlobalTextarea:focus {
    border-color: var(--mc-primario);
    box-shadow: 0 0 0 .18rem var(--mc-focus-ring);
}

#mcGlobalEditor .modal-footer {
    border-top: 1px solid var(--mc-modal-border-top, var(--mc-borde));
    background: var(--mc-modal-bg, var(--mc-card));
    padding: .85rem 1.1rem;
}

@media (max-width: 576px) {
    #mcGlobalEditor .modal-dialog {
        margin: .5rem;
        max-width: 100%;
    }
    #mcGlobalEditor .modal-content { max-height: 92vh; }
    #mcGlobalEditor #mcGlobalTextarea { max-height: 60vh; }
}

/* =========================================================
  23. CONTENIDO TAB (FORMULARIOS CON TABS)
   ========================================================= */
.mc-content-tab{
    background: var(--mc-content-bg);
    color: var(--mc-content-text);
    /*border-radius: 16px;*/
    padding: 1rem;
    box-shadow: var(--mc-shadow);
}
/* =========================================================
  24. Formulario header
   ========================================================= */
.mc-form-header{
    background: var(--mc-form-header-bg);
    color: var(--mc-form-header-text);
    border-radius: 12px 12px 0 0;
    padding: .65rem .75rem;
    box-shadow: var(--mc-shadow);
}

/* opcional: el h5 más prolijo */
.mc-form-header h5{
    margin: 0;
    font-weight: 800;
    letter-spacing: .3px;
}

/* =========================================================
  25. Posicionamiento de tabs en mobile
   ========================================================= */
@media (max-width: 768px){

    #myTabs{
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    #myTabs .nav-item{
        width: 100%;
    }

    #myTabs .nav-link{
        display: flex;
        align-items: center;
        gap: .75rem;
        border-radius: 12px;
        padding: .75rem 1rem;
        font-weight: 600;
    }

    #myTabs .nav-link.active{
        background: var(--mc-primario);
        color: #fff;
    }

}