/**
 * SISTEMA DE TABLAS ESTANDARIZADO
 * ================================
 * Base minimalista con variantes para visualización y edición
 * 
 * Uso:
 *   <table class="table-std">              → Base minimalista
 *   <table class="table-std table-view">   → Para visualización (partidas)
 *   <table class="table-std table-edit">   → Para edición (gastos/ejecución)
 */

/* ========================================================================
   VARIABLES CSS - Configuración centralizada
   ======================================================================== */
:root {
    /* Colores de header */
    --table-header-bg: #6366f1;
    --table-header-color: white;
    --table-header-border: rgba(255, 255, 255, 0.2);
    
    /* Colores de filas */
    --table-row-hover: #f8f9ff;
    --table-row-alt: rgba(0, 0, 0, 0.015);
    --table-border: #eee;
    
    /* Estados */
    --table-row-saved: #e8f5e9;
    --table-row-modified: #fff8e1;
    --table-row-invalid: #ffebee;
    --table-row-selected: #e8edff;
    
    /* Colores semáforo */
    --color-success-light: #d1fae5;
    --color-success-dark: #065f46;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #92400e;
    --color-danger-light: #fee2e2;
    --color-danger-dark: #991b1b;
    
    /* Tipografía */
    --table-font-size: 12px;
    --table-font-size-sm: 11px;
    --table-font-weight-header: 500;
}

/* ========================================================================
   BASE: .table-std - Tabla minimalista
   ======================================================================== */
.table-std {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-font-size);
    background: white;
}

/* Header */
.table-std thead {
    position: sticky;
    top: 0;
    z-index: 20;
}

.table-std th {
    background: var(--table-header-bg);
    color: var(--table-header-color);
    padding: 8px 10px;
    text-align: left;
    font-weight: var(--table-font-weight-header);
    font-size: var(--table-font-size-sm);
    border: none;
    border-bottom: 2px solid var(--table-header-border);
    white-space: nowrap;
}

.table-std th:not(:last-child) {
    border-right: 1px solid var(--table-header-border);
}

/* Celdas */
.table-std td {
    padding: 6px 10px;
    border: none;
    border-bottom: 1px solid var(--table-border);
    vertical-align: middle;
}

/* Hover */
.table-std tbody tr:hover {
    background: var(--table-row-hover);
}

/* ========================================================================
   VARIANTE: .table-view - Para visualización (Partidas)
   ======================================================================== */
.table-std.table-view {
    min-width: 1000px;
}

.table-std.table-view th {
    padding: 10px 14px;
    font-size: var(--table-font-size);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.table-std.table-view td {
    padding: 10px 14px;
}

/* Filas clickeables */
.table-std.table-view tbody tr.clickable {
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.table-std.table-view tbody tr.clickable:hover {
    background: var(--table-row-hover);
    transform: translateY(-1px);
}

.table-std.table-view tbody tr.clickable:active {
    background: var(--table-header-bg);
    color: white;
}

.table-std.table-view tbody tr.clickable:active td {
    color: white;
}

/* Filas título */
.table-std.table-view tbody tr.row-title {
    background: #f3f4f6;
    font-weight: 600;
}

.table-std.table-view tbody tr.row-title td {
    color: #374151;
}

/* ========================================================================
   VARIANTE: .table-edit - Para edición (Gastos/Ejecución)
   ======================================================================== */
.table-std.table-edit {
    table-layout: fixed;
}

.table-std.table-edit th {
    padding: 6px 4px;
    text-align: center;
}

.table-std.table-edit td {
    padding: 0;
    height: 28px;
}

/* Inputs dentro de celdas */
.table-std.table-edit input {
    width: 100%;
    height: 28px;
    border: none;
    padding: 4px 6px;
    font-size: var(--table-font-size-sm);
    background: transparent;
    box-sizing: border-box;
}

.table-std.table-edit input::placeholder {
    color: #bbb;
    font-style: italic;
    font-size: 10px;
}

.table-std.table-edit input:focus {
    outline: none;
    background: #e8f4ff;
    box-shadow: inset 0 0 0 1px var(--table-header-bg);
}

.table-std.table-edit input[type="number"] {
    text-align: right;
}

.table-std.table-edit input:disabled,
.table-std.table-edit input[readonly] {
    background: #f5f5f5;
    color: #666;
}

/* Quitar flechas del input number */
.table-std.table-edit input::-webkit-outer-spin-button,
.table-std.table-edit input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table-std.table-edit input[type=number] {
    -moz-appearance: textfield;
}

/* Celdas calculadas (solo lectura) */
.table-std.table-edit td.calculated {
    background: #fafafa;
    text-align: right;
    padding: 4px 6px;
    color: #333;
}

/* Celdas auto-fill */
.table-std.table-edit td.auto-fill {
    background: #f9f9f9;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555;
}

/* ========================================================================
   ESTADOS DE FILA (compartidos)
   ======================================================================== */
.table-std tr.row-saved td {
    background: var(--table-row-saved);
}

.table-std tr.row-modified td {
    background: var(--table-row-modified);
}

.table-std tr.row-invalid td {
    background: var(--table-row-invalid);
}

.table-std tr.row-selected td {
    background: var(--table-row-selected);
    box-shadow: inset 3px 0 0 var(--table-header-bg);
}

/* ========================================================================
   COLUMNAS ESPECIALES
   ======================================================================== */

/* Status (primera columna con indicador) */
.table-std .col-status {
    width: 24px;
    text-align: center;
    padding: 0 !important;
}

.table-std tr.row-valid .col-status { color: #4caf50; }
.table-std tr.row-invalid .col-status { color: #f44336; }
.table-std tr.row-modified .col-status { color: #ff9800; }
.table-std tr.row-empty .col-status { color: #ccc; }

/* Actions (última columna con botones) */
.table-std .col-actions {
    width: 50px;
    text-align: center;
    white-space: nowrap;
}

.table-std .col-actions button {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    margin: 0 1px;
}

.table-std .col-actions button:hover {
    background: #f0f0f0;
    color: #333;
}

.table-std .col-actions .btn-edit:hover {
    color: #1976d2;
    background: #e3f2fd;
}

.table-std .col-actions .btn-delete:hover {
    color: #d32f2f;
    background: #ffebee;
}

/* Moneda (alineación derecha) */
.table-std .col-currency {
    text-align: right;
    font-weight: 500;
}

/* Porcentaje (centrado con colores semáforo) */
.table-std .col-percent {
    text-align: center;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.table-std .col-percent.success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.table-std .col-percent.warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.table-std .col-percent.danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* ========================================================================
   CONTENEDOR DE TABLA
   ======================================================================== */
.table-std-container {
    overflow: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Scrollbar minimalista */
.table-std-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-std-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-std-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.table-std-container::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1200px) {
    .table-std.table-view th,
    .table-std.table-view td {
        padding: 8px 10px;
    }
}

@media (max-width: 768px) {
    :root {
        --table-font-size: 11px;
        --table-font-size-sm: 10px;
    }
    
    .table-std th,
    .table-std td {
        padding: 6px 8px;
    }
}