/* ===== modal.css ===== */
/* =========================================
   MODAL.CSS
   Sistema base para modales y formularios dentro de modales.
   ========================================= */

.modal-backdrop,
.ui-modal-backdrop{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:22px;
    background:rgba(2,6,14,.82);
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--transition), visibility var(--transition);
    z-index:140;
}

/* ui-modal-backdrop debe comportarse como overlay real.
   No debe ocupar espacio dentro del flujo del page. */
.ui-modal-backdrop{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:22px;
    min-height:100dvh;
    border-radius:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(2,6,14,.82);
    backdrop-filter:blur(8px);
    z-index:9999;
}

html.modal-is-open,
html.modal-is-open body{
    overflow:hidden;
}

.modal-backdrop.is-open,
.ui-modal-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-card,
.ui-modal{
    width:min(100%, 560px);
    max-height:min(92vh, 920px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    border:1px solid rgba(91,170,224,.35);
    background:linear-gradient(180deg, #15223d, #0d182d 70%);
    box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.modal-card--sm,
.ui-modal.is-sm{ width:min(100%, 620px); }
.modal-card--md,
.ui-modal.is-md{ width:min(100%, 760px); }
.modal-card--lg,
.ui-modal.is-lg{ width:min(100%, 940px); }
.modal-card--xl,
.ui-modal.is-wide,
.ui-modal.is-xl{ width:min(100%, 1120px); }

.modal-head,
.ui-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:18px 22px;
    border-bottom:1px solid rgba(148,163,184,.18);
    background:rgba(255,255,255,.025);
}

.modal-head h3,
.ui-modal-title{
    margin:0;
    color:#fff;
    font-size:22px;
    line-height:1.12;
    letter-spacing:-.03em;
}

.modal-head p,
.ui-modal-subtitle{
    margin:4px 0 0;
    color:var(--text-soft);
    font-size:13px;
    line-height:1.35;
}

.modal-body,
.ui-modal-body{
    padding:22px;
    overflow:auto;
    color:var(--text-soft);
    line-height:1.55;
}

.modal-actions,
.modal-footer,
.ui-modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    padding:0 22px 22px;
}

.modal-close,
.ui-modal-close{
    min-height:38px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid var(--ui-line, var(--stroke));
    background:rgba(255,255,255,.08);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.modal-close:hover,
.ui-modal-close:hover{
    background:rgba(255,255,255,.13);
}

/* Grid y campos estandarizados dentro de modal */
.modal-grid,
.ui-modal-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:14px;
}

.modal-grid > *,
.ui-modal-grid > *{ grid-column:span 4; }
.modal-grid .span-3,
.ui-modal-grid .span-3{ grid-column:span 3; }
.modal-grid .span-4,
.ui-modal-grid .span-4{ grid-column:span 4; }
.modal-grid .span-6,
.ui-modal-grid .span-6{ grid-column:span 6; }
.modal-grid .span-8,
.ui-modal-grid .span-8{ grid-column:span 8; }
.modal-grid .span-12,
.ui-modal-grid .span-12{ grid-column:1 / -1; }

.modal-field,
.ui-modal-field,
.ui-modal .field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    margin:0;
}

.modal-field label,
.ui-modal-field label,
.ui-modal .field label,
.ui-modal-label{
    margin:0;
    color:var(--text-soft);
    font-size:12px;
    font-weight:900;
    line-height:1.2;
}

.ui-modal input,
.ui-modal select,
.ui-modal textarea,
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-field input,
.modal-field select,
.modal-field textarea,
.ui-modal-field input,
.ui-modal-field select,
.ui-modal-field textarea{
    width:100%;
    min-height:40px;
    padding:10px 13px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.20);
    background:rgba(10,18,36,.66);
    color:var(--text);
    font-size:14px;
    line-height:1.35;
    outline:none;
}

.ui-modal textarea,
.modal-card textarea,
.modal-field textarea,
.ui-modal-field textarea{
    min-height:112px;
    padding-top:11px;
    resize:vertical;
}

.ui-modal input:focus,
.ui-modal select:focus,
.ui-modal textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus{
    border-color:rgba(91,170,224,.65);
    box-shadow:0 0 0 3px rgba(91,170,224,.13);
    background:rgba(10,18,36,.82);
}

.ui-modal input::placeholder,
.ui-modal textarea::placeholder,
.modal-card input::placeholder,
.modal-card textarea::placeholder{
    color:rgba(191,203,222,.62);
}

/* Radios y listas dentro de modal */
.ui-radio-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
}

.ui-radio-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:22px;
    color:var(--text-soft);
    font-weight:800;
    line-height:1.25;
}

.ui-radio-dot{
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:50%;
    border:1px solid rgba(148,163,184,.42);
    background:radial-gradient(circle at center, var(--ui-cyan) 0 35%, transparent 38%), rgba(255,255,255,.08);
    box-shadow:0 0 0 4px rgba(91,170,224,.08);
}

/* Filas de miembros / relaciones */
.ui-member-row{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(280px,430px) auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:16px;
    background:rgba(255,255,255,.045);
}

.ui-relation-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(72px,1fr));
    gap:7px;
}

.ui-relation{
    min-height:30px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(255,255,255,.05);
    color:var(--text-soft);
    font-size:11px;
    font-weight:950;
}

.ui-relation.is-active{
    color:#fff;
    border-color:var(--ui-cyan);
    background:rgba(91,170,224,.12);
}

/* Modo claro */
body.light .modal-backdrop,
body.light .ui-modal-backdrop{
    background:rgba(226,238,247,.72);
}

body.light .modal-card,
body.light .ui-modal{
    background:linear-gradient(180deg, #ffffff, #eef7fc 75%);
    border-color:rgba(13,30,48,.14);
    box-shadow:0 24px 56px rgba(13,30,48,.14);
}

body.light .modal-head,
body.light .ui-modal-head{
    background:rgba(13,30,48,.035);
    border-bottom-color:rgba(13,30,48,.10);
}

body.light .modal-head h3,
body.light .ui-modal-title{ color:var(--text); }

body.light .modal-close,
body.light .ui-modal-close{
    background:#e8f1f8;
    border-color:rgba(13,30,48,.12);
    color:var(--text);
}

body.light .ui-modal input,
body.light .ui-modal select,
body.light .ui-modal textarea,
body.light .modal-card input,
body.light .modal-card select,
body.light .modal-card textarea{
    background:#f7fbfe;
    border-color:rgba(13,30,48,.13);
    color:var(--text);
}

body.light .ui-modal input:focus,
body.light .ui-modal select:focus,
body.light .ui-modal textarea:focus,
body.light .modal-card input:focus,
body.light .modal-card select:focus,
body.light .modal-card textarea:focus{
    background:#fff;
    border-color:rgba(91,170,224,.62);
    box-shadow:0 0 0 3px rgba(91,170,224,.14);
}

body.light .ui-radio-item{ color:var(--text-soft); }
body.light .ui-member-row{ background:#f7fbfe; border-color:rgba(13,30,48,.10); }
body.light .ui-relation{ background:#eef5fb; border-color:rgba(13,30,48,.12); }

@media (max-width: 900px){
    .modal-grid > *,
    .ui-modal-grid > *,
    .modal-grid .span-3,
    .ui-modal-grid .span-3,
    .modal-grid .span-4,
    .ui-modal-grid .span-4,
    .modal-grid .span-6,
    .ui-modal-grid .span-6,
    .modal-grid .span-8,
    .ui-modal-grid .span-8{
        grid-column:span 6;
    }

    .ui-member-row{
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px){
    .modal-backdrop,
    .ui-modal-backdrop{
        padding:12px;
        align-items:start;
    }

    .modal-card,
    .ui-modal{
        max-height:calc(100vh - 24px);
        border-radius:18px;
    }

    .modal-head,
    .ui-modal-head,
    .modal-body,
    .ui-modal-body{
        padding-left:16px;
        padding-right:16px;
    }

    .modal-actions,
    .modal-footer,
    .ui-modal-footer{
        padding:0 16px 16px;
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .modal-actions .btn,
    .modal-footer .btn,
    .ui-modal-footer .btn{
        width:100%;
    }

    .modal-grid > *,
    .ui-modal-grid > *,
    .modal-grid .span-3,
    .ui-modal-grid .span-3,
    .modal-grid .span-4,
    .ui-modal-grid .span-4,
    .modal-grid .span-6,
    .ui-modal-grid .span-6,
    .modal-grid .span-8,
    .ui-modal-grid .span-8{
        grid-column:1 / -1;
    }

    .ui-relation-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Ajuste: modales flexibles, labels con aire y contenidos sin corte
   ========================================================= */
.modal-card,
.ui-modal{
    width:min(calc(100vw - 44px), 640px);
    max-height:calc(100dvh - 44px);
}

.modal-card--sm,
.ui-modal.is-sm{ width:min(calc(100vw - 44px), 640px); }
.modal-card--md,
.ui-modal.is-md{ width:min(calc(100vw - 44px), 820px); }
.modal-card--lg,
.ui-modal.is-lg{ width:min(calc(100vw - 44px), 1020px); }
.modal-card--xl,
.ui-modal.is-wide,
.ui-modal.is-xl{ width:min(calc(100vw - 44px), 1180px); }

.ui-modal:has(.ui-member-row),
.modal-card:has(.ui-member-row){
    width:min(calc(100vw - 44px), 980px);
}

.modal-body,
.ui-modal-body{
    overflow:auto;
    overscroll-behavior:contain;
}

.ui-modal-body:has(.ui-member-row),
.modal-body:has(.ui-member-row){
    overflow-x:auto;
}

.ui-modal-field,
.ui-modal .field,
.ui-modal .ui-field,
.modal-field{
    gap:8px;
}

.ui-modal label,
.modal-card label,
.ui-modal-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-right:10px;
}

.ui-modal .ui-switch,
.modal-card .ui-switch{
    flex-shrink:0;
}

.ui-modal .ui-field:has(> label + .ui-switch),
.ui-modal-field:has(> label + .ui-switch),
.modal-field:has(> label + .ui-switch){
    gap:8px;
}

.ui-member-row{
    grid-template-columns:minmax(210px,1fr) minmax(340px,480px) auto;
}

@media (max-width: 760px){
    .modal-card,
    .ui-modal,
    .modal-card--sm,
    .ui-modal.is-sm,
    .modal-card--md,
    .ui-modal.is-md,
    .modal-card--lg,
    .ui-modal.is-lg,
    .modal-card--xl,
    .ui-modal.is-wide,
    .ui-modal.is-xl,
    .ui-modal:has(.ui-member-row),
    .modal-card:has(.ui-member-row){
        width:min(calc(100vw - 24px), 100%);
        max-height:calc(100dvh - 24px);
    }

    .ui-member-row{
        min-width:0;
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Modal: labels con aire y tamaño flexible
   ========================================================= */
.ui-modal,
.modal-card{
    width:min(calc(100vw - 40px), var(--ui-modal-max, 760px));
    max-width:calc(100vw - 40px);
    max-height:calc(100dvh - 40px);
}

.ui-modal.is-wide,
.ui-modal.is-xl,
.modal-card--xl{
    --ui-modal-max:1180px;
}

.ui-modal.is-lg,
.modal-card--lg{
    --ui-modal-max:1020px;
}

.ui-modal.is-md,
.modal-card--md{
    --ui-modal-max:860px;
}

.ui-modal-head,
.modal-head,
.ui-modal-body,
.modal-body,
.ui-modal-footer,
.modal-footer{
    flex-shrink:0;
}

.ui-modal-body,
.modal-body{
    min-height:0;
    overflow:auto;
}

.ui-modal .ui-field:has(> label + .ui-switch),
.ui-modal-field:has(> label + .ui-switch),
.modal-field:has(> label + .ui-switch){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.ui-modal label,
.modal-card label,
.ui-modal-label{
    padding-right:10px;
    margin-right:0;
    white-space:normal;
}

.ui-modal .ui-switch,
.modal-card .ui-switch{
    max-width:100%;
    overflow:auto;
}

@media (max-width: 760px){
    .ui-modal,
    .modal-card,
    .ui-modal.is-wide,
    .ui-modal.is-xl,
    .ui-modal.is-lg,
    .ui-modal.is-md,
    .modal-card--xl,
    .modal-card--lg,
    .modal-card--md{
        width:min(calc(100vw - 24px), 100%);
        max-width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
    }
}