/* ============================================================
   Classic Table Builder v2.0 — Frontend CSS
   Todas las propiedades visuales se controlan via CSS custom
   properties inyectadas como style="" en cada tabla.
   ============================================================ */

/* ── Wrapper ── */
.ctb-wrap { width: 100%; margin: 1.5em 0; }
.ctb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctb-scroll .ctb-table { min-width: 480px; }

/* ── Tabla ── */
.ctb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ctb-fs, 15px);
    color: var(--ctb-txt, #1f2937);
    line-height: 1.5;
    overflow: hidden;
}

.ctb-table th,
.ctb-table td {
    padding: var(--ctb-cp, 12px) calc(var(--ctb-cp, 12px) * 1.4);
    text-align: left;
    vertical-align: middle;
    border: var(--ctb-bw,1px) var(--ctb-bs,solid) var(--ctb-bdr,#e5e7eb);
}

/* ── Header ── */
.ctb-table thead th {
    background: var(--ctb-hbg, #4f46e5);
    color: var(--ctb-htxt, #ffffff);
    font-weight: 700;
    font-size: .9em;
    letter-spacing: .02em;
}

/* ── Footer ── */
.ctb-table tfoot td,
.ctb-table tfoot th {
    background: #f3f4f6;
    font-weight: 600;
    border-top: calc(var(--ctb-bw,1px) * 2) var(--ctb-bs,solid) var(--ctb-bdr,#e5e7eb);
}

/* ── Filas ── */
.ctb-table tbody tr:nth-child(odd)  td { background: var(--ctb-odd,  #ffffff); }
.ctb-table tbody tr:nth-child(even) td { background: var(--ctb-even, #f0f4ff); }

/* ─────────────────────────────────────
   ESTILOS
───────────────────────────────────── */

/* Default — ya hereda de arriba */

/* Striped */
.ctb-s-striped tbody tr:nth-child(odd)  td { background: #f9fafb; }
.ctb-s-striped tbody tr:nth-child(even) td { background: #fff; }
.ctb-s-striped td, .ctb-s-striped th { border-color: #f3f4f6; }

/* Bordered */
.ctb-s-bordered,
.ctb-s-bordered th,
.ctb-s-bordered td {
    border: calc(var(--ctb-bw,1px) + 0.5px) var(--ctb-bs,solid) var(--ctb-bdr,#374151) !important;
}

/* Minimal */
.ctb-s-minimal thead th {
    background: transparent !important;
    color: var(--ctb-txt,#111) !important;
    border: none !important;
    border-bottom: 2.5px solid var(--ctb-txt,#111) !important;
}
.ctb-s-minimal td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Card */
.ctb-s-card {
    border-radius: var(--ctb-rad,6px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.ctb-s-card thead th { background: var(--ctb-hbg, #0ea5e9); }
.ctb-s-card tbody tr:nth-child(odd)  td { background: #f0f9ff; }
.ctb-s-card tbody tr:nth-child(even) td { background: #fff; }
.ctb-s-card td { border-color: #bae6fd; }

/* Colorful */
.ctb-s-colorful thead th { background: var(--ctb-hbg, #f59e0b); color: var(--ctb-htxt,#1c1917); }
.ctb-s-colorful tbody tr:nth-child(odd)  td { background: #fef3c7; }
.ctb-s-colorful tbody tr:nth-child(even) td { background: #fde68a; }
.ctb-s-colorful td { border-color: #fcd34d; }

/* Hover */
.ctb-s-hover tbody tr:hover td {
    background: rgba(79,70,229,.07) !important;
    transition: background .15s;
}

/* ─────────────────────────────────────
   IMÁGENES DENTRO DE CELDAS
───────────────────────────────────── */
.ctb-table td img,
.ctb-table th img {
    max-width:    var(--ctb-immxw, 100%);
    height:       auto;
    border-radius:var(--ctb-imrad, 0px);
    box-shadow:   var(--ctb-imshd, none);
    margin-top:   var(--ctb-immt,  0px);
    margin-bottom:var(--ctb-immb,  0px);
    margin-left:  var(--ctb-imml,  0px);
    margin-right: var(--ctb-immr,  0px);
    display: block;
}

/* Alineación float */
.ctb-table td img[style*="float:left"],
.ctb-table td img[style*="float: left"]  { float: left;  display: inline; }
.ctb-table td img[style*="float:right"],
.ctb-table td img[style*="float: right"] { float: right; display: inline; }

/* ─────────────────────────────────────
   RESPONSIVE — STACKING MÓVIL
   < 640px: cada fila se convierte en
   tarjeta con label + valor
───────────────────────────────────── */

@media (max-width: 640px) {

    .ctb-responsive .ctb-table,
    .ctb-responsive .ctb-table thead,
    .ctb-responsive .ctb-table tbody,
    .ctb-responsive .ctb-table tfoot,
    .ctb-responsive .ctb-table tr,
    .ctb-responsive .ctb-table th,
    .ctb-responsive .ctb-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ocultar encabezado visual (se muestra via ::before) */
    .ctb-responsive .ctb-table thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
        visibility: hidden;
    }

    .ctb-responsive .ctb-table tr {
        background: #fff;
        border: 1px solid var(--ctb-bdr, #e5e7eb);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 4px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .ctb-responsive .ctb-table td {
        display: flex;
        align-items: flex-start;
        gap: 0;
        padding: 9px 14px;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        background: #fff !important;
        font-size: 14px;
    }

    .ctb-responsive .ctb-table td:last-child {
        border-bottom: none !important;
    }

    /* Etiqueta data-label */
    .ctb-responsive .ctb-table td::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 38%;
        max-width: 38%;
        font-weight: 700;
        font-size: .78em;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ctb-hbg, #4f46e5);
        padding-right: 10px;
        padding-top: 1px;
        flex-shrink: 0;
        line-height: 1.4;
    }

    .ctb-responsive .ctb-table tfoot tr {
        background: #f9fafb;
    }

    /* Scroll en móvil no aplica stacking */
    .ctb-scroll .ctb-table,
    .ctb-scroll .ctb-table thead,
    .ctb-scroll .ctb-table tbody,
    .ctb-scroll .ctb-table tfoot,
    .ctb-scroll .ctb-table tr,
    .ctb-scroll .ctb-table th,
    .ctb-scroll .ctb-table td {
        display: table-cell !important;
        position: static !important;
        visibility: visible !important;
        width: auto !important;
    }
    .ctb-scroll .ctb-table          { display: table !important; }
    .ctb-scroll .ctb-table thead    { display: table-header-group !important; }
    .ctb-scroll .ctb-table tbody    { display: table-row-group !important; }
    .ctb-scroll .ctb-table tfoot    { display: table-footer-group !important; }
    .ctb-scroll .ctb-table tr       { display: table-row !important; margin:0; box-shadow:none; border:none; border-radius:0; }
    .ctb-scroll .ctb-table td::before { display: none; }
}

/* ── Print ── */
@media print {
    .ctb-table { box-shadow: none; font-size: 10pt; }
    .ctb-table th,
    .ctb-table td { border: 1pt solid #ccc !important; padding: 5px 8px !important; }
    .ctb-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}