/*
 Theme Name:     Divi Child
 Theme URI:      https://GPH.aitss.com.co/
 Description:    Portal Inmersivo GPH - White Label & Bento UI
 Template:       Divi
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

:root {
    --verder-oliva: #01A79B;
    --gradient-porto: linear-gradient(90deg, #007F7A, #00B3A6, #00D5C0);
    --porto-bg: #F0F2F5;
    --porto-text: #222222;
    --GPH-sidebar: #01A79B;
}

/* --- REGLAS DE ESTANDARIZACIÓN GLOBAL (PQRS, RESERVAS, CONFIG) --- */
.page-id-1344 #main-content .container,
.page-id-1344 #left-area,
.page-id-1344 #main-content,
.page-id-1344 .et_pb_section,
.page-id-1344 .et_pb_row,
.portal-pqrs #main-content .container,
.portal-pqrs #left-area,
.portal-pqrs #main-content,
.post-type-archive-pqrs #main-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-id-1344 #sidebar,
.portal-pqrs #sidebar,
.page-id-1344 .sidebar {
    display: none !important;
}

/* --- ESTILOS DEL BACKEND (wp-admin) --- */

/* Ocultar elementos de WordPress para residentes */
#wpadminbar #wp-admin-bar-wp-logo,
#footer-thankyou,
#footer-upgrade,
#adminmenu .wp-menu-image img {
    display: none !important;
}

/* Personalización del Menú Lateral Izquierdo */
#adminmenu,
#adminmenu .wp-submenu,
#adminmenuback,
#adminmenuwrap {
    background-color: var(--verder-oliva) !important;
}

#adminmenu li.current a.menu-top,
#adminmenu .wp-submenu li.current a {
    background-color: #6B8E23 !important;
    /* Verde Oliva más claro para activos */
}

/* Barra Superior con Gradiente GPH */
#wpadminbar {
    background: var(--gradient-porto) !important;
}

/* Reemplazo del Logo en la Barra Superior */
#wp-admin-bar-site-name>a::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/wp-content/uploads/logo-GPH-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: middle;
}

/* Estilo Bento para Widgets del Dashboard Central */
.postbox {
    border-radius: 15px !important;
    border: none !important;
    box-shadow: var(--porto-shadow) !important;
}

/* =========================================================================
   GPH UI - Minimalist Design System for Custom Modules (PQRS, Reservas)
   ========================================================================= */

/* Backward Compatibility Aliases */
.oporto-container, .op-container { border: inherit; }
.oporto-card, .op-card, .oporto-section { 
    background: #ffffff !important; 
    border-radius: 8px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; 
    padding: 20px !important; 
    margin-bottom: 20px !important; 
    border: 1px solid #dddddd !important; 
}
.oporto-btn, .op-btn { 
    padding: 8px 16px; 
    border-radius: 4px; 
    font-weight: 600; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #01A79B; 
    color: #fff !important; 
}
.oporto-input, .op-input, .oporto-select, .op-select {
    padding: 8px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: white;
}

:root {
    --GPH-primary: #01A79B;
    --GPH-primary-hover: #018C82;
    --GPH-secondary: #6c757d;
    --GPH-gray-light: #f1f1f1;
    --GPH-gray-border: #cccccc;
    --GPH-text-main: #333333;
    --GPH-text-muted: #666666;
    --GPH-bg-card: #ffffff;
    --GPH-radius: 8px;
    --GPH-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    /* Estados */
    --GPH-success: #28a745;
    --GPH-warning: #ff9800;
    --GPH-danger: #dc3545;
    --GPH-info: #17a2b8;
}

/* 1. Contenedores y Tarjetas */
.GPH-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Open Sans', sans-serif;
    color: var(--GPH-text-main);
}

.GPH-card {
    background: #ffffff !important;
    border-radius: var(--GPH-radius) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    border: 1px solid #e2e8f0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.GPH-card-header {
    border-bottom: 2px solid var(--GPH-gray-light);
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.GPH-card-title {
    color: var(--GPH-primary);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* 2. Formularios y Botones */
.GPH-form-layout {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--GPH-gray-light);
    padding: 15px;
    border-radius: var(--GPH-radius);
    margin-bottom: 20px;
}

.GPH-input,
.GPH-select {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--GPH-gray-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: var(--GPH-text-main);
    background: white;
    outline: none;
    transition: border-color 0.2s;
}

.GPH-input:focus,
.GPH-select:focus {
    border-color: var(--GPH-primary);
}

.GPH-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.GPH-btn:hover {
    text-decoration: none;
}

.GPH-btn-primary {
    background: var(--GPH-primary);
    color: white !important;
}

.GPH-btn-primary:hover {
    background: var(--GPH-primary-hover);
    color: white !important;
}

.GPH-btn-secondary {
    background: #e0e0e0;
    color: var(--GPH-text-main) !important;
    border: 1px solid var(--GPH-gray-border);
}

.GPH-btn-secondary:hover {
    background: #d6d6d6;
    color: var(--GPH-text-main) !important;
}

.GPH-btn-danger {
    background: var(--GPH-danger);
    color: white !important;
}

.GPH-btn-danger:hover {
    background: #c82333;
    color: white !important;
}

.GPH-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* 3. Tablas de Datos */
.GPH-table-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: var(--GPH-radius);
    border: 1px solid var(--GPH-gray-border);
    margin-bottom: 20px;
}

.GPH-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
    font-size: 14px;
}

.GPH-table th {
    background: var(--GPH-primary);
    color: white !important;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.GPH-table-pq {
    min-width: 1050px !important;
}

.GPH-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--GPH-gray-border);
    vertical-align: middle;
}

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

.GPH-table tbody tr:nth-of-type(even) {
    background-color: #fcfcfc;
}

.GPH-table tbody tr:hover {
    background-color: #f5f7f2;
}

/* Tablas móviles responsivas */
@media screen and (max-width: 1024px) {

    .GPH-table,
    .GPH-table tbody,
    .GPH-table tr,
    .GPH-table td {
        display: block;
        width: 100%;
    }

    .GPH-table thead {
        display: none;
    }

    .GPH-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--GPH-gray-border);
        border-radius: var(--GPH-radius);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        background-color: #fff;
    }

    .GPH-table td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px dashed var(--GPH-gray-border);
        padding: 12px 15px;
        text-align: left;
    }

    .GPH-table td:last-child {
        border-bottom: 0;
    }

    .GPH-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--GPH-primary);
        text-align: left;
        margin-bottom: 5px;
        font-size: 13px;
        text-transform: uppercase;
        border-bottom: 2px solid var(--GPH-primary);
        padding-bottom: 2px;
        width: 100%;
    }
}

/* 4. Etiquetas de Estado (Badges) */
.GPH-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px;
    text-transform: uppercase;
}

.GPH-badge-success {
    background-color: var(--GPH-success);
    color: white;
}

.GPH-badge-warning {
    background-color: var(--GPH-warning);
    color: white;
}

.GPH-badge-danger {
    background-color: var(--GPH-danger);
    color: white;
}

.GPH-badge-primary {
    background-color: var(--GPH-primary);
    color: white;
}

.GPH-badge-secondary {
    background-color: var(--GPH-secondary);
    color: white;
}

.GPH-badge-info {
    background-color: var(--GPH-info);
    color: white;
}

.GPH-badge-dark {
    background-color: #343a40;
    color: white;
}
/* 12. Branding Header Alignment v2.0.9 */
#GPH-standard-header { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    background: #ffffff !important; 
    padding: 15px !important; 
    border-radius: 10px !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    margin-bottom: 25px !important;
    border-bottom: 3px solid #01A79B !important;
}

#GPH-h-left { flex: 0 0 120px !important; text-align: left !important; }
#GPH-h-right { flex: 0 0 120px !important; text-align: right !important; }
#GPH-h-title { flex: 1 !important; text-align: center !important; }

#GPH-standard-header img { 
    max-height: 55px !important; 
    width: auto !important; 
    object-index: contain !important; 
}

/* 5. Estilos Específicos de PQRS (v2.5.2) */
.GPH-btn-gestion { 
    background: var(--GPH-primary) !important; 
    color: white !important; 
    border: none; 
    padding: 6px 12px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: bold; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
    text-decoration: none !important;
}
.GPH-btn-gestion:hover { background: var(--GPH-primary-hover) !important; transform: translateY(-1px); }

/* Detalle y Gestión de PQR */
.GPH-detail-item { margin-bottom: 12px !important; }
.GPH-detail-label { display: block !important; color: #000 !important; font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase !important; margin-bottom: 2px !important; letter-spacing: 0.3px !important; }
.GPH-detail-value { display: block !important; color: #444 !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.4 !important; }

.GPH-msg-bubble { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    padding: 15px; 
    margin-top: 5px; 
    font-style: italic; 
    color: #475569; 
    position: relative; 
}
.GPH-msg-bubble::before { content: '"'; font-family: serif; font-size: 40px; color: rgba(1, 167, 155, 0.1); position: absolute; left: 10px; top: -5px; }

.GPH-form-group { margin-bottom: 15px !important; }
.GPH-form-group label { display: block !important; color: #000 !important; font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase !important; margin-bottom: 4px !important; }

/* Badges de PQRS */
.GPH-badge-rad { background: #fff3e0 !important; color: #ef6c00 !important; }
.GPH-badge-proc { background: #e3f2fd !important; color: #1565c1 !important; }
.GPH-badge-res { background: #e8f5e9 !important; color: #2e7d32 !important; }
.GPH-badge-arch { background: #f1f1f1 !important; color: #555 !important; }

.GPH-ans-expired { border-left: 4px solid var(--GPH-danger) !important; background-color: rgba(220, 53, 69, 0.02) !important; }

/* Layout de Gestión */
.GPH-mgmt-layout { display: flex; gap: 20px; flex-wrap: wrap; }
.GPH-mgmt-col { flex: 1; min-width: 300px; }

@media (max-width: 768px) {
    #GPH-standard-header { padding: 10px !important; }
    #GPH-standard-header img { max-height: 40px !important; }
    #GPH-h-left, #GPH-h-right { flex: 0 0 80px !important; }
    .GPH-mgmt-col { flex: 1 1 100% !important; }
}

/* 6. Utilidades y Layouts Globales (v2.5.3) */
.GPH-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.GPH-form-col { display: flex; flex-direction: column; gap: 5px; }
.GPH-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
@media (max-width: 600px) { .GPH-form-grid { grid-template-columns: 1fr; } }

.GPH-textarea { height: 150px; min-height: 150px; }
.GPH-textarea-small { min-height: 100px; }

.GPH-file-input-wrapper { position: relative; display: inline-block; }
.GPH-file-input-wrapper input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.GPH-file-name { margin-left: 10px; font-size: 12px; color: var(--GPH-text-muted); }

.GPH-card-header-simple { margin-bottom: 15px; padding: 20px; border-bottom: 1px solid #eee; }
.GPH-header-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 15px; }

.GPH-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.GPH-btn-full { width: 100%; justify-content: center; }
.GPH-btn-pagination { padding: 6px 15px !important; font-size: 12px !important; }

.GPH-config-panel { margin: 15px; background: #fbfbfb !important; border: 1px solid #eee !important; box-shadow: var(--GPH-shadow) !important; }
.GPH-panel-title { margin: 0 0 15px 0; font-size: 15px; color: var(--GPH-primary); border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; font-weight: 700; }

.GPH-filter-panel { margin: 15px; background: #fbfbfb !important; border: 1px solid #eee !important; box-shadow: var(--GPH-shadow) !important; }
.GPH-filter-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
.GPH-filter-col { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 5px; }
.GPH-filter-col-wide { flex: 2; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.GPH-filter-actions { display: flex; gap: 10px; }

.GPH-pagination { margin-top: 25px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.GPH-page-link { padding: 6px 12px !important; font-size: 12px !important; min-width: 35px; }
.GPH-pagination-info { text-align: center; margin-top: 10px; font-size: 11px; color: var(--GPH-text-muted); }

.GPH-hidden { display: none !important; }

.GPH-mgmt-col-highlight { background: #f4fbfa !important; padding: 20px !important; border-radius: 10px !important; border: 1px solid #c8e6c9 !important; }
.GPH-mgmt-subtitle { margin: 0 0 15px 0; color: #2e7d32; font-size: 14px; text-transform: uppercase; border-bottom: 2px solid #2e7d32; padding-bottom: 5px; display: inline-block; }
.GPH-subtitle-cyan { color: #018C82; border-bottom-color: var(--GPH-primary); }
.GPH-label-highlight { color: var(--GPH-primary) !important; }
.GPH-attachment-section { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ddd; }
.GPH-link-btn { color: var(--GPH-primary); font-weight: 600; font-size: 13px; text-decoration: none; }
.GPH-response-content { color: #444; line-height: 1.6; font-size: 15px; background: white; padding: 20px; border-radius: 10px; }
.GPH-no-response { text-align: center; padding: 30px; color: #999; font-style: italic; }
.GPH-actions-footer { margin-top: 30px; display: flex; justify-content: flex-start; }
.GPH-actions-end { display: flex; justify-content: flex-end; }
.GPH-flex-config { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.GPH-check-group { flex: 1; min-width: 120px; }
.GPH-input-group { flex: 1; min-width: 120px; }