/**

 * USAIT Reports - Estilos

 * Diseño profesional, responsivo y moderno

 */



:root {

    --usait-primary: #dc3545;

    --usait-primary-dark: #c82333;

    --usait-secondary: #6c757d;

    --usait-success: #28a745;

    --usait-warning: #ffc107;

    --usait-danger: #dc3545;

    --usait-light: #f8f9fa;

    --usait-border: #dee2e6;

    --usait-text: #333;

    --usait-text-light: #666;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* CONTENEDOR PRINCIPAL */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-reports-wrapper {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: var(--usait-text);

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* PANEL DE BÚSQUEDA */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-search-panel {

    background: white;

    border: 1px solid var(--usait-border);

    border-radius: 8px;

    padding: 18px;

    margin-bottom: 25px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.usait-search-header {

    margin-bottom: 15px;

    padding-bottom: 12px;

    border-bottom: 2px solid var(--usait-primary);

}



.usait-search-header h2 {

    margin: 0;

    font-size: 20px;

    font-weight: 600;

    color: var(--usait-text);

}



.usait-search-form {

    display: grid;

    gap: 12px;

}



.usait-form-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.usait-form-group label {

    font-weight: 600;

    font-size: 13px;

    color: var(--usait-text);

}



.usait-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}



.usait-input,

.usait-select {

    padding: 9px 10px;

    border: 1px solid var(--usait-border);

    border-radius: 6px;

    font-size: 13px;

    transition: all 0.3s ease;

}



.usait-input:focus,

.usait-select:focus {

    outline: none;

    border-color: var(--usait-primary);

    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);

}



.usait-form-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 8px;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* BOTONES */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 9px 18px;

    border: none;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

}



.usait-btn-primary {

    background: var(--usait-primary);

    color: white;

}



.usait-btn-primary:hover {

    background: var(--usait-primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);

}



.usait-btn-secondary {

    background: var(--usait-light);

    color: var(--usait-text);

    border: 1px solid var(--usait-border);

}



.usait-btn-secondary:hover {

    background: var(--usait-border);

}



.usait-btn-small {

    padding: 7px 12px;

    font-size: 12px;

}



.usait-btn-close {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: var(--usait-text);

    padding: 0;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.usait-btn-close:hover {

    color: var(--usait-primary);

}



.usait-icon {

    display: inline-block;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* LISTA DE REPORTES - VERSIÓN COMPACTA */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-reports-list {

    display: grid;

    gap: 12px;

    margin-bottom: 30px;

}



.usait-report-card-compact {

    background: white;

    border: 1px solid var(--usait-border);

    border-radius: 6px;

    padding: 15px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

}



.usait-report-card-compact:hover {

    border-color: var(--usait-primary);

    box-shadow: 0 3px 12px rgba(220, 53, 69, 0.12);

}



.usait-report-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    flex-wrap: wrap;

    gap: 10px;

}



.usait-report-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--usait-primary);

    margin: 0;

}



.usait-report-date {

    font-size: 12px;

    color: var(--usait-text-light);

    font-weight: 500;

}



.usait-report-grid-compact {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

    gap: 12px;

    margin-bottom: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--usait-border);

}



.usait-field-compact {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.usait-label {

    font-size: 10px;

    color: var(--usait-text-light);

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 0.3px;

}



.usait-value {

    font-size: 13px;

    color: var(--usait-text);

    font-weight: 600;

    word-break: break-word;

}



.usait-badge-dtc,

.usait-badge-systems {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #ffe5e5;

    color: var(--usait-primary);

    padding: 4px 8px;

    border-radius: 4px;

    font-weight: 700;

    font-size: 12px;

    width: fit-content;

}



.usait-badge-systems {

    background: #e8f4f8;

    color: #0c5460;

}



.usait-report-actions-compact {

    display: flex;

    justify-content: flex-end;

}



.usait-report-actions-compact .usait-btn {

    padding: 8px 16px;

    font-size: 13px;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* VISOR DE REPORTE */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-report-viewer {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100vh;

    height: 100dvh; /* iOS Safari real viewport */

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    flex-direction: column;

    z-index: 9999;

    padding: 0;

    overflow: hidden;

}



.usait-viewer-header {

    background: white;

    padding: 0 12px;

    height: 44px;

    border-bottom: 1px solid #eee;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    flex-shrink: 0;

    position: relative;

}



.usait-viewer-header h3 {

    margin: 0;

    flex: 1;

    font-size: 13px;

    font-weight: 600;

    color: #333;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.usait-viewer-actions {

    display: flex;

    gap: 2px;

    align-items: center;

    flex-shrink: 0;

}



/* Botones de ícono del header */

.usait-hdr-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #555;

    border-radius: 6px;

    transition: background 0.15s ease, color 0.15s ease;

    flex-shrink: 0;

}



.usait-hdr-btn svg {

    width: 18px;

    height: 18px;

    display: block;

}



.usait-hdr-btn:hover {

    background: #f5f5f5;

    color: #e34d58;

}



.usait-hdr-btn:active {

    background: #ffe8ea;

}



.usait-hdr-btn--close {

    color: #888;

    margin-right: 4px;

}



.usait-hdr-btn--close:hover {

    background: #fff0f0;

    color: #e34d58;

}



.usait-viewer-content {

    background: white;

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    display: block;

    -webkit-overflow-scrolling: touch;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* ESTRUCTURA TIPO USAIT - PESTAÑAS EXPANDIBLES */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-ecu-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.usait-ecu-item {

    background: white;

    border: 1px solid var(--usait-border);

    margin-bottom: 8px;

    border-radius: 4px;

    overflow: hidden;

}



.usait-ecu-header {

    background: #f8f9fa;

    padding: 15px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: all 0.3s ease;

    user-select: none;

    border-left: 4px solid var(--usait-primary);

}



.usait-ecu-header:hover {

    background: #f0f2f5;

}



.usait-ecu-header.active {

    background: #fff3f5;

    border-left-color: var(--usait-primary);

}



.usait-ecu-title {

    font-weight: 700;

    font-size: 14px;

    color: var(--usait-text);

    flex: 1;

    display: flex;

    align-items: center;

    gap: 10px;

}



.usait-ecu-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--usait-primary);

    color: white;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;

}



.usait-ecu-toggle {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    color: var(--usait-primary);

    transition: transform 0.3s ease;

}



.usait-ecu-header.active .usait-ecu-toggle {

    transform: rotate(180deg);

}



.usait-ecu-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

    background: white;

}



.usait-ecu-header.active ~ .usait-ecu-content {

    max-height: 2000px;

}



.usait-dtc-inside {

    padding: 0;

}



.usait-dtc-inside .usait-dtc-item {

    border: none;

    border-top: 1px solid var(--usait-border);

    background: white;

    padding: 12px 15px;

    margin: 0;

    border-radius: 0;

}



.usait-dtc-inside .usait-dtc-item:first-child {

    border-top: none;

}



.usait-dtc-inside .usait-dtc-code {

    font-size: 13px;

    margin-bottom: 3px;

}



.usait-dtc-inside .usait-dtc-description {

    font-size: 12px;

    margin-bottom: 2px;

}



.usait-dtc-inside .usait-dtc-status {

    font-size: 11px;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* BOTONES DE ÍCONO DEL HEADER */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-icon-btn {

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--usait-text);

    transition: all 0.2s ease;

    border-radius: 4px;

}



.usait-icon-btn:hover {

    background: #f0f2f5;

    color: var(--usait-primary);

}



.usait-icon-btn:active {

    background: #e8eaed;

}



.usait-icon-btn svg {

    display: block;

}



.usait-icon-btn-close:hover {

    color: var(--usait-primary);

}



.usait-report-content {

    padding: 40px;

    background: white;

    color: var(--usait-text);

}



.usait-report-logo {

    text-align: right;

    margin-bottom: 30px;

    font-size: 24px;

    font-weight: 900;

    font-family: 'Arial Black', Arial, sans-serif;

    color: var(--usait-primary);

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

}



.usait-report-logo-text {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    line-height: 1.2;

}



.usait-report-logo-main {

    font-size: 20px;

    font-weight: 900;

    color: var(--usait-primary);

}



.usait-report-logo-sub {

    font-size: 11px;

    font-weight: 600;

    color: var(--usait-secondary);

    letter-spacing: 0.5px;

}



.usait-report-section {

    margin-bottom: 30px;

}



.usait-report-section-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--usait-primary);

    text-transform: uppercase;

    border-bottom: 2px solid var(--usait-primary);

    padding-bottom: 8px;

    margin-bottom: 15px;

}



.usait-report-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

}



.usait-report-field {

    display: flex;

    flex-direction: column;

}



.usait-report-field-label {

    font-size: 10px;

    color: var(--usait-text);

    text-transform: uppercase;

    font-weight: 800;

    letter-spacing: 0.3px;

    margin-bottom: 2px;

}



.usait-report-field-value {

    font-size: 12px;

    color: var(--usait-text);

    font-weight: 400;

    line-height: 1.3;

}



.usait-system-list {

    margin-bottom: 25px;

}



.usait-system-item {

    background: var(--usait-light);

    border-left: 4px solid var(--usait-primary);

    padding: 15px;

    margin-bottom: 10px;

    border-radius: 4px;

}



.usait-system-name {

    font-weight: 700;

    color: var(--usait-text);

    margin-bottom: 10px;

    font-size: 14px;

}



.usait-dtc-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.usait-dtc-item {

    background: white;

    border: 1px solid var(--usait-border);

    padding: 10px;

    border-radius: 4px;

    font-size: 13px;

}



.usait-dtc-code {

    font-weight: 700;

    color: var(--usait-primary);

    margin-bottom: 4px;

    font-family: 'Courier New', monospace;

}



.usait-dtc-description {

    color: var(--usait-text);

    margin-bottom: 4px;

}



.usait-dtc-status {

    font-size: 12px;

    color: var(--usait-text-light);

    font-weight: 600;

    text-transform: uppercase;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* MODAL */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    padding: 20px;

}



.usait-modal-content {

    background: white;

    border-radius: 8px;

    padding: 30px;

    max-width: 500px;

    width: 100%;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

    position: relative;

}



.usait-modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: var(--usait-text);

}



.usait-modal-close:hover {

    color: var(--usait-primary);

}



.usait-modal-content h3 {

    margin-top: 0;

    color: var(--usait-primary);

}



.usait-share-qr {

    text-align: center;

    padding: 20px 0;

    border-bottom: 1px solid var(--usait-border);

    margin-bottom: 20px;

}



.usait-share-url {

    background: var(--usait-light);

    padding: 12px;

    border-radius: 4px;

    word-break: break-all;

    font-size: 13px;

    color: var(--usait-text);

    margin-bottom: 15px;

}



.usait-share-actions {

    display: flex;

    gap: 10px;

}



.usait-share-actions .usait-btn {

    flex: 1;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* ALERTAS */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-alert {

    padding: 15px 20px;

    border-radius: 6px;

    margin-bottom: 20px;

    border-left: 4px solid;

}



.usait-alert-warning {

    background: #fff3cd;

    border-color: #ffc107;

    color: #856404;

}



.usait-alert-danger {

    background: #f8d7da;

    border-color: #dc3545;

    color: #721c24;

}



.usait-alert-success {

    background: #d4edda;

    border-color: #28a745;

    color: #155724;

}



.usait-alert-info {

    background: #d1ecf1;

    border-color: #17a2b8;

    color: #0c5460;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* LOADING */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-loading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 60px 20px;

}



.usait-spinner {

    border: 4px solid var(--usait-light);

    border-top: 4px solid var(--usait-primary);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    animation: usait-spin 1s linear infinite;

    margin-bottom: 20px;

}



@keyframes usait-spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.usait-loading p {

    color: var(--usait-text-light);

    font-size: 14px;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* MÓDULOS - FILA SISTEMA (reemplaza inline styles del JS) */

/* ─────────────────────────────────────────────────────────────────────────── */



.usait-system-collapse {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid #f0f0f0;

    cursor: pointer;

    font-size: 15px;

    transition: background-color 0.2s;

    gap: 8px;

}



.usait-system-name-text {

    flex: 1;

    min-width: 0;

    font-weight: 700;

    color: #333;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.usait-badge-right {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0; /* NUNCA se achica — siempre visible */

    white-space: nowrap;

}



.usait-badge-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--usait-primary);

    color: white;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;

    flex-shrink: 0;

}



.usait-system-arrow {

    margin-left: 8px;

    color: #999;

    transition: transform 0.2s;

    flex-shrink: 0;

    font-size: 18px;

    line-height: 1;

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* PRINT STYLES */

/* ─────────────────────────────────────────────────────────────────────────── */



@media print {

    .usait-reports-wrapper {

        padding: 0;

    }



    .usait-search-panel,

    .usait-report-card,

    .usait-viewer-header,

    .usait-viewer-actions,

    .usait-btn,

    .usait-icon-btn {

        display: none !important;

    }



    .usait-report-viewer {

        position: static;

        background: white;

        padding: 0;

    }



    .usait-viewer-content {

        position: static;

        max-height: none;

        overflow: visible;

    }



    .usait-report-content {

        padding: 20px;

        box-shadow: none;

        border: none;

        max-width: 100%;

    }



    .usait-report-content {

        page-break-after: always;

    }



    .usait-report-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }



    .usait-report-field-label {

        font-size: 9px;

        margin-bottom: 2px;

    }



    .usait-report-field-value {

        font-size: 11px;

    }



    .usait-ecu-item {

        page-break-inside: avoid;

    }



    .usait-system-item {

        page-break-inside: avoid;

    }



    .usait-ecu-header {

        page-break-inside: avoid;

    }

}



/* ─────────────────────────────────────────────────────────────────────────── */

/* RESPONSIVE */

/* ─────────────────────────────────────────────────────────────────────────── */



@media (max-width: 768px) {

    .usait-reports-wrapper {

        padding: 12px;

    }



    .usait-search-panel {

        padding: 15px;

        margin-bottom: 20px;

    }



    .usait-search-header h2 {

        font-size: 18px;

    }



    .usait-search-form {

        gap: 10px;

    }



    .usait-form-row {

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }



    .usait-form-actions {

        grid-template-columns: 1fr;

        gap: 8px;

    }



    .usait-report-title-row {

        flex-direction: column;

        align-items: flex-start;

    }



    .usait-report-grid-compact {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }



    .usait-viewer-content {

        flex: 1;

        min-height: 0;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

    }



    .usait-report-content {

        padding: 20px;

    }



    .usait-report-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;

    }



    .usait-modal-content {

        max-width: 90vw;

        padding: 18px;

    }



    .usait-viewer-header {

        padding: 18px 20px;

        flex-wrap: wrap;

    }



    .usait-viewer-header h3 {

        width: 100%;

        margin-bottom: 12px;

    }



    .usait-viewer-actions {

        width: 100%;

        justify-content: flex-end;

        gap: 8px;

    }

}



@media (max-width: 480px) {

    .usait-reports-wrapper {

        padding: 10px;

    }



    .usait-search-panel {

        padding: 12px;

        margin-bottom: 15px;

    }



    .usait-search-header {

        margin-bottom: 12px;

        padding-bottom: 10px;

    }



    .usait-search-header h2 {

        font-size: 16px;

    }



    .usait-search-form {

        gap: 8px;

    }



    .usait-form-actions {

        grid-template-columns: 1fr;

        gap: 6px;

    }



    .usait-btn {

        padding: 8px 14px;

        font-size: 12px;

    }



    .usait-input,

    .usait-select {

        padding: 8px 8px;

        font-size: 12px;

    }



    .usait-form-group label {

        font-size: 12px;

    }



    .usait-report-grid-compact {

        grid-template-columns: repeat(2, 1fr);

        gap: 8px;

    }



    .usait-report-content {

        padding: 12px;

    }



    .usait-value {

        font-size: 12px;

    }



    .usait-report-viewer {

        padding: 0;

        background: rgba(0, 0, 0, 0.7);

    }



    .usait-viewer-header {

        padding: 0 8px;

        height: 40px;

        border-bottom: 1px solid #eee;

        gap: 4px;

    }



    .usait-viewer-header h3 {

        font-size: 12px;

        flex: 1;

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }



    .usait-viewer-actions {

        gap: 0;

        flex-shrink: 0;

    }



    .usait-hdr-btn {

        width: 32px;

        height: 32px;

    }



    .usait-hdr-btn svg {

        width: 16px;

        height: 16px;

    }



    .usait-viewer-content {

        background: white;

        width: 100%;

        height: 100%;

        min-height: 0;

        border-radius: 0;

        box-shadow: none;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

    }



    .usait-ecu-header {

        padding: 12px;

        font-size: 13px;

    }



    .usait-ecu-count {

        width: 20px;

        height: 20px;

        font-size: 10px;

    }



    .usait-ecu-content {

        max-height: 0;

    }



    .usait-ecu-header.active ~ .usait-ecu-content {

        max-height: 3000px;

    }



    .usait-report-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }



    .usait-report-section-title {

        font-size: 14px;

        padding-bottom: 6px;

        margin-bottom: 12px;

    }



    .usait-report-field-label {

        font-size: 10px;

    }



    .usait-report-field-value {

        font-size: 13px;

    }

}