/* ==========================================================================
   ESTILOS GENERALES DEL PLUGIN DE GESTIÓN QUIMIAPAN
   Versión Final para Responsividad v2.0
   ========================================================================== */

/* --- 1. Utilidades Generales --- */
.gq-mt-0 { margin-top: 0 !important; }
.gq-mt-5 { margin-top: 5px !important; }
.gq-mt-10 { margin-top: 10px !important; }
.gq-mt-15 { margin-top: 15px !important; }
.gq-mt-20 { margin-top: 20px !important; }
.gq-mt-30 { margin-top: 30px !important; }
.gq-mb-10 { margin-bottom: 10px !important; }
.gq-mb-20 { margin-bottom: 20px !important; }
.gq-ml-5 { margin-left: 5px !important; }
.gq-ml-10 { margin-left: 10px !important; }
.gq-ml-15 { margin-left: 15px !important; }
.gq-bold-text { font-weight: bold; }
.gq-text-right { text-align: right; }
.gq-text-center { text-align: center; }
.gq-text-danger, .gq-error-text { color: #d63638; }
.gq-text-success { color: #2271b1; }
.gq-text-success-dark { color: #006799; }
.gq-text-info { color: darkblue; }
.gq-text-muted { color: grey; }
.gq-text-warning { color: #f59e0b; font-weight: bold; }
.gq-hidden { display: none; }
.button-link-delete { color: #d63638 !important; border-color: #d63638 !important; }
.button-link-delete:hover { background-color: #fbeaea !important; border-color: #b32d2e !important; }

/* --- 2. Layout y Contenedores --- */
.gq-tables-container { display: flex; flex-wrap: wrap; gap: 20px; }
.gq-table-column { flex: 1; min-width: 48%; box-sizing: border-box; }
.gq-info-panel, .gq-config-box { background: #fff; border: 1px solid #ccd0d4; padding: 10px 20px; margin-bottom: 20px; border-radius: 4px; }
.gq-add-new-container { margin-bottom: 10px; }
.gq-hr-separator-medium { margin: 25px 0; border: 0; border-top: 1px solid #eee; }
.gq-hr-separator-large { margin: 40px 0; border: 0; border-top: 2px solid #ccc; }
.feg-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gq-actions-container-flex { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.gq-section-header-blue { border-bottom: 2px solid #2271b1; padding-bottom: 8px; margin-top: 30px; }

/* --- 3. Tablas Generales --- */
.wrap .wp-list-table,
.wrap .gq-stats-table,
.wrap .gq-profile-display-table,
.wrap .gq-detalle-venta-table {
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-top: 15px;
    margin-bottom: 25px;
}
.wrap .wp-list-table thead th,
.wrap .gq-stats-table th,
.wrap .gq-profile-display-table th[scope="row"] {
    background-color: #f0f0f0;
    color: #0073aa;
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 12px;
    text-align: left;
}
.wrap .wp-list-table td,
.wrap .gq-stats-table td,
.wrap .gq-profile-display-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 1.5;
    vertical-align: middle;
}
.wrap .wp-list-table tr:nth-child(even),
.wrap .gq-stats-table tr:nth-child(even),
.wrap .gq-profile-display-table tr:nth-child(even) {
    background-color: #f8f8f8;
}
.wrap .wp-list-table tr:hover,
.wrap .gq-stats-table tr:hover,
.wrap .gq-profile-display-table tr:hover {
    background-color: #e9eff4;
}
.gq-table-group-header td {
    font-weight: bold;
    background-color: #f0f0f0;
}
.gq-inner-table { margin-top: 0; border-top: 0; box-shadow: none; }

/* --- 4. Formularios y Componentes --- */
.gq-readonly-input { background-color: #e9e9e9 !important; font-weight: bold; }
.gq-readonly-input-light { background-color: #f0f0f0 !important; }
.gq-input-short-right { width: 80px; text-align: right; }
.gq-input-width-60 { width: 60px; }
.gq-input-width-80 { width: 80px; }
.gq-info-box { font-size: 0.9em; }
.gq-info-note { font-style: italic; }
.gq-info-note-strong { font-style: italic; font-weight: bold; }
.gq-price-display { font-size: 1.2em; vertical-align: middle; }
.gq-notification-badge { display: inline-block; background-color: #d63638; color: #fff; font-size: 9px; line-height: 1.5; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: top; }
.gq-item-validation-error { color: #d63638; font-size: 0.9em; display: block; }
.gq-select-wide { width: 25em; }

/* ==========================================================================
   REGLAS RESPONSIVAS (MÓVIL) - VERSIÓN CORREGIDA Y MEJORADA
   ========================================================================== */
@media screen and (max-width: 782px) {
    /* Selector de alta especificidad para anular temas y plugins */
    body.gestion-quimiapan_page_gq_ventas .wp-list-table {
        display: block !important;
        width: 100% !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table thead {
        display: none !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table tbody {
        display: block !important;
        width: 100% !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table tr {
        display: block !important;
        margin-bottom: 20px !important;
        border: 1px solid #ccc !important;
        border-left: 4px solid #0073aa !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table td {
        display: block !important;
        position: relative !important; /* Base para el posicionamiento */
        padding: 12px 12px 12px 45% !important; /* Espacio a la izquierda para la etiqueta */
        min-height: 30px !important; 
        border: none !important;
        border-bottom: 1px solid #eee !important;
        text-align: right !important; /* Alinea el contenido a la derecha */
        word-break: break-word !important;
        width: 100% !important; /* Asegura que ocupe todo el ancho */
        box-sizing: border-box !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table tr td:last-child {
        border-bottom: none !important;
    }

    body.gestion-quimiapan_page_gq_ventas .wp-list-table td::before {
        content: attr(data-colname) !important;
        position: absolute !important; /* Posicionamiento definitivo */
        top: 12px !important;
        left: 12px !important;
        width: 40% !important;
        font-weight: 600 !important;
        font-size: 0.9em !important;
        color: #333 !important;
        line-height: 1.4 !important;
        text-align: left !important; /* Alinea la etiqueta a la izquierda */
        margin-bottom: 0 !important;
    }
    
    body.gestion-quimiapan_page_gq_ventas .wp-list-table td > * {
       text-align: right !important;
    }
    
    /* Caso especial para la columna de Acciones */
    body.gestion-quimiapan_page_gq_ventas .wp-list-table td[data-colname="Acciones"] {
        padding: 12px !important;
        text-align: left !important;
    }
    
    body.gestion-quimiapan_page_gq_ventas .wp-list-table td[data-colname="Acciones"]::before {
        display: none !important;
    }

    body.gestion-quimiapan_page_gq_ventas .gq-actions-container-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    body.gestion-quimiapan_page_gq_ventas .gq-actions-container-flex .button {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}
/* --- 5. Estilos Específicos para Vista Detalle de Venta --- */
.gq-detalle-venta-container {
    max-width: 1200px;
}

.gq-venta-actions-top {
    padding: 15px;
    background-color: #f6f7f7;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.gq-venta-actions-top .button {
    margin: 0;
    font-size: 13px;
    padding: 6px 12px;
    height: auto;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
}

.gq-info-panel h3 {
    font-size: 1.2em;
    color: #2271b1;
    margin-top: 5px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.gq-detalle-info-table {
    width: 100%;
    border: none;
    margin-top: 0;
    box-shadow: none;
}

.gq-detalle-info-table th,
.gq-detalle-info-table td {
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.gq-detalle-info-table tr:last-child th,
.gq-detalle-info-table tr:last-child td {
    border-bottom: none;
}

.gq-detalle-info-table th {
    font-weight: 600;
    color: #50575e;
    width: 40%;
}

.gq-detalle-info-table td {
    color: #3c434a;
}

.gq-detalle-info-table .saldo-pendiente {
    font-weight: bold;
    color: #d63638;
}

.gq-detalle-info-table .saldo-pagado {
    font-weight: bold;
    color: #00a32a;
}

.gq-detalle-items-table {
    width: 100%;
}
.gq-detalle-items-table thead th {
    background-color: #f9f9f9;
}

/* --- 6. Estilos Específicos para Listado de Ventas --- */

/* Ajuste de anchos de columna para optimizar el espacio */
.wp-list-table .column-fecha { width: 10%; }
.wp-list-table .column-cliente { width: 22%; }
.wp-list-table .column-monto { width: 15%; }
.wp-list-table .column-termino { width: 10%; }
.wp-list-table .column-vencimiento { width: 10%; }
.wp-list-table .column-estado { width: 15%; }
.wp-list-table .column-acciones {
    width: 18%;
    min-width: 245px; /* Evita que la columna se comprima demasiado en pantallas medianas */
}

/* Mejora el contenedor de acciones para evitar que los botones se encimen */
.wp-list-table .column-acciones .gq-actions-container-flex {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea si no hay espacio */
    gap: 4px;
    align-items: center;
}

.wp-list-table .column-acciones .button {
    margin: 0; /* Resetea el margen por defecto de los botones de WP */
    white-space: nowrap; /* Evita que el texto del botón se parta en dos líneas */
}

/* --- 7. Estilos REFORZADOS para Cuentas por Cobrar --- */

.gq-summary-panel {
    padding: 20px;
    max-width: 400px;
    border-left: 4px solid #d63638;
}
.gq-summary-panel .summary-label {
    font-size: 1.1em;
    font-weight: 600;
    color: #50575e;
}
.gq-summary-panel .summary-amount {
    font-size: 1.8em;
    font-weight: bold;
    color: #b32d2e;
    text-align: right;
    display: block;
    margin-top: 5px;
}
.wrap .gq-cuentas-por-cobrar-table tr.gq-row-overdue {
    background-color: #fbeaea !important;
    border-left-color: #d63638 !important; /* Para la vista móvil */
}

/* Ajuste de anchos de columna REFORZADO */
.wrap .gq-cuentas-por-cobrar-table .column-id-venta { width: 7%; }
.wrap .gq-cuentas-por-cobrar-table .column-fecha-venta { width: 11%; }
.wrap .gq-cuentas-por-cobrar-table .column-cliente { width: 18%; }
.wrap .gq-cuentas-por-cobrar-table .column-monto { width: 11%; }
.wrap .gq-cuentas-por-cobrar-table .column-pagado { width: 11%; }
.wrap .gq-cuentas-por-cobrar-table .column-saldo { width: 11%; font-weight: bold; }
.wrap .gq-cuentas-por-cobrar-table .column-termino { width: 8%; }
.wrap .gq-cuentas-por-cobrar-table .column-vencimiento { width: 11%; }
.wrap .gq-cuentas-por-cobrar-table .column-acciones { width: 12%; min-width: 120px; }

/* --- Estilos para Controles de Tabla (Búsqueda) --- */
.gq-table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.gq-search-form {
    display: flex;
    gap: 5px;
}

.gq-search-form input[type="text"] {
    width: 250px;
}

/* Estilos para la tabla de Ventas Programadas */
.gq-ventas-programadas-table {
    border-collapse: collapse;
    margin-top: 15px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gq-ventas-programadas-table th,
.gq-ventas-programadas-table td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle; /* <- Soluciona el problema de alineación */
    border-bottom: 1px solid #e0e0e0;
}

.gq-ventas-programadas-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: #333;
}

.gq-ventas-programadas-table tbody tr:nth-of-type(even) {
    background-color: #fdfdfd;
}

.gq-ventas-programadas-table tbody tr:hover {
    background-color: #f0f0f0;
}

.gq-ventas-programadas-table small {
    display: block;
    font-size: 0.9em;
    color: #555;
    margin-top: 3px;
}

/* Contenedor para los botones de acción */
.gq-actions-container {
    display: flex;
    align-items: center;
    gap: 6px; /* Espacio entre botones */
}

/* Estilos para la pestaña de navegación activa (con !important para forzar prioridad) */
.nav-tab-wrapper .nav-tab-active,
.nav-tab-wrapper .nav-tab-active:hover {
    background-color: #fff !important;
    border-bottom-color: #fff !important;
    color: #000 !important;
    font-weight: 600 !important;
}

/* --- Estilos para Vista Detalle de Venta Programada --- */
.gq-detalle-venta-container .gq-info-panel h3 {
    font-size: 1.3em;
    color: #2c3338;
    margin-top: 5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.gq-detalle-venta-container .gq-detalle-info-table {
    width: 100%;
    border: none;
    margin-top: 0;
    box-shadow: none;
}

.gq-detalle-venta-container .gq-detalle-info-table th,
.gq-detalle-venta-container .gq-detalle-info-table td {
    text-align: left;
    padding: 12px 5px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.gq-detalle-venta-container .gq-detalle-info-table tr:last-child th,
.gq-detalle-venta-container .gq-detalle-info-table tr:last-child td {
    border-bottom: none;
}

.gq-detalle-venta-container .gq-detalle-info-table th {
    font-weight: 600;
    color: #50575e;
    width: 25%;
}

.gq-detalle-venta-container .gq-detalle-info-table td {
    color: #3c434a;
}