/* =============================================================================
   edit-modal.css — Estilos del modal de edición v3 (rediseñado)
   Clases .em-* — no colisionan con .ma-* existentes
   ============================================================================= */

/* ── OVERLAY + SHELL ─────────────────────────────────────────────────────────── */
.em-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

.em-shell {
    --em-space-1: 4px;
    --em-space-2: 8px;
    --em-space-3: 12px;
    --em-space-4: 16px;
    background: var(--lf-card-dark, #0d1f2d);
    border: 1px solid var(--lf-border-dark);
    border-radius: var(--lf-radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 780px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── CABECERA ────────────────────────────────────────────────────────────────── */
.em-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-space-3);
    padding: var(--em-space-4) var(--em-space-4) var(--em-space-3);
    border-bottom: 1px solid var(--lf-border-dark);
    flex-shrink: 0;
}

.em-shell__header-left {
    display: flex;
    align-items: center;
    gap: var(--em-space-2);
    min-width: 0;
}

.em-shell__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lf-fg);
    white-space: nowrap;
}

.em-shell__header-right {
    display: flex;
    align-items: center;
    gap: var(--em-space-1);
    flex-shrink: 0;
}

.em-btn-cerrar {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lf-radius-sm);
    border: 1px solid var(--lf-border-dark);
    background: transparent;
    color: var(--lf-fg-3);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background var(--lf-transition), color var(--lf-transition);
    margin-left: var(--em-space-1);
}
.em-btn-cerrar:hover { background: rgba(244,67,54,0.12); color: var(--lf-danger); }

/* Status badges */
.em-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--em-space-2);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 999px;
    text-transform: uppercase;
}
.em-status-badge--cleared {
    background: rgba(255, 128, 0, 0.16);
    border: 1px solid rgba(255, 128, 0, 0.4);
    color: var(--lf-papaya, #ff8000);
}
.em-status-badge--uncleared {
    background: rgba(var(--lf-accent-cyan-rgb, 45, 226, 230), 0.14);
    border: 1px solid rgba(var(--lf-accent-cyan-rgb, 45, 226, 230), 0.35);
    color: var(--lf-accent-cyan, #2de2e6);
}

/* ── CUERPO SCROLLABLE ───────────────────────────────────────────────────────── */
.em-shell__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--em-space-4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.em-shell .ma-campo {
    gap: 6px;
}

/* ── SPINNER ─────────────────────────────────────────────────────────────────── */
.em-cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    color: var(--lf-fg-2);
    font-size: 0.875rem;
}

/* ── BANNERS ─────────────────────────────────────────────────────────────────── */
.em-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--em-space-2);
    padding: var(--em-space-2) var(--em-space-3);
    border-radius: var(--lf-radius-md);
    font-size: 0.8125rem;
}
.em-banner--danger {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.35);
    color: var(--lf-danger);
}
.em-banner--warning {
    background: rgba(255, 128, 0, 0.1);
    border: 1px solid rgba(255, 128, 0, 0.35);
    color: var(--lf-papaya, #ff8000);
}
.em-banner__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.em-banner__content { flex: 1; }
.em-banner strong { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.em-banner p { opacity: 0.85; line-height: 1.4; margin: 0; }

.em-btn-desbloquear {
    margin-top: var(--em-space-2);
    padding: 4px var(--em-space-2);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--lf-radius-sm);
    border: none;
    background: var(--lf-papaya, #ff8000);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--lf-transition);
}
.em-btn-desbloquear:hover { opacity: 0.85; }
.em-btn-desbloquear:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── BLOQUES ─────────────────────────────────────────────────────────────────── */
.em-bloque {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding: var(--em-space-3) 0;
    background: transparent;
}
.em-shell__body .em-bloque:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.em-bloque__titulo {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lf-fg-3);
    margin-bottom: var(--em-space-2);
}

/* Colapsable */
.em-bloque--colapsable { padding: 0; }
.em-bloque__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--em-space-3) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.em-bloque__toggle:hover { background: rgba(255,255,255,0.03); border-radius: var(--lf-radius-md); }
.em-bloque--colapsable > [x-show] { padding: var(--em-space-2) 0 var(--em-space-3); }

.em-bloque__chevron {
    font-size: 1.1rem;
    color: var(--lf-fg-3);
    transition: transform 0.2s;
    display: inline-block;
}
.em-bloque__chevron--open { transform: rotate(90deg); }

/* ── FILA MOVIMIENTO (tipo + fecha + monto) ──────────────────────────────────── */
.em-movimiento-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--em-space-3) var(--em-space-4);
    align-items: start;
}
.em-cuenta-inline {
    margin-top: var(--em-space-2);
}

@media (max-width: 560px) {
    .em-movimiento-row { grid-template-columns: 1fr 1fr; }
    .em-campo-monto { grid-column: 1 / -1; }
    .em-cuenta-inline { margin-top: var(--em-space-3); }
}

/* Colores semánticos en el select de tipo */
.em-select--egreso  { color: var(--lf-danger,  #f44336); }
.em-select--ingreso { color: var(--lf-success, #4caf50); }
.em-select--transfer { color: var(--lf-accent-cyan, #00bcd4); }

/* Input de monto más destacado */
.em-input-monto {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* ── GRID 2 COLUMNAS ─────────────────────────────────────────────────────────── */
.em-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--em-space-3) var(--em-space-4);
}
@media (max-width: 560px) { .em-grid { grid-template-columns: 1fr; } }

/* ── TRANSFERENCIA FROM → TO ─────────────────────────────────────────────────── */
.em-transfer-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: var(--em-space-2);
}

/* Bulk modal */
.em-shell--bulk {
    max-width: 860px;
}

.em-checkline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lf-fg-2);
    font-size: 0.85rem;
}

.em-checkline input[type="checkbox"] {
    width: 15px;
    height: 15px;
}
@media (max-width: 760px) {
    .em-transfer-row {
        grid-template-columns: 1fr;
    }
    .em-swap-btn {
        justify-self: center;
    }
}
.em-transfer-col { min-width: 0; }
.em-transfer-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lf-fg-3);
    margin-bottom: 6px;
}
.em-transfer-select {
    min-width: 0;
}
.em-account-select select,
.em-transfer-select select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: rgba(10,25,41,.72);
    border-color: rgba(255,255,255,0.12);
    color: var(--lf-fg, #f2f2f2);
    font-weight: 600;
}
.em-account-select select:focus,
.em-transfer-select select:focus {
    outline: none;
    border-color: rgba(var(--lf-accent-cyan-rgb, 45, 226, 230), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--lf-accent-cyan-rgb, 45, 226, 230), 0.22);
}
.em-account-select select optgroup,
.em-transfer-select select optgroup {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--lf-accent-cyan, #2de2e6);
    background: #0a1929;
}
.em-account-select select option,
.em-transfer-select select option {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--lf-fg, #f2f2f2);
    background: #0a1929;
}
.em-swap-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid var(--lf-border-dark);
    border-radius: var(--lf-radius-sm);
    color: var(--lf-fg-2);
    cursor: pointer;
    transition: color var(--lf-transition), background var(--lf-transition);
    margin-bottom: 1px;
}
.em-swap-btn:hover { color: var(--lf-accent-cyan); background: rgba(0,188,212,0.08); }
.em-swap-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── SECCIÓN CONVERSIÓN ──────────────────────────────────────────────────────── */
.em-seccion-cambio {
    padding: var(--em-space-3);
    border-radius: var(--lf-radius-md);
    border: 1px solid rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.3);
    background: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.05);
    margin-bottom: 0;
}
.em-seccion-cambio__titulo {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lf-accent-cyan);
    margin-bottom: 0.625rem;
}

/* ── TAGS ────────────────────────────────────────────────────────────────────── */
.em-tags-wrap { position: relative; }
.em-tags-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--em-space-1);
    align-items: center;
    min-height: 2.25rem;
    padding: var(--em-space-1) var(--em-space-2);
    border-radius: var(--lf-radius-sm);
    border: 1px solid var(--lf-border-dark);
    background: rgba(0, 0, 0, 0.4);
    cursor: text;
}
.em-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: rgba(255,128,0,0.18);
    color: var(--lf-papaya, #ff8000);
    white-space: nowrap;
}
.em-chip button {
    background: none; border: none; padding: 0;
    cursor: pointer; opacity: 0.6; color: inherit;
    line-height: 1; display: flex; align-items: center;
}
.em-chip button:hover { opacity: 1; }
.em-chip button:disabled { opacity: 0.25; cursor: not-allowed; }

.em-tags-input {
    flex: 1; min-width: 120px; border: none;
    background: transparent; color: var(--lf-fg);
    font-size: 0.8125rem; font-family: inherit;
    outline: none; padding: 0.125rem 0.25rem;
}
.em-tags-input:disabled { cursor: not-allowed; opacity: 0.5; }
.em-tags-input::placeholder { color: var(--lf-fg-3); }

.em-tags-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 2px;
    background: var(--lf-card-dark, #12263a);
    border: 1px solid var(--lf-border-dark);
    border-radius: var(--lf-radius-md);
    box-shadow: var(--lf-shadow-lg);
    max-height: 200px; overflow-y: auto; z-index: 300;
}
.em-tags-dropdown__item {
    padding: 0.5rem 0.875rem; font-size: 0.8125rem;
    cursor: pointer; color: var(--lf-fg);
    transition: background var(--lf-transition);
}
.em-tags-dropdown__item:hover,
.em-tags-dropdown__item--activo {
    background: var(--lf-accent-cyan, #00bcd4);
    color: #fff;
}

/* ── FECHA IMPUTACIÓN ────────────────────────────────────────────────────────── */
.em-imputacion-wrap { }
.em-imputacion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-space-3);
    margin-bottom: var(--em-space-1);
}
.em-imputacion {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--em-space-3);
    align-items: end;
}
@media (max-width: 560px) { .em-imputacion { grid-template-columns: 1fr; } }
.em-imputacion__ajustes { display: flex; gap: 0.375rem; margin-bottom: 2px; }
.em-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.em-lock {
    display: inline-flex;
    align-items: center;
    color: var(--lf-fg-3);
    opacity: 0.75;
    margin-left: var(--em-space-1);
}
.em-lock svg {
    width: 10px;
    height: 10px;
}
.em-grid--mb {
    margin-bottom: var(--em-space-3);
}
.em-toggle-title {
    margin: 0;
}
.em-expand-content {
    margin-top: var(--em-space-3);
}
.em-imputacion--top {
    margin-top: var(--em-space-2);
}
.em-hint--mt {
    margin-top: var(--em-space-3);
}
.em-footer-actions {
    display: flex;
    gap: var(--em-space-2);
    align-items: center;
}

.em-badge-diff {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.3);
    background: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.1);
    color: var(--lf-accent-cyan);
    cursor: pointer;
    font-style: normal;
    margin-left: 0.5rem;
    transition: background var(--lf-transition);
}
.em-badge-diff:hover { background: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.2); }

/* ── BOTONES DE UTILIDAD ─────────────────────────────────────────────────────── */
.em-btn-util {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--lf-radius-sm);
    border: 1px solid var(--lf-border-dark);
    background: transparent;
    color: var(--lf-fg-2);
    cursor: pointer;
    transition: background var(--lf-transition), color var(--lf-transition);
    white-space: nowrap;
}
.em-btn-util:hover { background: rgba(255,255,255,0.06); color: var(--lf-fg); }
.em-btn-util:disabled { opacity: 0.45; cursor: not-allowed; }
.em-btn-util--cyan {
    color: var(--lf-accent-cyan);
    border-color: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.3);
    background: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.08);
}
.em-btn-util--cyan:hover { background: rgba(var(--lf-accent-cyan-rgb, 0,188,212), 0.18); }

/* ── BOTONES META (secundarios pequeños) ────────────────────────────────────── */
.em-btn-meta {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--lf-radius-sm);
    border: 1px solid var(--lf-border-dark);
    background: transparent;
    color: var(--lf-fg-2);
    cursor: pointer;
    transition: background var(--lf-transition), color var(--lf-transition);
    white-space: nowrap;
}
.em-btn-meta:hover { background: rgba(255,255,255,0.05); color: var(--lf-fg); }
.em-btn-meta:disabled { opacity: 0.45; cursor: not-allowed; }
.em-btn-meta--danger { color: var(--lf-danger); border-color: rgba(244,67,54,0.3); }
.em-btn-meta--danger:hover { background: rgba(244,67,54,0.1); }

/* ── LABELS Y HINTS ──────────────────────────────────────────────────────────── */
.em-label-meta {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lf-fg-3);
    margin-bottom: 6px;
}
.em-label-sec {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lf-fg-2);
    margin: 0;
}
.em-hint {
    display: block;
    font-size: 0.6875rem;
    color: var(--lf-fg-3);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* ── PIE ─────────────────────────────────────────────────────────────────────── */
.em-shell__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--em-space-2);
    padding: var(--em-space-3) var(--em-space-4);
    border-top: 1px solid var(--lf-border-dark);
    flex-shrink: 0;
}

.em-btn-eliminar {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--lf-radius-md);
    border: none;
    background: var(--lf-danger);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--lf-transition);
}
.em-btn-eliminar:hover { opacity: 0.85; }
.em-btn-eliminar:disabled { opacity: 0.45; cursor: not-allowed; }