/* RESET GENERAL */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6fa;
    color: #333333;
}

.layout{
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR CORPORATIVO MODIFICADO PARA LOGOTIPO COMPLETO */
.sidebar {
    width: 250px;
    background-color: #3f3d56; 
    color: #ffffff;
    position: fixed;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e1e4e8;
    z-index: 100;
}

.brand {
    padding: 15px;
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e1e4e8;
    height: 115px; 
}

.brand-logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-text-fallback {
    color: #3f3d56;
    font-weight: bold;
    font-size: 18px;
}

.menu-container {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    overflow-y: auto;
    flex: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.menu-item i {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.menu-parent {
    justify-content: flex-start;
    position: relative;
}

.arrow-indicator {
    position: absolute;
    right: 20px;
    font-size: 11px !important;
}

.menu-submenu {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.15);
    transition: max-height 0.25s ease-out;
}

.menu-submenu a {
    display: block;
    padding: 11px 20px 11px 52px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.menu-submenu a:hover, .sub-active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-group-wrapper.open .menu-submenu {
    max-height: 350px; 
}

.active-link {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

/* MAIN CONTENT AREA */
.main {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: 30px;
    background-color: #f4f6fa;
}

.topbar {
    background-color: #0b1354; 
    padding: 25px 40px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.topbar-left h1 { font-size: 28px; font-weight: 800; }
.topbar-left p { font-size: 12px; color: #94a3b8; }
.topbar-right { display: flex; align-items: center; gap: 15px; }

.role-badge {
    background-color: #ef4444;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
}

.date-box {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 4px;
    color: #e2e8f0;
}

/* CARDS DASHBOARD */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.dashboard-card {
    border-radius: 6px;
    padding: 20px 25px;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 105px;
}

.card-content h2 { font-size: 32px; font-weight: 700; }
.card-content span { font-size: 13px; opacity: 0.9; }
.card-icon i { font-size: 32px; opacity: 0.35; }

.card-green { background-color: #82ca9c; }       
.card-pink { background-color: #f3afb3; }        
.card-light-cyan { background-color: #bce9eb; }  
.card-light-blue { background-color: #cfe2f3; }  
.card-medium-green { background-color: #27ae60; } 
.card-red { background-color: #c0392b; }         
.card-dark-cyan { background-color: #1687a7; }   
.card-navy-blue { background-color: #2b5876; }   

/* CRM VISTA RESUMEN EMPRESAS */
.company-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    padding: 20px;
    border-radius: 6px;
    border-left: 5px solid #0b1354;
}

.company-meta h2 { color: #0b1354; font-size: 20px; font-weight: 700; }
.company-meta p { font-size: 13px; color: #64748b; }
.company-stats-badges { display: flex; gap: 15px; }

.stat-badge-item { padding: 10px 20px; border-radius: 4px; color: #ffffff; text-align: center; min-width: 100px; }
.stat-badge-item span { display: block; font-size: 11px; text-transform: uppercase; opacity: 0.8; }
.stat-badge-item strong { font-size: 22px; font-weight: 700; }

.b-purple { background-color: #6366f1; }
.b-amber { background-color: #f59e0b; }

/* ========================================================
   SISTEMA DE ESTILO EN CUADRÍCULA 
   ======================================================== */
.panel-container {
    background: #ffffff;
    border-radius: 8px;
    padding: 25px;
    border: 1px solid #e4e6fc;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.01);
}

.panel-header-title {
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.styled-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.form-section-card {
    grid-column: span 3;
    background-color: #fdfdfd;
    border: 1px solid #eef1f6;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}

.form-section-title {
    font-size: 13px;
    text-transform: uppercase;
    color: #4f46e5;
    margin-bottom: 18px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 6px;
    font-weight: 700;
}

.form-grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
}

.form-field-group label {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}

.card-full-span {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
}

.section-textarea-label {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}

.form-submit-row {
    grid-column: span 3;
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
}

input, select, textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 13px;
    color: #334155;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn-submit-form {
    background-color: #0b1354;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-submit-form:hover {
    background-color: #121d72;
}

.admin-download-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-download-excel {
    background-color: #10b981;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
}

/* ACCIONES DE TABLAS ACCIONES */
.btn-action-delete {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
}

.btn-action-delete-small {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-action-update {
    background-color: #4f46e5;
    color: #ffffff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* GLPI CONTENEDOR MODIFICADO PARA REPARAR LA BARRA LATERAL COLAPSADA */
.glpi-container {
    display: flex;
    background: #ffffff;
    border: 1px solid #e4e6fc;
    border-radius: 6px;
    gap: 10px;
}

.glpi-main-column {
    flex: 1;
    padding: 25px;
}

.section-divider-title {
    margin-bottom: 15px;
    color: #0b1354;
    font-size: 14px;
    border-bottom: 2px solid #e4e6fc;
    padding-bottom: 6px;
    font-weight: 700;
}

/* BARRA LATERAL REPARADA - EVITA EL CORTE DE LOS SELECTS */
.glpi-side-panel {
    width: 280px;
    min-width: 280px;
    background: #fdfdfd;
    border-left: 1px solid #edf2f7;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.glpi-side-section-header {
    background: #0b1354;
    padding: 12px;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glpi-side-fields-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.glpi-side-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.glpi-side-row label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: block;
    margin-bottom: 6px;
}

.glpi-side-row select {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.glpi-side-footer {
    margin-top: 30px;
    width: 100%;
}

.glpi-submit-btn {
    background: #4f46e5;
    color: #ffffff;
    border: none;
    padding: 14px;
    width: 100%;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
    transition: background 0.2s;
}

.glpi-submit-btn:hover {
    background: #3b32c4;
}

/* SECCIÓN INTEGRAL DE GESTIÓN DE CASOS (WORKFLOW MANAGEMENT) */
.management-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

.timeline-box {
    margin-top: 25px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 20px;
}

.timeline-item {
    border-left: 3px solid #cbd5e1;
    padding-left: 15px;
    margin-bottom: 15px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    background: #4f46e5;
    border-radius: 50%;
    left: -7px;
    top: 3px;
}

.timeline-meta {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.timeline-comment {
    font-size: 13px;
    color: #334155;
    background: #ffffff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* COLOR PILLS EXTENDIDO PARA LOS ESTADOS TI */
.pill-progress { background-color: #e0e7ff; color: #4338ca; }
.pill-paused { background-color: #fef3c7; color: #d97706; }

/* CHARTS GRIDS SUPPORT */
.charts-grid-support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.chart-mini-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}

.charts-container {
    margin-top: 25px;
}

.chart-box-full {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 25px;
    border: 1px solid #e1e4e8;
}

.chart-header {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.chart-wrapper {
    position: relative;
    height: 350px;
    width: 100%;
}

/* TABLAS INDUSTRIALES */
.table-responsive { width: 100%; overflow-x: auto; }
.styled-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.table-compact th, .table-compact td { padding: 8px 12px !important; border-right: 1px solid #e2e8f0; }
.styled-table thead tr { background-color: #0b1354; color: #ffffff; }
.styled-table th { font-weight: 600; text-transform: uppercase; font-size: 11px; padding: 12px; text-align: left; }
.styled-table td { border-bottom: 1px solid #e2e8f0; color: #475569; padding: 12px; }
.styled-table tbody tr:nth-of-type(even) { background-color: #f8fafc; }

.badge-tipo { background-color: #e2e8f0; color: #334155; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.badge-consecutivo { font-weight: bold; color: #4f46e5; background-color: #eeebff; padding: 4px 8px; border-radius: 4px; text-decoration: none; display: inline-block; }
.badge-consecutivo:hover { background-color: #4f46e5; color: #ffffff; }
.status-pill { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; display: inline-block; }
.pill-open { background-color: #dcfce7; color: #15803d; }
.pill-closed { background-color: #fee2e2; color: #b91c1c; }

/* TOAST FLOTANTES */
#toast, .error-toast { position: fixed; top: 20px; right: 20px; padding: 16px 25px; border-radius: 4px; color: #ffffff; font-weight: 600; z-index: 1000; }
#toast { background-color: #10b981; }
.error-toast { background-color: #ef4444; }