/* site-10-summary-cards.css: Summary cards (30-32).
   Part of the old site.css, split by sections (same order: _Styles.cshtml links them one after the other,
   so the cascade is exactly the same). */

/* =====================================================================
   30. SUMMARY CARDS (same look in every panel)
   ---------------------------------------------------------------------
   Las tarjetas del operador, del supervisor y de la Fiscalía se ven
   igual: el estado se lee, no se grita. Sin neón, sin colores por
   estado y con una jerarquía tipográfica pareja.
   ===================================================================== */

/* Un solo color para todos los estados: se anula el sistema de neón */
.complaint-card[class*="complaint-card--"] {
    --neon: 148, 163, 184;
}

.complaint-card {
    box-shadow: none;
}

    .complaint-card:hover {
        border-color: var(--border-light);
    }

/* --- Aviso de estado: una línea sobria arriba de la carátula --- */
.state-note,
.final-review-note {
    align-items: flex-start;
    gap: 8px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    text-shadow: none;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
}

    .state-note i,
    .final-review-note i {
        margin-top: 2px;
        color: var(--muted);
        font-size: 0.8rem;
    }

/* Avance de la directiva, al costado del estado */
.state-note-badge {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 600;
}

    .state-note-badge.is-done {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text-soft);
    }

/* --- Carátula: jerarquía tipográfica pareja --- */
.cover-file-title,
.complaint-card .cover-text-header .cover-file-title {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

    .cover-file-title i {
        color: var(--muted);
    }

.cover-code-badge,
.complaint-card[class*="complaint-card--"] .status-badge,
.status-badge {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    box-shadow: none;
    text-shadow: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cover-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cover-label {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.cover-value {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 550;
    line-height: 1.4;
}

.cover-value-code {
    color: var(--text);
    font-weight: 600;
}

/* Violeta y brillo fuera: el "listo para definitivo" se lee como el resto */
.badge-final {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    border: 1px solid var(--border-light);
    box-shadow: none;
    text-shadow: none;
    font-size: 0.7rem;
    font-weight: 600;
}

/* --- Acciones: todas iguales, sin neón --- */
.complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    background: var(--panel-2);
    color: var(--text-soft);
    border: 1px solid var(--border-light);
    box-shadow: none;
    text-shadow: none;
    font-size: 0.8rem;
    font-weight: 600;
}

    .complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):hover,
    .complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):focus-visible {
        background: var(--panel-3);
        color: var(--text);
        border-color: #64748b;
        box-shadow: none;
        transform: none;
    }

    .complaint-actions .btn i {
        color: var(--muted);
    }

    .complaint-actions .btn:hover i {
        color: var(--text-soft);
    }

/* El enlace del pie, en el mismo tono que el resto */
.complaint-view-link:hover {
    color: var(--text);
}


/* ---------------------------------------------------------------------
   Acentos de la tarjeta. Sobre la base gris, tres tonos apagados que
   identifican de un vistazo qué es cada cosa, sin brillos ni saturación:
     · ámbar  -> hay directiva pendiente
     · verde  -> número de sumario
     · azul   -> carátula (de qué se trata)
     · lila   -> acciones del pie
   --------------------------------------------------------------------- */

/* Directiva: el único aviso que pide atención */
.complaint-card--directives .state-note {
    background: rgba(224, 168, 99, 0.09);
    border-color: rgba(224, 168, 99, 0.3);
    color: #dfa863;
}

    .complaint-card--directives .state-note i {
        color: #dfa863;
    }

.complaint-card--directives .state-note-badge {
    background: rgba(224, 168, 99, 0.16);
    color: #e5bb85;
}

    .complaint-card--directives .state-note-badge.is-done {
        background: rgba(224, 168, 99, 0.16);
        color: #e5bb85;
    }

/* Número de sumario */
.cover-code-badge,
.cover-value-code {
    background: rgba(124, 207, 174, 0.10);
    color: #7ccfae;
    border-color: rgba(124, 207, 174, 0.28);
}

.cover-value-code {
    padding: 0;
    background: none;
    border: 0;
}

/* Carátula: de qué se trata el sumario */
.cover-file-title,
.complaint-card .cover-text-header .cover-file-title {
    color: #8fb3e0;
}

    .cover-file-title i {
        color: rgba(143, 179, 224, 0.75);
    }

/* --- Acciones del pie: cada una con su tono, todos apagados ---
   El color sale de una sola variable por botón: fondo al 8 %, borde al 30 %
   y el texto en la versión suave del tono. */
.complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    --tone: 148, 163, 184;
    --tone-text: #cbd5e1;
    background: rgba(var(--tone), 0.08);
    color: var(--tone-text);
    border-color: rgba(var(--tone), 0.3);
}

    /* Control / consulta: celeste */
    .complaint-actions .btn.btn-primary-modern {
        --tone: 127, 195, 232;
        --tone-text: #8fc9ec;
    }

    /* Definitivo: verde */
    .complaint-actions .btn.btn-success-modern {
        --tone: 124, 207, 174;
        --tone-text: #85d3b4;
    }

    /* Archivar: naranja */
    .complaint-actions .btn.btn-secondary-modern {
        --tone: 224, 163, 124;
        --tone-text: #e0a37c;
    }

    /* Devolver con directiva: ámbar, el mismo tono del aviso */
    .complaint-actions .btn.btn-warning {
        --tone: 224, 168, 99;
        --tone-text: #dfa863;
    }

    /* Cancelar el envío: rojo apagado */
    .complaint-actions .btn.btn-danger-modern {
        --tone: 224, 130, 145;
        --tone-text: #e08291;
    }

    .complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):hover,
    .complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):focus-visible {
        background: rgba(var(--tone), 0.16);
        border-color: rgba(var(--tone), 0.55);
        color: var(--tone-text);
        filter: brightness(1.08);
    }

    .complaint-actions .btn i,
    .complaint-actions .btn:hover i {
        color: inherit;
    }

/* Los botones se ven siempre iguales, sin importar el texto o el panel */
.complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    min-height: 38px;
    justify-content: center;
}

/* Cuando se reparten el ancho (una fila de tres) el botón achica con la columna:
   si no, el ancho mínimo lo hace desbordar y se montan entre ellos. */
.complaint-actions--fill .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    min-width: 0;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.complaint-actions:not(.complaint-actions--fill) .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    flex: 0 1 auto;
    min-width: 116px;
    padding: 0.45rem 1rem;
    white-space: nowrap;
}

/* La tarjeta entera abre el expediente */
.complaint-card.is-clickable {
    cursor: pointer;
}

    .complaint-card.is-clickable:hover {
        border-color: var(--border-light);
        background: rgba(255, 255, 255, 0.012);
    }

    .complaint-card.is-clickable:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* Con cuatro acciones no entran en una fila: se acomodan de a dos */
.complaint-actions--fill:has(> *:nth-child(4)) {
    flex-wrap: wrap;
}

    .complaint-actions--fill:has(> *:nth-child(4)) > form {
        flex: 1 1 calc(50% - 4px);
    }

/* --- Paneles de directiva (Fiscalía y Supervisor): plegables e iguales entre sí --- */
.directive-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(212, 154, 34, 0.7);
    border-radius: 8px;
}

    .directive-card > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 11px 16px;
        cursor: pointer;
        list-style: none;
    }

        .directive-card > summary::-webkit-details-marker {
            display: none;
        }

        .directive-card > summary:hover {
            background: rgba(255, 255, 255, 0.02);
        }

.directive-card-arrow {
    color: var(--muted);
    font-size: 0.75rem;
    transition: transform 0.18s ease;
}

.directive-card[open] .directive-card-arrow {
    transform: rotate(90deg);
}

.directive-card-title {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Cuántos puntos se cumplieron, a la vista sin desplegar */
.directive-card-count {
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 600;
}

    .directive-card-count.is-done {
        background: rgba(124, 207, 174, 0.16);
        color: #7ccfae;
    }

.directive-card .directive-meta {
    margin-left: auto;
    text-transform: none;
    letter-spacing: normal;
}

.directive-card .directive-stamp,
.directive-card .directive-by {
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.directive-card-body {
    padding: 2px 16px 12px 40px;
}

    .directive-card-body .directive-item label {
        font-size: 0.82rem;
    }

/* Los botones sueltos de la fila de acciones se reparten igual que los formularios:
   sin esto, un <button> sin <form> toma el ancho completo y se monta sobre el vecino. */
.complaint-actions--fill > .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.complaint-actions--fill:has(> *:nth-child(4)) > .btn {
    flex: 1 1 calc(50% - 4px);
}


/* =====================================================================
   31. SUMMARY CARD v2 (identidad, datos, pie)
   ===================================================================== */

/* La tarjeta pone el padding en cada parte, no en el borde */
.complaint-card:has(.sum-head) {
    padding: 0;
    overflow: visible;
}

/* --- Identidad --- */
.sum-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 15px 18px 11px;
}

.sum-code {
    flex: 0 0 auto;
    color: #7ccfae;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sum-cover {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sum-flag {
    flex: 0 0 auto;
    padding: 1px 8px;
    background: rgba(224, 130, 145, 0.12);
    border: 1px solid rgba(224, 130, 145, 0.35);
    border-radius: 999px;
    color: #e08291;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sum-date {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* --- Estado: un renglón, ámbar sólo cuando hay directiva --- */
.sum-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 13px;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.35;
}

    .sum-state i {
        flex: 0 0 auto;
        font-size: 0.85rem;
        color: var(--muted);
    }

.sum-state--alert {
    background: rgba(223, 168, 99, 0.09);
    border-color: rgba(223, 168, 99, 0.3);
    color: #dfa863;
    font-weight: 600;
}

    .sum-state--alert i {
        color: #dfa863;
    }

.sum-state-badge {
    margin-left: auto;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.sum-state--alert .sum-state-badge {
    background: rgba(223, 168, 99, 0.18);
}

.sum-state-badge.is-done {
    background: rgba(124, 207, 174, 0.18);
    color: #7ccfae;
}

/* --- Datos --- */
.sum-data {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
    margin: 0;
    padding: 0 18px;
}

.sum-label {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sum-value {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .sum-value.is-muted {
        color: var(--muted);
        font-style: italic;
    }

.sum-data > :nth-last-child(1),
.sum-data > :nth-last-child(2) {
    border-bottom: none;
}

/* --- Pie: iconos a la izquierda, acción principal a la derecha --- */
.sum-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
}

.sum-foot-note {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sum-foot-main {
    width: auto;
    max-width: none;
    margin: 0 0 0 auto;
}

.sum-icon-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 0.88rem;
    cursor: pointer;
    background-image: none;
    transition: var(--transition-fast);
}

    .sum-icon-btn:hover {
        background: var(--panel-2);
        border-color: var(--border-light);
        color: var(--text);
        background-image: none;
    }

/* --- Menú de acciones poco frecuentes --- */
.dropdown-menu.sum-menu {
    min-width: 218px;
    padding: 6px;
    background: var(--panel-2);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.sum-menu-title {
    display: block;
    padding: 8px 10px 6px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sum-menu form {
    width: auto;
    max-width: none;
    margin: 0;
}

.sum-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .sum-menu-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
    }

    .sum-menu-item.is-final {
        color: #85d3b4;
    }

    .sum-menu-item.is-query {
        color: #dfa863;
    }

    .sum-menu-item.is-archive {
        color: #e0a37c;
    }

/* --- Dos acciones del mismo peso (supervisor: consulta y revisar) --- */
.sum-foot--split {
    gap: 10px;
}

    .sum-foot--split > form,
    .sum-foot--split > .btn {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

/* --- Cada acción con su tono, todos apagados ---
   El color sale de una sola variable por botón: fondo al 8 %, borde al 30 %
   y el texto en la versión suave del tono. */
.sum-foot .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    --tone: 148, 163, 184;
    --tone-text: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 0.4rem 0.95rem;
    background: rgba(var(--tone), 0.08);
    border-color: rgba(var(--tone), 0.3);
    border-radius: 8px;
    color: var(--tone-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: none;
    box-shadow: none;
}

    /* Control / consulta: celeste */
    .sum-foot .btn.btn-primary-modern {
        --tone: 127, 195, 232;
        --tone-text: #8fc9ec;
    }

    /* Definitivo: verde */
    .sum-foot .btn.btn-success-modern {
        --tone: 124, 207, 174;
        --tone-text: #85d3b4;
    }

    /* Archivar: naranja */
    .sum-foot .btn.btn-secondary-modern {
        --tone: 224, 163, 124;
        --tone-text: #e0a37c;
    }

    /* Devolver con directiva: ámbar, el mismo tono del aviso */
    .sum-foot .btn.btn-warning {
        --tone: 224, 168, 99;
        --tone-text: #dfa863;
    }

    /* Cancelar el envío: rojo apagado */
    .sum-foot .btn.btn-danger-modern {
        --tone: 224, 130, 145;
        --tone-text: #e08291;
    }

    .sum-foot .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):hover,
    .sum-foot .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):focus-visible {
        background: rgba(var(--tone), 0.16);
        border-color: rgba(var(--tone), 0.55);
        color: var(--tone-text);
        background-image: none;
        transform: none;
    }

    .sum-foot .btn i,
    .sum-foot .btn:hover i {
        color: inherit;
    }


/* =====================================================================
   32. PANEL DE SUMARIOS: el menú de acciones no se recorta
   ---------------------------------------------------------------------
   El contenedor de formularios recorta lo que se sale de sus bordes
   redondeados; en las páginas de tarjetas eso cortaba el desplegable
   de "Más acciones". Aquí se deja salir.
   ===================================================================== */

.form-container--cards {
    overflow: visible;
}

/* El menú se dibuja por encima de las tarjetas vecinas */
.dropdown-menu.sum-menu {
    z-index: 1060;
}