/*
==========================================
PM UI Framework
Tables
Version: 0.1.0
==========================================
*/

/* ==========================================
   TABLA BASE
========================================== */

.pm-table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    background:var(--pm-white);
    color:var(--pm-text);
    font-size:0.95rem;
    line-height:1.6;
    border:1px solid var(--pm-border);
    border-radius:var(--pm-radius-md);
    overflow:hidden;
    box-shadow:var(--pm-shadow-xs);
}

/* ==========================================
   CAPTION
========================================== */

.pm-table caption{
    caption-side:top;
    text-align:left;
    font-weight:700;
    color:var(--pm-heading);
    padding:1rem 1.25rem;
    font-size:1rem;
}

/* ==========================================
   ENCABEZADO
========================================== */

.pm-table thead{
    background:var(--pm-primary);
}

.pm-table thead th{
    color:#ffffff;
    font-weight:600;
    text-align:left;
    padding:1rem 1.25rem;
    border-bottom:2px solid var(--pm-primary-dark);
    white-space:nowrap;
}

/* ==========================================
   CUERPO
========================================== */

.pm-table tbody td{
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--pm-border);
    vertical-align:middle;
}

.pm-table tbody tr:last-child td{
    border-bottom:none;
}

/* ==========================================
   FILAS ALTERNADAS
========================================== */

.pm-table-striped tbody tr:nth-child(even){
    background:var(--pm-gray-50);
}

/* ==========================================
   EFECTO HOVER
========================================== */

.pm-table-hover tbody tr{
    transition:background-color .25s ease;
}

.pm-table-hover tbody tr:hover{
    background:rgba(46,125,50,.08);
}

/* ==========================================
   TABLA COMPACTA
========================================== */

.pm-table-compact th,
.pm-table-compact td{
    padding:.65rem .9rem;
    font-size:.9rem;
}

/* ==========================================
   TABLA CENTRADA
========================================== */

.pm-table-center th,
.pm-table-center td{
    text-align:center;
}

/* ==========================================
   ALINEACIÓN NUMÉRICA
========================================== */

.pm-table-number{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

/* ==========================================
   PRIMERA COLUMNA DESTACADA
========================================== */

.pm-table tbody td:first-child{
    font-weight:600;
    color:var(--pm-heading);
}

/* ==========================================
   ÚLTIMA COLUMNA
========================================== */

.pm-table tbody td:last-child{
    white-space:nowrap;
}

/* ==========================================
   CABECERA FIJA (OPCIONAL)
========================================== */

.pm-table-sticky thead th{
    position:sticky;
    top:0;
    z-index:2;
}

/* ==========================================
   TABLA SIN BORDE EXTERIOR
========================================== */

.pm-table-borderless{
    border:none;
    box-shadow:none;
}

.pm-table-borderless th,
.pm-table-borderless td{
    border-left:none;
    border-right:none;
}

/* ==========================================
   CELDAS DESTACADAS
========================================== */

.pm-table-highlight{
    background:rgba(255,193,7,.12);
    font-weight:600;
}

/* ==========================================
   CONTENEDOR RESPONSIVE
========================================== */

.pm-table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--pm-radius-md);
}

.pm-table-responsive > .pm-table{
    min-width:640px;
}

.pm-table-scroll{
    overflow-x:auto;
    scrollbar-width:thin;
}

.pm-table-scroll::-webkit-scrollbar{
    height:8px;
}

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

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

/* ==========================================
   TABLAS COMPARATIVAS
========================================== */

.pm-table-compare th{
    text-align:center;
}

.pm-table-compare td{
    text-align:center;
}

.pm-table-compare td:first-child,
.pm-table-compare th:first-child{
    text-align:left;
    font-weight:600;
}

.pm-table-compare .pm-best{
    background:rgba(255,193,7,.18);
    font-weight:700;
}

.pm-table-compare .pm-good{
    color:var(--pm-success);
    font-weight:600;
}

.pm-table-compare .pm-bad{
    color:var(--pm-danger);
    font-weight:600;
}

/* ==========================================
   ESTADO VACÍO
========================================== */

.pm-table-empty{
    text-align:center;
    color:var(--pm-text-light);
    padding:2rem;
    font-style:italic;
}

/* ==========================================
   IMPRESIÓN
========================================== */

@media print{

    .pm-table{
        box-shadow:none;
        border:1px solid #000;
    }

    .pm-table th{
        background:#eeeeee !important;
        color:#000 !important;
    }

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .pm-table{
        font-size:.9rem;
    }

    .pm-table th,
    .pm-table td{
        padding:.75rem;
    }

    .pm-table caption{
        padding:.75rem 1rem;
        font-size:.95rem;
    }

    .pm-table-responsive>.pm-table{
        min-width:560px;
    }

}

@media (max-width:480px){

    .pm-table{
        font-size:.875rem;
    }

    .pm-table th,
    .pm-table td{
        padding:.65rem;
    }

    .pm-table-responsive>.pm-table{
        min-width:500px;
    }

}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.pm-table th:focus-visible,
.pm-table td:focus-visible{
    outline:2px solid var(--pm-primary);
    outline-offset:-2px;
}

.pm-table a{
    font-weight:600;
}

.pm-table a:focus-visible{
    outline:2px solid var(--pm-secondary);
    outline-offset:2px;
    border-radius:var(--pm-radius-sm);
}

/* ==========================================
   MODO OSCURO (PREPARADO)
========================================== */

@media (prefers-color-scheme: dark){

    .pm-table{
        background:var(--pm-surface-dark, #1f2937);
        color:var(--pm-text-dark, #f3f4f6);
        border-color:var(--pm-border-dark, #374151);
    }

    .pm-table tbody td{
        border-color:var(--pm-border-dark, #374151);
    }

    .pm-table-striped tbody tr:nth-child(even){
        background:rgba(255,255,255,.04);
    }

    .pm-table-hover tbody tr:hover{
        background:rgba(255,255,255,.08);
    }

}

/* ==========================================
   REDUCCIÓN DE MOVIMIENTO
========================================== */

@media (prefers-reduced-motion: reduce){

    .pm-table-hover tbody tr{
        transition:none;
    }

}

/* ==========================================
   FIN DEL ARCHIVO
========================================== */