/* site-05-lists.css: Tables, pagination and complaint list (17-18).
   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). */

/* =====================================================================
   17. TABLES AND PAGINATION
   ===================================================================== */
.all-tables {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

    .all-tables table {
        width: 100%;
        border-collapse: collapse;
    }

/* Horizontal scroll on small screens (keeps columns readable) */
.all-tables--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .all-tables--scroll table {
        min-width: 600px;
    }

.all-tables thead {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}

    .all-tables thead th {
        padding: 14px 16px;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }

.all-tables tbody tr {
    transition: var(--transition-fast);
}

    .all-tables tbody tr:nth-child(odd) {
        background: var(--row-1);
    }

    .all-tables tbody tr:nth-child(even) {
        background: var(--row-2);
    }

    .all-tables tbody tr:hover {
        background: var(--row-hover);
        box-shadow: inset 3px 0 0 #3b82f6;
    }

.all-tables td {
    padding: 12px 16px;
    color: var(--text-soft);
    text-align: center;
    vertical-align: middle;
    border: none;
    font-size: 0.88rem;
}

.table-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

    /* Action forms keep the button size (overrides the global form { width: 100% }) */
    .table-actions form {
        display: inline-flex;
        width: auto;
        max-width: none;
        margin: 0;
    }

    /* Overrides the global full-width .btn rule on mobile */
    .table-actions .btn-action {
        width: 36px;
    }

/* Pagination */
.pagination-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    color: var(--text-soft);
    font-size: 0.85rem;
    white-space: nowrap; /* keep "Página 1 de 1" on one line */
}

    .pagination-custom button,
    .pagination-custom a,
    .btn-page {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--panel-2);
        color: var(--text);
        font-size: 0.9rem;
        text-decoration: none;
        cursor: pointer;
        transition: var(--transition);
    }

        .pagination-custom button:hover:not(:disabled),
        .pagination-custom a:hover,
        .btn-page:hover:not(:disabled) {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .pagination-custom button:disabled,
        .btn-page:disabled,
        .btn-page.disabled {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
        }

/* Scrollable files table */
.files-table-scroll {
    max-height: 380px;
    overflow: auto;
    border-radius: var(--radius);
}

    .files-table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--panel-2);
    }

    .files-table-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .files-table-scroll::-webkit-scrollbar-track {
        background: var(--panel);
    }

    .files-table-scroll::-webkit-scrollbar-thumb {
        background: var(--border-light);
        border-radius: 999px;
    }

        .files-table-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--muted);
        }


/* =====================================================================
   18. COMPLAINT LIST (cards)
   ===================================================================== */

/* --- Empty state --- */
.complaint-empty {
    margin-top: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

    .complaint-empty h3 {
        margin: 0;
        color: var(--text);
        font-weight: 700;
    }

    .complaint-empty p {
        margin: 0.5rem 0 0;
        color: var(--text-soft);
    }

/* --- Card --- */
.complaint-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

    /* Forms inside the card must not inherit the global "form" width/centering */
    .complaint-card form {
        width: auto;
        max-width: none;
        margin: 0;
    }

.complaint-sheet {
    position: relative;
    flex-grow: 1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

/* --- File cover (PDF / image) --- */
.cover-file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cover-file-title {
    color: var(--primary-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

    .cover-file-title i {
        color: var(--success);
        margin-right: 4px;
    }

.cover-code-badge {
    font-size: 0.65rem;
}

.cover-preview {
    position: relative;
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

    .cover-preview iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    .cover-preview img {
        max-height: 100%;
        object-fit: contain;
    }

.complaint-card .cover-expand-form {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

.cover-expand-btn {
    opacity: 0.85;
    box-shadow: var(--shadow-sm);
}

    .cover-expand-btn:hover {
        opacity: 1;
    }

/* --- Text cover (no file) --- */
.cover-text-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

    .cover-text-header i {
        color: var(--warning);
        font-size: 22px;
    }

    .cover-text-header span {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

/* Data list: label on the left, value on the right, thin dividers */
.cover-text,
.cover-text-btn {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-family: var(--font-family);
    font-size: 0.85rem;
    line-height: 1.4;
}

.cover-text-btn {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

    .cover-text-btn:hover {
        background: rgba(255, 255, 255, 0.02);
    }

.cover-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .cover-row:last-child {
        border-bottom: none;
    }

.cover-label {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.cover-value {
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

    /* Badges inside a row keep their own width */
    .cover-value.status-badge,
    .cover-value.badge {
        justify-self: start;
    }

.cover-value-code {
    color: var(--primary-soft);
    font-weight: 700;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* --- Sheet footer --- */
.complaint-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

    /* Footer icon buttons keep their size on mobile
   (overrides the global full-width .btn rule of the responsive section) */
    .complaint-sheet-footer .btn {
        width: auto;
        flex: 0 0 auto;
    }

.complaint-view-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap; /* keep "Ver expediente" on one line */
    cursor: pointer;
    transition: var(--transition);
}

    .complaint-view-link i {
        font-size: 0.75rem;
        transition: var(--transition);
    }

    /* Subtle highlight only on hover */
    .complaint-view-link:hover {
        color: #60a5fa;
    }

        .complaint-view-link:hover i {
            transform: translateX(3px);
        }

.complaint-divider {
    margin: 16px 0;
    border-color: var(--border);
}

/* --- Workflow actions --- */
.complaint-actions {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* --- Directive boxes (supervisor / prosecutor) --- */
.directive-box {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
}

    .directive-box .form-label {
        color: var(--text-soft);
        font-size: 0.75rem;
    }

.directive-box--supervisor {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
}

.directive-box--prosecutor {
    background: rgba(0, 194, 255, 0.08);
    border: 1px dashed var(--info);
}

.directive-textarea {
    margin-bottom: 8px;
    background: var(--panel-2);
    color: var(--text);
    border-color: var(--border);
}

    .directive-textarea:focus {
        background: var(--panel-2);
        color: var(--text);
    }

/* --- Colored icons inside neutral buttons --- */
.icon-warning {
    color: var(--warning);
}

.icon-danger {
    color: var(--danger);
}


/* --- "With prisoner" badge --- */
.badge-prisoner {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 93, 115, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 93, 115, 0.3);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(255, 93, 115, 0.15);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* --- Status badge (text cover) --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    background: rgba(0, 194, 255, 0.1);
    color: var(--info);
    border: 1px solid rgba(0, 194, 255, 0.25);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 600;
}

/* --- Directive note (returned by prosecutor / supervisor): neutral, easy to read --- */
.directive-note {
    margin-top: 16px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius-sm);
}

.directive-note-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.directive-note-body {
    max-height: 110px;
    margin: 0;
    padding-right: 4px;
    overflow-y: auto;
    color: var(--text);
    font-family: var(--font-family);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-line;
}

/* --- Actions that share the full width equally --- */
.complaint-actions--fill {
    flex-wrap: nowrap;
}

    .complaint-actions--fill form {
        flex: 1 1 0;
        min-width: 0;
    }

    .complaint-actions--fill .btn {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* --- Neon states: each card defines its color (--neon), children reuse it --- */
.complaint-card--final {
    --neon: 34, 197, 94;
}
/* green: ready for final */
.complaint-card--control {
    --neon: 250, 204, 21;
}
/* yellow: pending control */
.complaint-card--review,
.complaint-card--directives {
    --neon: 255, 159, 28;
}
/* amber: review / directives */

/* General list (all summaries): only the final outcome is highlighted */
.complaint-card--definitive {
    --neon: 34, 197, 94;
}
/* green: definitive */
.complaint-card--consultation {
    --neon: 250, 204, 21;
}
/* yellow: in consultation */
.complaint-card--archived {
    --neon: 148, 163, 184;
}
/* gray: archived */

/* Cards keep the neutral look: the state is shown only by the top note and the status badge */

/* Top note: uses the card color, violet if outside a state card */
.state-note,
.final-review-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: rgba(var(--neon, 168, 85, 247), 0.1);
    color: rgb(var(--neon, 168, 85, 247));
    border: 1px dashed rgba(var(--neon, 168, 85, 247), 0.5);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 10px rgba(var(--neon, 168, 85, 247), 0.12);
    text-shadow: 0 0 8px rgba(var(--neon, 168, 85, 247), 0.45);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Neutral (gray) note, e.g. "archived" outside a card */
.state-note--neutral {
    --neon: 148, 163, 184;
}

/* Status badge takes the card color */
.complaint-card[class*="complaint-card--"] .status-badge {
    background: rgba(var(--neon), 0.1);
    color: rgb(var(--neon));
    border-color: rgba(var(--neon), 0.4);
    box-shadow: 0 0 10px rgba(var(--neon), 0.2);
    text-shadow: 0 0 6px rgba(var(--neon), 0.4);
}

/* "Listo para definitivo" badge (supervisor list): violet, green is reserved for definitive */
.badge-final {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.7rem;
    background: rgba(168, 85, 247, 0.1);
    color: rgb(192, 132, 252);
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.45);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- Neon buttons (only inside card actions) --- */
.complaint-actions .btn-primary-modern {
    --btn-neon: 59, 130, 246;
}
/* blue */
.complaint-actions .btn-success-modern {
    --btn-neon: 34, 197, 94;
}
/* green */
.complaint-actions .btn-danger-modern {
    --btn-neon: 244, 80, 107;
}
/* red */
.complaint-actions .btn-warning {
    --btn-neon: 250, 204, 21;
}
/* yellow */
.complaint-actions .btn-secondary-modern {
    --btn-neon: 148, 163, 184;
}
/* gray */

.complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    background: rgba(var(--btn-neon), 0.08);
    color: rgb(var(--btn-neon));
    border: 1px solid rgba(var(--btn-neon), 0.6);
    box-shadow: 0 0 10px rgba(var(--btn-neon), 0.18), inset 0 0 10px rgba(var(--btn-neon), 0.06);
    text-shadow: 0 0 6px rgba(var(--btn-neon), 0.45);
    font-weight: 600;
    transition: all 0.2s ease;
}

    .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(--btn-neon), 0.16);
        color: rgb(var(--btn-neon));
        border-color: rgb(var(--btn-neon));
        box-shadow: 0 0 18px rgba(var(--btn-neon), 0.4), inset 0 0 12px rgba(var(--btn-neon), 0.1);
        transform: translateY(-1px);
    }

    .complaint-actions .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern):active {
        transform: translateY(0);
        box-shadow: 0 0 8px rgba(var(--btn-neon), 0.3);
    }


/* --- Directive box inside the cover sheet (supervisor panel) --- */
.complaint-sheet .directive-box--inline {
    margin-top: auto; /* sits right above "Ver expediente" */
    padding: 10px;
}

    .complaint-sheet .directive-box--inline .form-label {
        margin-bottom: 8px;
    }

.directive-box--inline .directive-textarea {
    min-height: 130px;
    padding: 10px 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
}

/* Neutral "Devolver" button inside the sheet (discreet, highlights only on hover) */
.directive-box--inline .btn-warning {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-soft);
    border: 1px solid var(--border-light);
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

    .directive-box--inline .btn-warning:hover,
    .directive-box--inline .btn-warning:focus-visible {
        background: rgba(148, 163, 184, 0.16);
        color: var(--text);
        border-color: #64748b;
    }

/* Textarea focus: soft blue instead of yellow */
.directive-box--inline .directive-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* --- Directiva escrita en ventana (se abre sin salir del panel) --- */
.directive-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.815rem;
    font-weight: 500;
}

.directive-chip {
    padding: 2px 8px;
    background: rgba(247, 166, 59, 0.12);
    border: 1px solid rgba(247, 166, 59, 0.3);
    border-radius: 999px;
    color: var(--warning);
    font-size: 0.68rem;
    font-weight: 600;
}

/* Vistazo de la directiva ya escrita, dentro de la tarjeta */
.directive-preview {
    max-height: 80px;
    margin: 0 0 10px;
    padding: 8px 10px;
    overflow: hidden;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.directive-modal-subtitle {
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 0.85rem;
}

    .directive-modal-subtitle strong {
        color: var(--text);
    }

/* --- La directiva se carga por puntos, uno por renglón --- */
.directive-modal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.directive-modal-subtitle {
    color: var(--text-soft);
    font-size: 0.85rem;
}

    .directive-modal-subtitle strong {
        color: var(--text);
    }

.directive-modal-count {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

    .directive-modal-count strong {
        color: var(--text-soft);
    }

.directive-modal-help {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.directive-points {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.directive-point {
    display: flex;
    align-items: center;
    gap: 9px;
}

.directive-point-number {
    flex: 0 0 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-3);
    border-radius: 6px;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 700;
}

/* El campo del punto: más bajo que un input de formulario, para que entren varios */
.modal .directive-point input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    font-size: 0.86rem;
}

/* Quitar un punto: discreto, se pinta sólo al pasar por encima */
.directive-point-remove {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .directive-point-remove:hover {
        background: rgba(244, 80, 107, 0.12);
        color: var(--danger);
    }

    .directive-point-remove[hidden] {
        visibility: hidden;
        display: inline-flex;
    }

/* Agregar punto: un enlace discreto, no un botón de acción */
.directive-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: none;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .directive-add:hover {
        background: rgba(255, 255, 255, 0.03);
        border-color: #64748b;
        color: var(--text);
    }

    .directive-add:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Guardar / Cancelar centrados, como en el resto de los formularios */
.directive-modal-footer {
    justify-content: center;
    gap: 12px;
}

/* --- Panel de la directiva en el expediente: sobrio, sin gritar --- */
.note-directive.directive-panel {
    gap: 12px;
    padding: 14px 18px;
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(212, 154, 34, 0.7);
    box-shadow: none;
}

    .directive-panel .note-icon {
        margin-top: 1px;
        font-size: 1rem;
        opacity: 0.75;
    }

    /* El título, como una etiqueta de sección */
    .directive-panel .note-title {
        color: var(--text-soft);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* La fecha y la firma, texto al margen: sin pastillas ni bordes */
    .directive-panel .directive-stamp,
    .directive-panel .directive-by {
        padding: 0;
        background: none;
        border: 0;
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 500;
    }

        .directive-panel .directive-stamp i,
        .directive-panel .directive-by i {
            color: var(--muted);
            font-size: 0.72rem;
        }

    /* El sello no hereda las mayúsculas ni el espaciado del título */
    .directive-panel .directive-meta {
        gap: 14px;
        text-transform: none;
        letter-spacing: normal;
    }

    .directive-panel .directive-items {
        padding-top: 2px;
        border-top: 1px solid var(--border);
    }

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

/* Sello de la directiva: cuándo se emitió y quién la firma */
.directive-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.directive-stamp,
.directive-by {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.directive-stamp {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-light);
    color: var(--text);
}

    .directive-stamp i {
        color: var(--accent);
    }

.directive-by {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--text-soft);
}

    .directive-by i {
        color: var(--muted);
    }

/* Fecha y hora en que se emitió la directiva */
.directive-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Checklist de la directiva (el operador va tildando lo que cumple) --- */
/* Título a la izquierda, sello (fecha y firma) arriba a la derecha */
.directive-note-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.directive-checklist {
    margin-top: 10px;
}

.directive-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.directive-progress-count {
    color: var(--text-soft);
    font-size: 0.75rem;
    white-space: nowrap;
}

    .directive-progress-count strong {
        color: var(--text);
    }

.directive-progress-bar {
    flex: 1 1 auto;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

    .directive-progress-bar > span {
        display: block;
        height: 100%;
        background: var(--success);
        border-radius: 999px;
        transition: width 0.25s ease;
    }

.directive-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Con muchos puntos scrollea la lista, para que el panel no se haga eterno */
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .directive-items:has(li:nth-child(7)) {
        padding-right: 6px;
    }

.directive-item label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .directive-item label:hover {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--border);
    }

.directive-item input {
    flex: 0 0 auto;
    margin-top: 2px;
    cursor: pointer;
}

    .directive-item input:disabled {
        cursor: not-allowed;
    }

/* Punto ya cumplido */
.directive-item.is-done span {
    color: var(--muted);
    text-decoration: line-through;
}