/* =====================================================
   portal.css — layout intranet ANZORC
   ===================================================== */

html, body { height: 100%; }
.portal {
    display: grid;
    grid-template-columns: 264px 1fr;
    height: 100vh;
    min-height: 100vh;
    background: var(--superficie-alt);
    overflow: hidden;
}

/* --- Sidebar --- */
.side {
    background: linear-gradient(180deg, var(--anzorc-verde-oscuro) 0%, #003c19 100%);
    color: var(--texto-inverso);
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--e5) 0 var(--e4);
}
/* Scrollbar sidebar discreta */
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }
.side::-webkit-scrollbar-track { background: transparent; }

.side__brand {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--e5) var(--e6);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: var(--e4);
    text-decoration: none;
}
.side__brand:hover { text-decoration: none; }
.side__brand-logo {
    max-width: 180px; max-height: 96px;
    width: auto; height: auto;
    object-fit: contain;
}
.side__brand-text { text-align: center; color: white; }
.side__brand-text .side__name { font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.side__brand-text .side__sub  { font-size: 10px; opacity: .7; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }

.side__section {
    padding: 0 var(--e2) var(--e2) var(--e5);
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.4);
    margin-top: var(--e3);
}

.side__nav { flex: 1; padding: 0 var(--e3); display: flex; flex-direction: column; gap: 1px; }

.side__item {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    color: rgba(255,255,255,.82);
    border-radius: var(--radio-md);
    text-decoration: none;
    font-size: var(--tam-sm);
    font-weight: 500;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
    position: relative;
}
.side__item i { font-size: 1.1rem; width: 20px; text-align: center; }
.side__item:hover { background: rgba(255,255,255,.06); color: white; text-decoration: none; }
.side__item.is-active {
    background: rgba(237,206,27,.14);
    color: var(--anzorc-amarillo);
}
.side__item.is-active::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; background: var(--anzorc-amarillo); border-radius: 0 3px 3px 0;
}

.side__foot {
    padding: var(--e4) var(--e3) 0;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: var(--e4);
}

/* --- Main --- */
.main {
    display: flex; flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    position: relative;
}

.topbar {
    display: flex; align-items: center; gap: var(--e4);
    padding: var(--e4) var(--e6);
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 10;
}
.topbar__menu {
    display: none;
    background: none; border: none; cursor: pointer;
    font-size: 1.4rem; padding: var(--e2);
    color: var(--texto);
}
.topbar__title {
    flex: 1;
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--anzorc-verde-oscuro);
}
.topbar__user { display: flex; align-items: center; gap: var(--e3); }
.topbar__user-info { text-align: right; }
.topbar__user-name { font-weight: 600; font-size: var(--tam-sm); }
.topbar__user-role { font-size: var(--tam-xs); color: var(--texto-suave); }
.avatar {
    width: 40px; height: 40px; border-radius: var(--radio-full);
    background: var(--anzorc-verde); color: white;
    display: grid; place-items: center;
    font-weight: 700;
}

.content { padding: var(--e6) var(--e8); flex: 1; }

/* --- Dashboard tarjetas --- */
.saludo {
    background: var(--superficie);
    border-radius: var(--radio-lg);
    padding: var(--e6);
    margin-bottom: var(--e6);
    border: 1px solid var(--borde);
    display: flex; align-items: center; gap: var(--e4);
}
.saludo__icon {
    width: 56px; height: 56px; border-radius: var(--radio-md);
    background: linear-gradient(135deg, var(--anzorc-verde), var(--anzorc-verde-claro));
    color: white; display: grid; place-items: center;
    font-size: 1.6rem;
}
.saludo__text h2 { margin: 0 0 var(--e1); color: var(--anzorc-verde-oscuro); font-size: 1.4rem; }
.saludo__text p  { margin: 0; color: var(--texto-suave); font-size: var(--tam-sm); }

.modulos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--e5);
}
.modulo-card {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: var(--e6);
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column; gap: var(--e3);
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
    position: relative;
    overflow: hidden;
}
.modulo-card::after {
    content: '';
    position: absolute; right: -20px; top: -20px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(0,128,55,.06), transparent 70%);
    pointer-events: none;
}
.modulo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-md);
    border-color: var(--anzorc-verde);
    text-decoration: none;
}
.modulo-card__icon {
    width: 48px; height: 48px; border-radius: var(--radio-md);
    background: linear-gradient(135deg, var(--anzorc-verde), var(--anzorc-verde-claro));
    color: white; display: grid; place-items: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px -8px rgba(0,128,55,.4);
}
.modulo-card__name { font-family: var(--fuente-titulo); font-size: var(--tam-lg); font-weight: 700; color: var(--anzorc-verde-oscuro); }
.modulo-card__desc { font-size: var(--tam-sm); color: var(--texto-suave); line-height: 1.5; }
.modulo-card__go {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: var(--e1);
    font-size: var(--tam-sm); color: var(--anzorc-verde); font-weight: 600;
}
.modulo-card { padding-right: 60px; }
.modulo-card__enter {
    position: absolute; right: var(--e5); bottom: var(--e5);
    color: var(--anzorc-verde); font-size: 1.75rem; line-height: 1;
    opacity: .55; transition: transform .15s, opacity .15s;
    z-index: 2;
}
.modulo-card:hover .modulo-card__enter { opacity: 1; transform: translateX(4px); }

/* --- Formularios --- */
.form { max-width: 100%; }
.form__row { margin-bottom: var(--e4); }
.form__row--between { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.form__label { display: block; font-weight: 600; margin-bottom: var(--e2); font-size: var(--tam-sm); color: var(--texto); }
.form__label--req::after { content: ' *'; color: var(--error); }
.form__input, .form__select, .form__textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-md);
    background: var(--superficie);
    font-size: var(--tam-base);
    color: var(--texto);
    transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
    min-height: 44px;
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
    outline: none;
    border-color: var(--anzorc-verde);
    box-shadow: 0 0 0 3px rgba(0,128,55,.15);
}
.form__help { font-size: var(--tam-xs); color: var(--texto-suave); margin-top: 6px; }

/* Input con icono a la izquierda + toggle a la derecha */
.form__input-icon { position: relative; }
.form__input-icon > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--texto-suave); font-size: 1.05rem; pointer-events: none;
}
.form__input.has-icon { padding-left: 42px; }
.form__input-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--texto-suave); border-radius: var(--radio-md);
}
.form__input-toggle:hover { background: var(--superficie-alt); color: var(--texto); }

/* --- Bulk-select (selección múltiple + acciones masivas) --- */
.bulk-check { width: 18px; height: 18px; accent-color: var(--anzorc-verde); cursor: pointer; vertical-align: middle; margin: 0; flex-shrink: 0; }
.bulk-check-wrap { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; background: white; cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.12); border: 1px solid var(--borde); }
.bulk-check-wrap:hover { border-color: var(--anzorc-verde); }
.bulk-check-wrap--card { position: absolute; top: 10px; left: 10px; }

/* Modo selección: escondidos por defecto, se muestran al activar */
.bulk-check, .bulk-check-wrap, .bulk-check-all { display: none; }
[data-bulk].is-bulk-mode .bulk-check,
[data-bulk].is-bulk-mode .bulk-check-wrap,
[data-bulk].is-bulk-mode .bulk-check-all { display: inline-flex; }
[data-bulk].is-bulk-mode .bulk-col { display: table-cell; }
.bulk-col { display: none; width: 40px; text-align: center; padding: var(--e2); }

/* Cuando el modo NO está activo, el card sigue igual (checkbox ocupaba position absolute → no altera layout) */
[data-bulk-id] { transition: outline-color .15s, background-color .15s; }
[data-bulk-id].is-bulk-selected { outline: 2px solid var(--anzorc-verde); outline-offset: -2px; background: rgba(0,128,55,.05); }
tr[data-bulk-id].is-bulk-selected td { background: rgba(0,128,55,.06); }

/* Espacio extra SOLO en cards con checkbox en esquina absoluta (no fmt-item inline ni tr) */
[data-bulk].is-bulk-mode [data-bulk-id]:has(.bulk-check-wrap--card) { padding-top: 44px; }

/* Botón "Seleccionar" (auto-inyectado en el head del listado) */
.bulk-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: white; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--anzorc-verde-oscuro); cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.bulk-toggle:hover { background: var(--superficie-alt); border-color: var(--anzorc-verde); }
.bulk-toggle.is-active { background: var(--anzorc-verde); color: white; border-color: var(--anzorc-verde); }
.bulk-toggle.is-active:hover { background: var(--anzorc-verde-oscuro); }

/* Barra flotante de acciones */
.bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: white; border: 1px solid var(--anzorc-verde); border-radius: 999px; box-shadow: 0 12px 32px -8px rgba(0,60,25,.25); max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.bulk-bar.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.bulk-bar__count { font-size: 13px; color: var(--anzorc-verde-oscuro); font-weight: 600; padding: 0 6px; display: flex; align-items: center; gap: 6px; }
.bulk-bar__count strong { background: var(--anzorc-verde); color: white; padding: 2px 10px; border-radius: 999px; font-family: var(--fuente-titulo); }
.bulk-bar__paginas { font-size: 11px; color: var(--texto-suave); font-style: italic; }
.bulk-bar .btn { padding: 8px 14px; font-size: 13px; }
.bulk-bar .btn--danger { background: #c02020; color: white; border: 0; }
.bulk-bar .btn--danger:hover { background: #a01818; }
@media (max-width: 600px) {
    .bulk-bar { left: 12px; right: 12px; transform: none; max-width: none; border-radius: 12px; }
    .bulk-bar.is-visible { transform: translateY(-4px); }
}

/* --- Drop zone para input[type=file] (drag & drop) --- */
.drop-file { position: relative; display: block; border: 2px dashed var(--borde); background: var(--superficie-alt); border-radius: var(--radio-md); padding: 22px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.drop-file:hover { border-color: var(--anzorc-verde); background: rgba(0,128,55,.04); }
.drop-file.is-dragover { border-color: var(--anzorc-verde); background: rgba(0,128,55,.09); transform: scale(1.005); border-style: solid; }
.drop-file.is-invalid { border-color: #c02020; background: rgba(192,32,32,.04); }
.drop-file__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.drop-file__inner { position: relative; z-index: 1; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.drop-file__icon { font-size: 30px; color: var(--anzorc-verde); line-height: 1; }
.drop-file__title { font-size: 14px; font-weight: 600; color: var(--anzorc-verde-oscuro); }
.drop-file__hint { font-size: 12px; color: var(--texto-suave); }
.drop-file__browse { color: var(--anzorc-verde); font-weight: 600; text-decoration: underline; }
.drop-file.has-file { padding: 14px 16px; text-align: left; background: white; border-style: solid; border-color: var(--anzorc-verde); }
.drop-file.has-file .drop-file__inner { flex-direction: row; align-items: center; gap: 12px; }
.drop-file__list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 260px; overflow-y: auto; }
.drop-file__list .drop-file__preview { padding: 8px 10px; background: var(--superficie-alt); border-radius: 6px; }
.drop-file__preview { display: flex; align-items: center; gap: 12px; width: 100%; }
.drop-file__preview-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: rgba(0,128,55,.1); color: var(--anzorc-verde); display: grid; place-items: center; font-size: 22px; }
.drop-file__preview-info { flex: 1; min-width: 0; text-align: left; }
.drop-file__preview-name { font-size: 13px; font-weight: 600; color: var(--anzorc-verde-oscuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-file__preview-size { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
.drop-file__preview-clear { flex-shrink: 0; background: transparent; border: 0; color: #c02020; font-size: 18px; cursor: pointer; padding: 6px; border-radius: 6px; pointer-events: auto; z-index: 3; position: relative; line-height: 1; }
.drop-file__preview-clear:hover { background: rgba(192,32,32,.08); }

/* Checkbox y links de formulario */
.form__check { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--tam-sm); cursor: pointer; }
.form__check input { width: 16px; height: 16px; accent-color: var(--anzorc-verde); }
.form__link { font-size: var(--tam-sm); color: var(--anzorc-verde); font-weight: 500; }

/* --- Botones --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    padding: 11px 20px;
    border-radius: var(--radio-md);
    border: 1px solid transparent;
    background: var(--anzorc-verde);
    color: white; font-weight: 600;
    cursor: pointer; text-decoration: none;
    font-size: var(--tam-sm);
    min-height: 44px;
    transition: background var(--transicion-rapida), transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.btn:hover { background: var(--anzorc-verde-oscuro); color: white; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0,128,55,.5); }
.btn:active { transform: translateY(1px); }
.btn.btn--ghost   { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); box-shadow: none; }
.btn.btn--ghost:hover { background: var(--superficie-alt); color: var(--texto); box-shadow: none; }
.btn.btn--danger  { background: var(--error); }
.btn.btn--danger:hover { background: #b91c1c; }
.btn.btn--sm      { padding: 7px 12px; font-size: var(--tam-xs); min-height: 36px; }
.btn.btn--icon    { padding: 8px; min-height: 36px; min-width: 36px; }
.btn.btn--block   { width: 100%; }

/* --- Tabla --- */
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    border-radius: var(--radio-md);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--borde);
}
.tabla th, .tabla td {
    padding: var(--e3) var(--e4);
    text-align: left;
    border-bottom: 1px solid var(--borde);
}
.tabla th {
    background: var(--superficie-alt);
    font-weight: 600; font-size: var(--tam-xs);
    color: var(--texto-suave);
    text-transform: uppercase; letter-spacing: .06em;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--superficie-alt); }
.tabla__acciones { display: flex; gap: 6px; justify-content: flex-end; }

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge--verde   { background: rgba(0,128,55,.12);  color: var(--anzorc-verde-oscuro); }
.badge--amarillo{ background: rgba(237,206,27,.2); color: #7a6a08; }
.badge--rojo    { background: rgba(220,38,38,.12); color: #991b1b; }
.badge--gris    { background: var(--superficie-alt); color: var(--texto-suave); border: 1px solid var(--borde); }
.badge--azul    { background: rgba(2,132,199,.14); color: #075985; }
.badge--morado  { background: rgba(124,58,237,.14); color: #5b21b6; }
.badge--naranja { background: rgba(245,158,11,.16); color: #92400e; }

/* =====================================================
   LOGIN split screen  —  version 2 (profesional)
   ===================================================== */
.login-page { background: var(--superficie); min-height: 100vh; }

.split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 100vh;
}

/* Panel visual */
.split__visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    isolation: isolate;
}
.split__visual-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.split__visual-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(0,40,16,.15) 0%,
            rgba(0,50,20,.35) 45%,
            rgba(0,40,16,.85) 100%);
}
/* Marca de agua sutil verde */
.split__visual::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at bottom left, rgba(0,90,38,.35), transparent 60%);
    pointer-events: none;
}

.split__visual-top {
    position: relative;
    z-index: 3;
    padding: var(--e10) var(--e12) 0;
    display: flex; align-items: center; gap: var(--e4);
}
.split__visual-top .split__logo {
    height: 64px; width: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.split__visual-top .split__brand-text {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.split__visual-top .split__brand-text strong { font-size: 1.4rem; display: block; line-height: 1.1; }
.split__visual-top .split__brand-text span { font-size: .8rem; opacity: .85; letter-spacing: .18em; text-transform: uppercase; }

.split__visual-content {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding: var(--e12);
    max-width: 640px;
}
.split__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(237,206,27,.95);
    color: var(--anzorc-verde-oscuro);
    border-radius: var(--radio-full);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 var(--e5);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.split__quote {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 var(--e4);
    color: white;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
    max-width: 520px;
}
.split__quote em {
    font-style: normal;
    color: var(--anzorc-amarillo);
}
.split__cite {
    font-size: var(--tam-sm);
    color: rgba(255,255,255,.85);
    margin: 0;
    letter-spacing: .02em;
}

/* Panel formulario */
.split__form {
    display: flex; align-items: center; justify-content: center;
    padding: var(--e10) var(--e8);
    background: var(--superficie);
    position: relative;
}
.split__form-inner {
    width: 100%; max-width: 400px;
}
.split__form-head { text-align: center; margin-bottom: var(--e8); }
.split__form-logo {
    height: 72px; width: auto;
    margin: 0 auto var(--e5); display: block;
}
.split__form-head h1 {
    font-family: var(--fuente-titulo);
    color: var(--anzorc-verde-oscuro);
    font-size: 1.75rem;
    margin: 0 0 var(--e2);
    letter-spacing: -.01em;
}
.split__form-head p {
    color: var(--texto-suave);
    margin: 0;
    font-size: var(--tam-sm);
}

.split__form-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--e10);
    padding-top: var(--e5);
    border-top: 1px solid var(--borde);
    font-size: var(--tam-xs); color: var(--texto-suave);
}
.split__form-foot a { color: var(--anzorc-verde); text-decoration: none; font-weight: 500; }
.split__form-foot a:hover { text-decoration: underline; }

@media (max-width: 960px) {
    .split { grid-template-columns: 1fr; }
    .split__visual { min-height: 260px; }
    .split__visual-top {
        padding: var(--e6);
        justify-content: center;    /* centrado en mobile */
    }
    .split__visual-top .split__logo { height: 56px; }
    .split__visual-content { padding: var(--e6); text-align: center; }
    .split__quote { font-size: 1.15rem; max-width: none; }
    .split__meta { margin-left: auto; margin-right: auto; }
    .split__form { padding: var(--e8) var(--e5); }
    .split__form-head h1 { font-size: 1.5rem; }
}

/* =====================================================
   DRAWER lateral (crear/editar en panel deslizante)
   ===================================================== */
/* SweetAlert2 debe salir por encima de drawer (9999) y picker-modal (10050) */
body > .swal2-container { z-index: 10500 !important; }

.drawer {
    position: fixed; inset: 0;
    z-index: 9999;
    display: grid; grid-template-columns: 1fr auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transicion-normal);
}
.drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}
.drawer__backdrop {
    background: rgba(0, 20, 8, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.drawer__panel {
    width: min(720px, 100vw);
    height: 100%; /* garantiza altura completa para flex column */
    background: var(--superficie);
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transicion-normal);
    overflow: hidden;
    position: relative;
}
.drawer--wide .drawer__panel { width: min(920px, 100vw); }
.drawer.is-open .drawer__panel { transform: translateX(0); }

/* Barra de progreso arriba (visible durante submit) */
.drawer__progress {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: transparent; z-index: 5;
    overflow: hidden; pointer-events: none;
}
.drawer__progress::after {
    content: ''; display: block; height: 100%;
    background: var(--anzorc-verde);
    transform: translateX(-100%);
    transition: transform .3s;
}
.drawer.is-saving .drawer__progress::after {
    animation: drawerProg 1.2s ease-in-out infinite;
}
@keyframes drawerProg {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(20%); }
    100% { transform: translateX(120%); }
}

.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e3);
    padding: 12px 20px;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie);
    flex-shrink: 0;
    min-height: 52px;
}
.drawer__title {
    margin: 0; padding: 0;
    font-family: var(--fuente-titulo);
    color: var(--anzorc-verde-oscuro);
    font-size: 1rem; font-weight: 700;
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}
.drawer__head-actions { display: flex; gap: 6px; align-items: center; }
.drawer__close {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: var(--radio-md);
    color: var(--texto-suave);
    display: grid; place-items: center;
    font-size: 1.1rem;
}
.drawer__close:hover { background: var(--superficie-alt); color: var(--texto); }
.drawer__back {
    background: rgba(0,128,55,.08); border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: var(--radio-md);
    color: var(--anzorc-verde-oscuro);
    display: grid; place-items: center;
    font-size: 1.1rem; margin-right: 8px;
    transition: background .15s;
}
.drawer__back:hover { background: rgba(0,128,55,.16); }

/* Editor de código simple (HTML/CSS) para el bloque html_custom */
.codigo-editor {
    font-family: var(--fuente-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    tab-size: 2;
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border: 1px solid #1e293b !important;
    border-radius: var(--radio-md);
    padding: 12px 14px !important;
    white-space: pre;
    overflow-x: auto;
    resize: vertical;
}
.codigo-editor:focus {
    border-color: var(--anzorc-verde) !important;
    box-shadow: 0 0 0 3px rgba(0,128,55,.3) !important;
    outline: none;
}
.codigo-editor[data-lang="html"]::placeholder { color: rgba(255,255,255,.35); }
.codigo-editor[data-lang="css"]::placeholder  { color: rgba(255,255,255,.35); }

.drawer__body {
    flex: 1 1 auto; overflow-y: auto;
    padding: 16px 20px 20px;
    scroll-behavior: smooth;
    min-height: 0; /* clave para que flex-child scrollee dentro de flex column */
}
.drawer__body::-webkit-scrollbar { width: 8px; }
.drawer__body::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; }

/* Footer FIJO en el flujo (flex column del panel) — siempre visible sin scroll */
.drawer__foot {
    flex: 0 0 auto;
    display: flex; gap: 10px; justify-content: flex-end; align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--borde);
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -4px 12px rgba(0,0,0,.05);
    z-index: 4;
    /* Reset del hack de margin negativos que traían los forms */
    margin: 0 !important;
    position: relative; /* NO absolute — se comporta como fila del flex column */
}
.drawer__foot[hidden] { display: none !important; }
.drawer__foot .drawer__foot-hint {
    margin-right: auto; font-size: 11px; color: var(--texto-suave);
    display: flex; align-items: center; gap: 6px;
}
.drawer__foot .drawer__foot-hint kbd {
    padding: 2px 6px; background: white; border: 1px solid var(--borde);
    border-bottom-width: 2px; border-radius: 4px;
    font-family: var(--fuente-mono); font-size: 10px; color: var(--texto);
}
.drawer__foot .btn { padding: 8px 16px; font-size: 13px; }
.drawer__foot .btn[type="submit"], .drawer__foot .btn--primary { font-weight: 700; }
.drawer.is-saving .drawer__foot .btn[type="submit"] { pointer-events: none; opacity: .7; }

/* Skeleton mientras carga el drawer */
.drawer__loading {
    padding: var(--e8);
    text-align: center;
    color: var(--texto-suave);
}
.drawer__loading i { font-size: 2rem; display: block; margin-bottom: var(--e2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive --- */
@media (max-width: 900px) {
    .portal { grid-template-columns: 1fr; overflow: visible; height: auto; }
    .main { height: auto; overflow: visible; }
    .side {
        position: fixed; left: 0; top: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform var(--transicion-normal);
        z-index: 100;
        box-shadow: 0 0 40px rgba(0,0,0,.2);
    }
    body.side-open .side { transform: translateX(0); }
    body.side-open::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 99;
        animation: fadeInBd .15s ease;
    }
    body.side-open { overflow: hidden; }
    @keyframes fadeInBd { from { opacity: 0; } to { opacity: 1; } }
    .topbar__menu { display: block; }
    .content { padding: var(--e4); }
}

/* ===================================================
   Responsive global — títulos, breadcrumbs, párrafos,
   tablas y cards en mobile
   =================================================== */
.page-head h2 {
    font-size: clamp(1.05rem, 4vw, 1.4rem);
    line-height: 1.25;
    margin: 0 0 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.page-head p {
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.portal-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: clamp(11px, 3vw, 13px);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.portal-breadcrumb a, .portal-breadcrumb span { white-space: nowrap; }

/* Tablas: si desbordan, hacen scroll horizontal SUAVE dentro de su contenedor */
.tabla-responsive, .con-adic-scroll, .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radio-md);
}
.tabla-responsive table, .con-adic-scroll table, .table-scroll table {
    min-width: 100%;
    width: max-content;
    max-width: none;
}

/* Cualquier tabla dentro del contenido principal */
@media (max-width: 768px) {
    .content table:not(.no-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
    .content table:not(.no-scroll) td,
    .content table:not(.no-scroll) th {
        white-space: normal;
    }

    /* Page-head en mobile: apilar el cluster de acciones debajo */
    .page-head.between { flex-direction: column; align-items: stretch; }
    .page-head.between > .cluster { justify-content: flex-start; margin-top: 8px; }

    /* Botones más compactos */
    .btn { font-size: 13px; padding: 8px 12px; }
    .btn--sm { font-size: 12px; padding: 6px 10px; }

    /* Cards y grids compactan */
    .con-metrics { grid-template-columns: repeat(2, 1fr); }
    .con-info-grid { grid-template-columns: 1fr; }
    .con-detalle-head { flex-direction: column; align-items: stretch; }
    .con-detalle-head__actions { flex-wrap: wrap; }

    /* Tabs con scroll horizontal */
    .con-tabs__nav { padding-bottom: 4px; }
}

@media (max-width: 480px) {
    .con-metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
    .content { padding: var(--e3); }
    .drawer__panel { max-width: 100vw; }
}

/* --- Utils --- */
.stack > * + * { margin-top: var(--e4); }
.cluster { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; }
.filtros-inline { justify-content: flex-end; }

/* Paginación de tablas */
.paginacion-tabla {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e4); flex-wrap: wrap;
    margin-top: var(--e4); padding: var(--e3) var(--e4);
    background: var(--superficie-alt); border-radius: var(--radio-md);
    font-size: var(--tam-sm);
}
.paginacion-tabla__info { color: var(--texto-suave); }
.paginacion-tabla__ctrl { display: flex; align-items: center; gap: 4px; }
.paginacion-tabla__num, .paginacion-tabla__actual, .paginacion-tabla__gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: var(--radio-md); font-weight: 600;
    text-decoration: none; transition: background .12s;
}
.paginacion-tabla__num { color: var(--anzorc-verde-oscuro); background: transparent; }
.paginacion-tabla__num:hover { background: rgba(0,128,55,.1); }
.paginacion-tabla__actual { background: var(--anzorc-verde); color: white; }
.paginacion-tabla__gap { color: var(--texto-suave); pointer-events: none; }
.filtros-inline .form__input, .filtros-inline .form__select {
    padding-top: 6px; padding-bottom: 6px; font-size: var(--tam-sm);
}
@media (max-width: 900px) {
    .filtros-inline { width: 100%; justify-content: flex-start; }
    .filtros-inline .form__input, .filtros-inline .form__select { flex: 1 1 140px; min-width: 0; }
}

/* ================================================================
   Filtros inline COMPACTOS al lado del titulo del modulo
   ================================================================ */
.filtros-inline-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 6px;
    max-width: 65%;
}
.filtros-inline-row > .form__input,
.filtros-inline-row > .form__select {
    padding: 6px 10px; font-size: 13px; line-height: 1.2;
    width: auto; min-width: 0;
}
.filtros-inline-row > input[type="search"] { max-width: 160px; flex: 0 1 160px; }
.filtros-inline-row > input[type="date"]   { max-width: 135px; flex: 0 1 135px; }
.filtros-inline-row > select               { max-width: 140px; flex: 0 1 auto; }
.filtros-inline-row > .btn { padding: 6px 12px; font-size: 13px; }
.filtros-inline-row > .btn--icon { padding: 6px 8px; }
@media (max-width: 1200px) {
    .filtros-inline-row { max-width: 100%; justify-content: flex-start; margin-top: var(--e2); }
}
@media (max-width: 640px) {
    .filtros-inline-row > .form__input,
    .filtros-inline-row > .form__select { flex: 1 1 calc(50% - 6px); max-width: 100%; }
}

.between { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.page-head { margin-bottom: var(--e6); }
.page-head h2 { margin: 0 0 var(--e2); color: var(--anzorc-verde-oscuro); }
.page-head p  { margin: 0; color: var(--texto-suave); font-size: var(--tam-sm); }
.page-head.between {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e4); flex-wrap: wrap;
}
.page-head.between > div:first-child { flex-shrink: 0; }
.page-head.between > form { margin-left: auto; }
.empty { text-align: center; padding: var(--e10) var(--e4); color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-lg); }
.empty i { font-size: 3rem; opacity: .3; display: block; margin-bottom: var(--e3); }

/* =====================================================
   CMS · editor Quill integrado con la marca ANZORC
   ===================================================== */
.quill-toolbar.ql-toolbar {
    border-top-left-radius: var(--radio-md);
    border-top-right-radius: var(--radio-md);
    border: 1px solid var(--borde-fuerte) !important;
    border-bottom: none !important;
    background: var(--superficie-alt);
}
.quill-editor.ql-container {
    border-bottom-left-radius: var(--radio-md);
    border-bottom-right-radius: var(--radio-md);
    border: 1px solid var(--borde-fuerte) !important;
    min-height: 320px;
    font-family: var(--fuente-sans);
    font-size: var(--tam-base);
}
.ql-editor { min-height: 320px; padding: var(--e4) var(--e5); }
.ql-editor.ql-blank::before { color: var(--texto-suave); font-style: normal; }

.ql-snow .ql-stroke { stroke: var(--texto-suave); }
.ql-snow .ql-fill   { fill:   var(--texto-suave); }
.ql-snow .ql-picker { color:  var(--texto-suave); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: var(--anzorc-verde);
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--anzorc-verde);
}
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
    color: var(--anzorc-verde);
}
.ql-editor h2 { color: var(--anzorc-verde-oscuro); font-family: var(--fuente-titulo); }
.ql-editor h3 { color: var(--anzorc-verde-oscuro); font-family: var(--fuente-titulo); }
.ql-editor blockquote {
    border-left: 4px solid var(--anzorc-verde);
    background: rgba(0,128,55,.05);
    padding: var(--e3) var(--e4);
    color: var(--texto);
    margin: var(--e3) 0;
}
.ql-editor img { border-radius: var(--radio-md); max-width: 100%; height: auto; }
.ql-editor a { color: var(--anzorc-verde); }

/* =====================================================
   PICKER DE IMAGENES (usado en el CMS y en drawers)
   ===================================================== */
.picker-slot {
    display: flex; align-items: center; gap: var(--e4);
    padding: var(--e3); border: 1px dashed var(--borde);
    border-radius: var(--radio-md); background: var(--superficie-alt);
}
.picker-slot__preview {
    width: 120px; height: 90px; object-fit: cover;
    border-radius: var(--radio-md); border: 1px solid var(--borde);
    background: white;
}
.picker-slot__empty {
    width: 120px; height: 90px; display: grid; place-items: center;
    background: white; border: 1px solid var(--borde);
    border-radius: var(--radio-md); color: var(--texto-suave); font-size: 1.5rem; gap: 4px;
    flex-direction: column;
}
.picker-slot__empty i { font-size: 1.75rem; opacity: .5; }
.picker-slot__acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* =====================================================
   DRAWER COMPACTO — spacing reducido, tabs, contadores
   ===================================================== */
.drawer__body .form__row { margin-bottom: 12px; position: relative; }
.drawer__body .form__label {
    margin-bottom: 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-suave);
}
.drawer__body .form__label--req::after { color: var(--error); margin-left: 2px; }
.drawer__body .form__input, .drawer__body .form__select, .drawer__body .form__textarea {
    padding: 8px 12px; font-size: 13.5px;
    border: 1px solid var(--borde);
    transition: border-color .12s, box-shadow .12s;
}
.drawer__body .form__input:focus,
.drawer__body .form__select:focus,
.drawer__body .form__textarea:focus {
    border-color: var(--anzorc-verde);
    box-shadow: 0 0 0 3px rgba(0,128,55,.12);
    outline: none;
}
.drawer__body .pqr-grid-2 { gap: 8px 12px; }
.drawer__body fieldset.pqr-datos {
    padding: 10px 14px 6px; margin: 12px 0;
    border: 1px solid var(--borde); border-radius: var(--radio-md);
    background: rgba(0,128,55,.02);
}
.drawer__body fieldset.pqr-datos > legend {
    padding: 0 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--anzorc-verde);
}
.drawer__body .form__help { font-size: 11px; margin-top: 3px; color: var(--texto-suave); }
.drawer__body h3 { font-size: 14px; margin: 16px 0 8px; color: var(--anzorc-verde-oscuro); text-transform: uppercase; letter-spacing: .05em; }

/* Contador de caracteres (auto-agregado por portal.js) */
.char-counter {
    position: absolute; right: 8px; top: 4px;
    font-size: 10px; font-family: var(--fuente-mono);
    color: var(--texto-suave); background: rgba(255,255,255,.9);
    padding: 1px 6px; border-radius: 6px;
    pointer-events: none;
    transition: color .15s, background .15s;
}
.char-counter--warn { color: #b45309; background: rgba(237,206,27,.15); }
.char-counter--near { color: #991b1b; background: rgba(220,38,38,.12); }

/* ================================================================
   Lista reordenable (drag & drop) — usada en parallax y otros listados
   ================================================================ */
.reorder-list {
    display: flex; flex-direction: column; gap: var(--e3);
}
.reorder-item {
    display: grid; grid-template-columns: 32px 1fr;
    gap: var(--e3); align-items: stretch;
    padding: var(--e3);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    transition: background .15s, box-shadow .15s, transform .12s, border-color .15s;
    position: relative;
}
.reorder-item.is-dragging {
    opacity: .55;
    transform: scale(.985);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.25);
    cursor: grabbing;
}
.reorder-item.is-drop-target {
    border-color: var(--anzorc-verde);
    background: rgba(0,128,55,.05);
    box-shadow: 0 0 0 3px rgba(0,128,55,.15);
}
.reorder-item__handle {
    display: grid; place-items: center;
    color: var(--texto-suave);
    cursor: grab;
    font-size: 1.4rem;
    border-radius: var(--radio-md);
    background: linear-gradient(180deg, rgba(0,128,55,.06), rgba(0,128,55,.02));
    transition: background .15s, color .15s;
}
.reorder-item__handle:active { cursor: grabbing; }
.reorder-item:hover .reorder-item__handle {
    background: rgba(0,128,55,.14);
    color: var(--anzorc-verde);
}
.reorder-item__pos {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: var(--radio-full);
    background: var(--superficie-alt); color: var(--texto-suave);
    font-family: var(--fuente-mono); font-size: 11px; font-weight: 700;
    margin-right: var(--e2);
}
.reorder-status {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: var(--anzorc-verde-oscuro); color: white;
    border-radius: var(--radio-full);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.35);
    font-size: var(--tam-sm); font-weight: 600;
    z-index: 100;
    animation: slideUp .3s ease;
}
/* [hidden] siempre gana sobre el display flex de arriba */
.reorder-status[hidden] { display: none !important; }
@keyframes slideUp { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* Crop editor del parallax: imagen a tamaño natural + frame recorte + dot arrastrable */
.parallax-crop {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border-radius: var(--radio-md);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    cursor: grab;
}
.parallax-crop:active { cursor: grabbing; }
.parallax-crop img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    background: repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%) 50% / 20px 20px;
}
.parallax-crop__mask {
    position: absolute; inset: 0; pointer-events: none;
}
/* Frame de recorte: rectángulo blanco que resalta el área visible del banner */
.parallax-crop__frame {
    position: absolute;
    border: 2px solid white;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
    border-radius: 2px;
    pointer-events: none;
    transition: none;
}
/* Punto arrastrable: focal point */
.parallax-crop__dot {
    position: absolute; z-index: 2;
    width: 32px; height: 32px;
    margin-left: -16px; margin-top: -16px;
    background: var(--anzorc-verde);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 3px rgba(0,128,55,.35);
    display: grid; place-items: center;
    color: white; font-size: 14px;
    cursor: grab;
    transition: transform .12s;
}
.parallax-crop__dot:hover { transform: scale(1.1); }
.parallax-crop__dot:active { cursor: grabbing; transform: scale(1.15); }
.parallax-crop__dot:focus-visible { outline: none; box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 4px var(--anzorc-amarillo); }
.parallax-crop__info {
    position: absolute; top: 8px; left: 8px;
    display: flex; gap: 8px;
    pointer-events: none;
    z-index: 3;
}
.parallax-crop__info span {
    padding: 3px 8px; border-radius: 4px;
    background: rgba(15,23,42,.85); color: white;
    font-size: 10px; font-family: var(--fuente-mono);
    backdrop-filter: blur(4px);
}

/* Preview en vivo (usado en parallax-form) */
.parallax-preview {
    position: relative; height: 180px;
    border-radius: var(--radio-md); overflow: hidden;
    background-size: cover; background-position: center;
    background-color: var(--superficie-alt);
    border: 1px solid var(--borde);
}
.parallax-preview__overlay {
    position: absolute; inset: 0;
    background: rgba(0,128,55,.5);
    transition: background .2s;
}
.parallax-preview__inner {
    position: relative; z-index: 1;
    height: 100%; padding: 16px;
    display: flex; flex-direction: column; justify-content: center;
    color: white; text-align: center;
}
.parallax-preview__inner h3 {
    color: white !important; margin: 0 0 6px !important;
    font-size: 1.15rem !important; text-transform: none !important; letter-spacing: normal !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.parallax-preview__inner p {
    color: rgba(255,255,255,.9); margin: 0 0 10px;
    font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.parallax-preview__inner .btn { align-self: center; }

/* Chip-picker visual: grid de opciones clickeables (iconos / colores) */
.chip-picker {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    padding: 6px;
    background: var(--superficie-alt); border-radius: var(--radio-md);
}
.chip-picker__btn, .chip-picker__color {
    width: 38px; height: 38px; padding: 0;
    border: 2px solid transparent; border-radius: var(--radio-md);
    background: white; cursor: pointer;
    display: grid; place-items: center;
    font-size: 1.1rem; color: var(--texto-suave);
    transition: border-color .12s, transform .12s, background .12s;
}
.chip-picker__btn:hover, .chip-picker__color:hover {
    border-color: var(--anzorc-verde); transform: scale(1.05);
}
.chip-picker__btn.is-active {
    background: var(--anzorc-verde); color: white; border-color: var(--anzorc-verde-oscuro);
}
.chip-picker__color {
    position: relative; color: transparent;
    border: 3px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.chip-picker__color.is-active {
    color: white; border-color: rgba(0,0,0,.9);
    box-shadow: 0 0 0 2px white inset, 0 0 0 3px rgba(0,0,0,.9);
}
.chip-picker__color i { font-size: 1.1rem; }

/* Botón submit del footer más visual */
.drawer__foot .btn:not(.btn--ghost) {
    background: var(--anzorc-verde); color: white;
    box-shadow: 0 4px 12px -4px rgba(0,128,55,.5);
}
.drawer__foot .btn:not(.btn--ghost):hover {
    background: var(--anzorc-verde-oscuro);
    transform: translateY(-1px);
}

/* Secciones colapsables dentro del drawer */
.drawer-collapsible {
    border: 1px solid var(--borde); border-radius: var(--radio-md);
    margin-bottom: var(--e3);
}
.drawer-collapsible > summary {
    padding: 10px 14px; cursor: pointer; font-weight: 600;
    color: var(--anzorc-verde-oscuro);
    display: flex; align-items: center; gap: 8px;
    list-style: none;
    background: var(--superficie-alt);
    border-radius: var(--radio-md);
}
.drawer-collapsible[open] > summary {
    border-bottom: 1px solid var(--borde);
    border-radius: var(--radio-md) var(--radio-md) 0 0;
}
.drawer-collapsible > summary::-webkit-details-marker { display: none; }
.drawer-collapsible > summary::before {
    content: "\F282"; /* bi-chevron-right */
    font-family: "bootstrap-icons"; transition: transform .15s;
    color: var(--texto-suave);
}
.drawer-collapsible[open] > summary::before { transform: rotate(90deg); }
.drawer-collapsible > .collapsible-body { padding: var(--e3) var(--e4); }

/* Modal-picker: se apila SOBRE el drawer sin cerrarlo */
.picker-modal {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .2s;
}
.picker-modal.is-open { opacity: 1; visibility: visible; }
.picker-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}
.picker-modal__panel {
    position: relative; z-index: 1;
    background: var(--superficie);
    width: min(920px, 95vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    border-radius: var(--radio-lg);
    box-shadow: 0 30px 60px -10px rgba(0,0,0,.35);
    transform: translateY(10px) scale(.98);
    transition: transform .2s;
}
.picker-modal.is-open .picker-modal__panel { transform: translateY(0) scale(1); }
.picker-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--borde);
}
.picker-modal__head h3 { margin: 0; color: var(--anzorc-verde-oscuro); font-size: 1.1rem; }
.picker-modal__body {
    padding: var(--e4) var(--e5);
    overflow-y: auto;
}

/* Documento en el picker (no-imagen) */
.picker__item-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--e2); text-align: center; height: 100%;
    background: var(--superficie-alt);
}
.picker__item-doc i { font-size: 2rem; color: var(--anzorc-verde); margin-bottom: 4px; }
.picker__item-doc strong { font-size: 11px; color: var(--anzorc-verde-oscuro); line-height: 1.3; }
.picker__item-doc small { font-size: 10px; color: var(--texto-suave); }

/* Badge de tipo en item de biblioteca */
.biblio-item__tipo {
    position: absolute; top: 6px; right: 6px;
    color: white; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: .05em;
}
.biblio-item__img { position: relative; }

/* Modal de picker (se carga en drawer) */
.picker { display: flex; flex-direction: column; gap: var(--e4); min-height: 400px; }
.picker__head { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.picker__buscador {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: var(--e2);
    padding: 6px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio-full); background: white;
}
.picker__buscador i { color: var(--texto-suave); }
.picker__buscador input { flex: 1; border: none; outline: none; padding: 6px 4px; background: transparent; font-size: var(--tam-sm); }

.picker__prog { padding: var(--e3); background: rgba(0,128,55,.06); border-radius: var(--radio-md); }
.picker__prog-bar { height: 6px; background: rgba(0,128,55,.15); border-radius: 3px; overflow: hidden; }
.picker__prog-bar span { display: block; height: 100%; background: var(--anzorc-verde); width: 0; transition: width .3s; }
.picker__prog p { margin: var(--e2) 0 0; font-size: var(--tam-sm); color: var(--anzorc-verde-oscuro); }

.picker__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e2);
}
.picker__item {
    position: relative; padding: 0; border: 2px solid transparent;
    border-radius: var(--radio-md); overflow: hidden; cursor: pointer;
    background: white; transition: border-color .15s, transform .15s;
    aspect-ratio: 4/3;
}
.picker__item:hover { border-color: var(--anzorc-verde); transform: scale(1.03); }
.picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker__item-dim {
    position: absolute; bottom: 4px; left: 4px;
    background: rgba(0,0,0,.6); color: white; font-size: 10px;
    padding: 2px 6px; border-radius: 4px; font-family: var(--fuente-mono);
}
.picker__vacio {
    grid-column: 1 / -1; text-align: center; padding: var(--e8) var(--e4); color: var(--texto-suave);
}
.picker__vacio i { font-size: 2rem; opacity: .5; display: block; margin-bottom: var(--e2); }

/* =====================================================
   BIBLIOTECA (pagina completa) - dropzone y grid
   ===================================================== */
.biblio-dropzone {
    border: 2px dashed rgba(0,128,55,.3); border-radius: var(--radio-lg);
    padding: var(--e6); text-align: center; cursor: pointer;
    background: rgba(0,128,55,.03); transition: all .15s;
    margin-bottom: var(--e5);
}
.biblio-dropzone:hover, .biblio-dropzone.is-drag {
    border-color: var(--anzorc-verde); background: rgba(0,128,55,.08);
}
.biblio-dropzone__inner i { font-size: 2.5rem; color: var(--anzorc-verde); opacity: .7; display: block; margin-bottom: var(--e2); }
.biblio-dropzone__inner p { margin: 0 0 4px; color: var(--anzorc-verde-oscuro); }
.biblio-dropzone__inner small { color: var(--texto-suave); font-size: var(--tam-xs); }

.biblio-dropzone__progreso { margin-top: var(--e4); }
.biblio-dropzone__barra { height: 8px; background: rgba(0,128,55,.15); border-radius: 4px; overflow: hidden; }
.biblio-dropzone__barra span { display: block; height: 100%; background: var(--anzorc-verde); width: 0; transition: width .3s; }
.biblio-dropzone__progreso p { margin: var(--e2) 0 0; font-size: var(--tam-sm); color: var(--anzorc-verde-oscuro); }

.biblio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e3);
}
.biblio-item {
    margin: 0; background: white; border-radius: var(--radio-md);
    overflow: hidden; border: 1px solid var(--borde);
    display: flex; flex-direction: column; transition: box-shadow .15s;
}
.biblio-item:hover { box-shadow: var(--sombra-md); }
.biblio-item__img { aspect-ratio: 4/3; overflow: hidden; background: var(--superficie-alt); }
.biblio-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biblio-item__meta { padding: 6px 10px; font-size: var(--tam-xs); }
.biblio-item__meta strong { display: block; color: var(--anzorc-verde-oscuro); font-size: var(--tam-sm); }
.biblio-item__meta small { display: block; color: var(--texto-suave); font-size: 10px; margin-top: 2px; }
.biblio-item__acciones {
    display: flex; gap: 4px; padding: 4px 8px; border-top: 1px solid var(--borde);
    background: var(--superficie-alt);
}

/* =====================================================
   BLOQUES ENRIQUECIDOS - chips insertar + preview en editor
   ===================================================== */
.bloques-insertar {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    padding: 8px 12px; background: var(--superficie-alt);
    border: 1px solid var(--borde); border-top: none; border-bottom: none;
}
.bloques-insertar__label { font-size: var(--tam-xs); color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.chip-insert {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border: 1px solid var(--borde); background: white;
    border-radius: var(--radio-full); font-size: 11px; font-weight: 600;
    color: var(--anzorc-verde-oscuro); cursor: pointer; transition: all .15s;
}
.chip-insert:hover { background: var(--anzorc-verde); color: white; border-color: var(--anzorc-verde); }
.chip-insert i { font-size: 11px; }

/* Overlay de controles sobre cada bloque enriquecido (sólo dentro del editor Quill) */
.ql-editor [data-bloq] {
    position: relative !important;
    outline: 2px dashed transparent; outline-offset: 4px;
    transition: outline-color .15s;
    display: block !important;
    min-height: 60px;
    box-sizing: border-box;
}
.ql-editor [data-bloq]:hover { outline-color: rgba(0,128,55,.35); }

/* Refuerzo específico para que el CTA se vea DENTRO del editor con su fondo verde
   (Quill a veces recorta o pinta el fondo blanco por encima) */
.ql-editor [data-bloq="cta"] {
    background:
        radial-gradient(at 20% 20%, #008037 0, transparent 55%),
        linear-gradient(135deg, #003d16 0%, #00551f 60%, #006d29 100%) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 56px 40px !important;
    min-height: 200px;
    text-align: center;
    overflow: visible !important;   /* dentro del editor no recortamos, para que se vea el hover */
}
.ql-editor [data-bloq="cta"] h3 { color: white !important; }
.ql-editor [data-bloq="cta"] p  { color: rgba(255,255,255,.9) !important; }
.ql-editor [data-bloq="cta"] a  { color: #00551f !important; background: #edce1b !important; }

/* Aseguramos que los otros bloques también rendericen bien dentro del editor */
.ql-editor [data-bloq="destacado"] {
    background: linear-gradient(135deg, #fffbe7, #fefaf0) !important;
    border: 1px solid rgba(237,206,27,.4) !important;
    border-radius: 16px !important;
    padding: 32px 32px 32px 84px !important;
    color: #00551f !important;
}
.ql-editor [data-bloq="descarga"] { padding: 0 !important; background: transparent !important; }
.ql-editor [data-bloq="galeria"]  { padding: 0 !important; background: transparent !important; }
.ql-editor [data-bloq="columnas"] { padding: 0 !important; background: transparent !important; }
.ql-editor [data-bloq] .bloq-ctrl {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    display: none; gap: 6px;
    background: white; padding: 4px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    border: 1px solid #e5e7eb;
}
.ql-editor [data-bloq]:hover .bloq-ctrl { display: flex; }
.ql-editor [data-bloq] .bloq-ctrl button {
    width: 32px; height: 32px; border: 0; border-radius: 6px;
    background: transparent; color: var(--anzorc-verde-oscuro);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ql-editor [data-bloq] .bloq-ctrl button:hover { background: var(--anzorc-verde); color: white; }
.ql-editor [data-bloq] .bloq-ctrl button[data-act="del"]:hover { background: #dc2626; color: white; }
.ql-editor [data-bloq] .bloq-ctrl button i { font-size: 14px; }

/* ============================================================
   BREADCRUMB del portal (formatos, contratos, firmas, nube)
   ============================================================ */
.portal-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    font-size: 15px; font-weight: 600;
    color: var(--anzorc-verde-oscuro);
    margin: 0 0 4px;
}
.portal-breadcrumb a {
    color: var(--texto-suave);
    text-decoration: none;
    transition: color .15s;
}
.portal-breadcrumb a:hover { color: var(--anzorc-verde); }
.portal-breadcrumb i.bi-chevron-right {
    color: var(--texto-suave);
    font-size: .7em;
}
.portal-breadcrumb i.bi-cloud-fill,
.portal-breadcrumb i.bi-folder2-open,
.portal-breadcrumb i.bi-briefcase-fill,
.portal-breadcrumb i.bi-pen-fill {
    color: var(--anzorc-verde);
    margin-right: 4px;
}
.portal-breadcrumb span:last-child {
    color: var(--anzorc-verde-oscuro);
}

/* ============================================================
   UPPERCASE global para textos de nombres en Nube, Formatos,
   Contratos y Firmas — visualización consistente en mayúscula
   ============================================================ */
.portal-mod-nube .nube-carp__body strong,
.portal-mod-nube .fmt-item__body strong,
.portal-mod-nube .arch-vers__ver,
.portal-mod-nube .portal-breadcrumb a,
.portal-mod-nube .portal-breadcrumb span,
.portal-mod-nube .det__vers-item strong,
.portal-mod-nube .det__obs-head strong,
.portal-mod-nube .drawer__title,
.portal-mod-nube .tabla td strong,
.portal-mod-nube .fmt-item__cod {
    text-transform: uppercase;
}

.portal-mod-formatos .fmt-area-card__name,
.portal-mod-formatos .fmt-area-card__cod,
.portal-mod-formatos .fmt-proc__name,
.portal-mod-formatos .fmt-proc__cod,
.portal-mod-formatos .fmt-item__body strong,
.portal-mod-formatos .fmt-item__cod,
.portal-mod-formatos .portal-breadcrumb a,
.portal-mod-formatos .portal-breadcrumb span,
.portal-mod-formatos .drawer__title {
    text-transform: uppercase;
}

.portal-mod-contratos .portal-breadcrumb a,
.portal-mod-contratos .portal-breadcrumb span,
.portal-mod-contratos .drawer__title,
.portal-mod-contratos .tabla td strong {
    text-transform: uppercase;
}

.portal-mod-firmas .portal-breadcrumb a,
.portal-mod-firmas .portal-breadcrumb span,
.portal-mod-firmas .drawer__title,
.portal-mod-firmas .tabla td strong {
    text-transform: uppercase;
}

/* ============================================================
   CARDS UNIFICADAS entre módulos (Nube, Formatos, Contratos, Firmas)
   Sobrescribe estilos inline de módulos legacy
   ============================================================ */

/* Áreas de formatos: igualar al card de nube */
.fmt-area-card {
    background: white; border: 1px solid var(--borde);
    border-top: 4px solid var(--fc);
    border-radius: var(--radio-md);
    display: flex; flex-direction: column;
    transition: box-shadow .15s;
    overflow: hidden;
}
.fmt-area-card:hover { box-shadow: 0 8px 20px -12px rgba(0,0,0,.15); transform: none; }
.fmt-area-card__main { padding: var(--e3); grid-template-columns: 40px 1fr auto; gap: var(--e3); align-items: center; }
.fmt-area-card__icon { width: 40px !important; height: 40px !important; border-radius: 8px !important; font-size: 20px !important; }
.fmt-area-card__cod { font-size: 10px !important; letter-spacing: .05em; margin-bottom: 2px; }
.fmt-area-card__name { font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 !important; }
.fmt-area-card__desc { font-size: 11px !important; color: var(--texto-suave); -webkit-line-clamp: 2 !important; }
.fmt-area-card__stats { text-align: right; }
.fmt-area-card__stats div { line-height: 1.15; }
.fmt-area-card__stats strong { font-family: inherit !important; font-size: 1.1rem !important; }
.fmt-area-card__stats span { font-size: 10px !important; }
.fmt-area-card__acc { padding: 3px var(--e3) !important; }

/* Procedimientos: igualar al card de nube */
.fmt-proc {
    display: flex; background: white;
    border: 1px solid var(--borde); border-left: 4px solid var(--anzorc-verde);
    border-radius: var(--radio-md);
    align-items: center;
    transition: box-shadow .15s;
}
.fmt-proc:hover { box-shadow: 0 8px 20px -12px rgba(0,0,0,.15); }
.fmt-proc__main { padding: var(--e3) !important; grid-template-columns: 40px 1fr auto !important; gap: var(--e3) !important; }
.fmt-proc__icon { width: 40px !important; height: 40px !important; font-size: 18px !important; border-radius: 8px !important; }
.fmt-proc__cod { font-size: 10px !important; margin-bottom: 2px; }
.fmt-proc__name { font-size: 13px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.3 !important; }
.fmt-proc__desc { font-size: 11px !important; }
.fmt-proc__count { padding-right: var(--e2); }
.fmt-proc__count strong { font-family: inherit !important; font-size: 1.1rem !important; }
.fmt-proc__count span { font-size: 10px !important; }
.fmt-proc__acc { padding-right: var(--e3) !important; }

/* Items de archivos: igualar (aplica a Nube y Formatos) */
.fmt-item {
    display: flex; align-items: center; gap: var(--e3);
    background: white; padding: 10px 14px !important;
    border: 1px solid var(--borde); border-radius: var(--radio-sm) !important;
    transition: box-shadow .15s;
}
.fmt-item:hover { box-shadow: 0 8px 20px -12px rgba(0,0,0,.15); }
.fmt-item__icon { width: 36px !important; height: 36px !important; font-size: 18px !important; border-radius: 8px !important; }
.fmt-item__head strong { font-size: 13px !important; }
.fmt-item__meta { font-size: 11px !important; }
.fmt-item__cod { font-size: 10px !important; padding: 2px 6px !important; }
.fmt-item__ver { font-size: 10px !important; padding: 1px 6px !important; }

/* Botón acciones + menú (Nube menú aplica también a formatos si se replica) */
.nube-menu-toggle,
.fmt-menu-toggle { background: transparent; border: 1px solid var(--borde); }
.nube-menu-toggle i,
.fmt-menu-toggle i { color: var(--anzorc-verde); font-size: 18px; }

/* Encabezados de sección dentro de carpeta/área/procedimiento */
.portal-mod-nube h3,
.portal-mod-formatos h3 {
    color: var(--anzorc-verde-oscuro);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: var(--e5);
    margin-bottom: var(--e3);
}

/* Tooltip flotante para descripciones truncadas de procedimientos/áreas */
.fmt-proc__desc,
.fmt-area-card__desc {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: help;
}
.fmt-proc__desc:hover::after,
.fmt-area-card__desc:hover::after {
    content: attr(title);
    position: absolute;
    left: 0; bottom: calc(100% + 6px);
    max-width: 380px; min-width: 240px;
    padding: 10px 12px;
    background: var(--anzorc-verde-oscuro);
    color: white;
    font-size: 12px; font-weight: 400;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 12px 24px -6px rgba(0,0,0,.3);
    z-index: 100;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    pointer-events: none;
    animation: tipFade .18s ease both;
}
.fmt-proc__desc:hover::before,
.fmt-area-card__desc:hover::before {
    content: '';
    position: absolute;
    left: 20px; bottom: calc(100% + 2px);
    border: 5px solid transparent;
    border-top-color: var(--anzorc-verde-oscuro);
    z-index: 101;
}
@keyframes tipFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   ZRC form — secciones con fondo intercalado
   ================================================================ */
.drawer__body .zrc-sec {
    padding: 14px 16px 6px;
    margin: 10px 0;
    border-radius: var(--radio-md);
    background: rgba(0,128,55,.025);
    border: 1px solid rgba(0,128,55,.08);
}
.drawer__body .zrc-sec--alt {
    background: rgba(237,206,27,.06);
    border-color: rgba(237,206,27,.18);
}
.drawer__body .zrc-sec__head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--anzorc-verde-oscuro);
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
.drawer__body .zrc-sec--alt .zrc-sec__head { color: #92700a; }
.drawer__body .zrc-sec > .pqr-datos { background: transparent; border: 0; padding: 0; margin: 0; }
.drawer__body .zrc-sec > .pqr-datos > legend { display: none; }

/* Documentos compactos en grid */
.zrc-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin: 0;
}
.zrc-doc-mini {
    display: flex; align-items: stretch;
    background: white;
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.zrc-doc-mini:hover { border-color: var(--anzorc-verde); box-shadow: 0 2px 8px rgba(0,128,55,.08); }
.zrc-doc-mini__link {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--texto);
}
.zrc-doc-mini__link > i {
    font-size: 22px;
    color: #b91c1c;
    flex-shrink: 0;
}
.zrc-doc-mini__body { min-width: 0; flex: 1; }
.zrc-doc-mini__body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--texto);
}
.zrc-doc-mini__tags {
    display: flex; gap: 4px; margin-top: 3px;
    flex-wrap: wrap;
}
.zrc-doc-mini__tags .tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0,128,55,.1);
    color: var(--anzorc-verde-oscuro);
    font-weight: 500;
}
.zrc-doc-mini__tags .tag--muted {
    background: rgba(0,0,0,.05);
    color: var(--texto-suave);
    font-family: var(--fuente-mono);
}
.zrc-doc-mini__del {
    display: flex; align-items: center; justify-content: center;
    width: 32px;
    border-left: 1px solid var(--borde);
    color: var(--texto-suave);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.zrc-doc-mini__del:hover { background: #fef2f2; color: #b91c1c; }
.zrc-docs-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--e6);
    color: var(--texto-suave);
}
.zrc-docs-empty i { font-size: 1.5rem; opacity: .5; }
.zrc-docs-empty p { margin: var(--e2) 0 0; font-size: 12px; }

/* Quill mini toolbar dentro del drawer */
.drawer__body .quill-toolbar-mini {
    background: white;
    border: 1px solid var(--borde);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 4px 6px;
}
.drawer__body .quill-editor {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 0 0 8px 8px;
    font-size: 13.5px;
    line-height: 1.55;
}
.drawer__body .quill-editor .ql-editor { padding: 10px 14px; min-height: 180px; }

/* Multi-org: lista de organizaciones impulsoras */
.orgs-list { display: flex; flex-direction: column; gap: 10px; }
.org-card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    overflow: hidden;
    transition: box-shadow .15s;
}
.org-card:hover { box-shadow: 0 4px 12px rgba(0,128,55,.06); }
.org-card__head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: rgba(0,128,55,.04);
    border-bottom: 1px solid var(--borde);
}
.org-card__toggle {
    width: 28px; height: 28px;
    background: transparent; border: 0;
    display: grid; place-items: center;
    border-radius: 6px;
    color: var(--anzorc-verde-oscuro);
    cursor: pointer;
    transition: background .15s, transform .2s;
}
.org-card__toggle:hover { background: rgba(0,128,55,.1); }
.org-card.is-collapsed .org-card__toggle { transform: rotate(-90deg); }
.org-card__title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--anzorc-verde-oscuro);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-card__actions { display: flex; gap: 2px; }
.org-card__body { padding: 12px 14px; }
.org-card.is-collapsed .org-card__body { display: none; }
.org-card.is-collapsed .org-card__head { border-bottom: 0; }