/*
 * Retazos - Simtexx SpA
 * Ajustes de marca y responsive sobre la plantilla base (app.css).
 * Se mantiene al mínimo: solo lo que la plantilla no resuelve.
 */

:root {
    --sim-rojo: #C8102E;
    --sim-rojo-oscuro: #A00D24;
}

/* ---- Acentos de marca ---- */
.text-sim { color: var(--sim-rojo) !important; }
.bg-sim { background-color: var(--sim-rojo) !important; }

.btn-sim,
.btn-sim:focus {
    background-color: var(--sim-rojo);
    border-color: var(--sim-rojo);
    color: #fff;
}
.btn-sim:hover {
    background-color: var(--sim-rojo-oscuro);
    border-color: var(--sim-rojo-oscuro);
    color: #fff;
}

/* Borde rojo de la plantilla para el recuadro destacado de salida */
.retazo-destacado {
    border-left: 4px solid var(--sim-rojo);
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 16px;
}

/* Resaltado de input con error de validación */
.is-invalid-sim {
    border-color: #dc2626 !important;
}
.invalid-text {
    color: #dc2626;
    font-size: 12px;
}

/* ---- Tablas que se vuelven tarjetas en móvil ----
 * Aplicar la clase .table-stack a la <table> y data-label="..." a cada <td>.
 * En pantallas < 768px cada fila se muestra como tarjeta. */
@media (max-width: 767.98px) {
    table.table-stack thead { display: none; }
    table.table-stack tbody tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 8px 12px;
        background: #fff;
    }
    table.table-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none !important;
        padding: 6px 0;
        text-align: right;
    }
    table.table-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        margin-right: 12px;
    }
}

/* ---- Documento PDF de respaldo ---- */
.doc-pdf {
    max-width: 800px;
    margin: 24px auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 32px 40px;
    color: #1f2937;
}
.doc-pdf .doc-header {
    border-bottom: 2px solid var(--sim-rojo);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.doc-pdf table td { padding: 4px 0; }
.doc-pdf .doc-firma {
    margin-top: 48px;
    border-top: 1px solid #1f2937;
    width: 60%;
    padding-top: 6px;
}

@media print {
    .no-print, #topnav, .footer, .page-title-box, .page-title-alt-bg { display: none !important; }
    body { background: #fff !important; }
    .wrapper, .container-fluid { padding: 0 !important; margin: 0 !important; }
    .doc-pdf { border: none; margin: 0; box-shadow: none; }
}