/* =======================================================
   Estilos e Identidad Visual - Colombia Compra Eficiente
   ======================================================= */

:root {
   --cce-primary: #004884;
   --cce-secondary: #0072CE;
   --cce-accent: #FFCD00;
   --cce-dark: #1E293B;

   /* Sobreescritura directa de variables de logo GLPI 11 */
   --glpi-logo-dark-login: url("/plugins/cce/pics/logo_cce-v2.png");
   --glpi-logo-light-login: url("/plugins/cce/pics/Logo_ANCP_CCE_blanco.png");
   --glpi-logo-dark: url("/plugins/cce/pics/logo_cce-v2.png");
   --glpi-logo-light: url("/plugins/cce/pics/Logo_ANCP_CCE_blanco.png");
   --glpi-logo-light-reduced: url("/plugins/cce/pics/favicon-2024.png");
   --glpi-logo-dark-reduced: url("/plugins/cce/pics/favicon-2024.png");
}

/* 1. Logo en Pantalla de Login (Grande y Centrado) */
.page-anonymous .glpi-logo {
   content: none !important;
   background-image: url("/plugins/cce/pics/logo_cce-v2.png") !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
   width: 360px !important;
   height: 100px !important;
   display: block !important;
   margin: 0 auto 1.5rem auto !important;
}

[data-glpi-theme-dark="1"] .page-anonymous .glpi-logo {
   background-image: url("/plugins/cce/pics/Logo_ANCP_CCE_blanco.png") !important;
}

/* 2. Logo en Menú Lateral (Sidebar) y Barra Superior (Topbar / Header) */

/* 2.1 Barra Superior / Header (cuando no hay menú lateral o en vista horizontal/autoservicio) */
header.navbar .navbar-brand,
.topbar .navbar-brand {
   display: inline-flex !important;
   justify-content: flex-start !important;
   align-items: center !important;
   width: auto !important;
   max-width: fit-content !important;
   padding: 6px 12px 6px 0 !important;
   margin: 0 1.5rem 0 0 !important;
   text-align: left !important;
}

header.navbar .navbar-brand .glpi-logo,
.topbar .navbar-brand .glpi-logo {
   content: none !important;
   background-image: url("/plugins/cce/pics/Logo_ANCP_CCE_blanco.png") !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: left center !important;
   width: 210px !important;
   height: 52px !important;
   max-height: 55px !important;
   display: block !important;
   margin: 0 !important;
}

/* 2.2 Barra Lateral (Sidebar) en modo expandido */
aside.sidebar .navbar-brand,
aside .navbar-brand {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   width: 100% !important;
   padding: 12px 10px !important;
   margin: 0 auto !important;
   text-align: center !important;
}

aside.sidebar .navbar-brand .glpi-logo,
aside .glpi-logo {
   content: none !important;
   background-image: url("/plugins/cce/pics/Logo_ANCP_CCE_blanco.png") !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
   width: 210px !important;
   height: 55px !important;
   max-height: 60px !important;
   display: block !important;
   margin: 0 auto !important;
   transition: all 0.2s ease-in-out !important;
}

/* 2.3 Barra Lateral (Sidebar) contraída/colapsada: mostrar Favicon / Escudo CCE */
body.navbar-collapsed aside.sidebar .navbar-brand,
body.navbar-collapsed aside .navbar-brand,
body.navbar-collapsed .sidebar .navbar-brand {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   width: 100% !important;
   padding: 12px 0 !important;
   margin: 0 auto !important;
}

body.navbar-collapsed aside.sidebar .glpi-logo,
body.navbar-collapsed aside .glpi-logo,
body.navbar-collapsed .sidebar .glpi-logo,
body.navbar-collapsed .navbar-brand .glpi-logo {
   content: none !important;
   background-image: url("/plugins/cce/pics/favicon-2024.png") !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
   width: 38px !important;
   height: 38px !important;
   max-height: 38px !important;
   display: block !important;
   margin: 0 auto !important;
   border-radius: 4px !important;
}

/* 3. Estilos de la Pantalla de Login */
.page-anonymous {
   background: #F8FAFC !important;
}

.page-anonymous .main-content-card {
   border-radius: 12px !important;
   box-shadow: 0 10px 30px rgba(0, 72, 132, 0.12) !important;
   border: 1px solid #E2E8F0 !important;
}

.page-anonymous .btn-primary {
   background-color: #004884 !important;
   border-color: #004884 !important;
   color: #FFFFFF !important;
   font-weight: 600 !important;
   border-radius: 8px !important;
   padding: 10px 16px !important;
}

.page-anonymous .btn-primary:hover {
   background-color: #003360 !important;
   border-color: #003360 !important;
}

.page-anonymous .form-check-input:checked {
   background-color: #004884 !important;
   border-color: #004884 !important;
}

/* 4. Estilos Formato Oficial RFC - Plan de Trabajo y Cronograma */
.cce-schedule-table-wrap,
.cce-table-scroll-wrap {
   overflow-x: auto !important;
   overflow-y: hidden !important;
   -webkit-overflow-scrolling: touch;
   margin-bottom: 0.5rem;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   background: #ffffff;
}

.cce-schedule-table-wrap::-webkit-scrollbar,
.cce-table-scroll-wrap::-webkit-scrollbar {
   height: 10px !important;
}

.cce-schedule-table-wrap::-webkit-scrollbar-track,
.cce-table-scroll-wrap::-webkit-scrollbar-track {
   background: #f1f5f9;
   border-radius: 4px;
}

.cce-schedule-table-wrap::-webkit-scrollbar-thumb,
.cce-table-scroll-wrap::-webkit-scrollbar-thumb {
   background: #0072ce;
   border-radius: 4px;
}

.cce-schedule-table-wrap::-webkit-scrollbar-thumb:hover,
.cce-table-scroll-wrap::-webkit-scrollbar-thumb:hover {
   background: #004884;
}

[data-glpi-theme-dark="1"] .cce-schedule-table-wrap,
[data-glpi-theme-dark="1"] .cce-table-scroll-wrap {
   border-color: #334155 !important;
   background: #1e293b !important;
}

[data-glpi-theme-dark="1"] .cce-schedule-table-wrap::-webkit-scrollbar-track,
[data-glpi-theme-dark="1"] .cce-table-scroll-wrap::-webkit-scrollbar-track {
   background: #0f172a !important;
}

.cce-schedule-table {
   min-width: 1720px !important;
   width: 100% !important;
   table-layout: fixed !important;
}

.cce-schedule-table th,
.cce-schedule-table td {
   vertical-align: middle !important;
   padding: 0.55rem 0.65rem !important;
}

.cce-datetime-cell {
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
   font-size: 0.84rem !important;
   letter-spacing: -0.2px;
   white-space: nowrap !important;
}

.cce-evidence-cell {
   width: 330px !important;
   min-width: 330px !important;
}

/* 4.1 Fecha y Hora Final - Alta visibilidad (Azul CCE, sin dependencia del theme/amarillo) */
.cce-act-end,
input.cce-act-end {
   color: #004884 !important;
   background-color: #f0f7fc !important;
   font-weight: 700 !important;
   border: 1px solid #b9daf3 !important;
}

.cce-act-end-text {
   color: #004884 !important;
   font-weight: 700 !important;
}

.cce-plan-global-end {
   background-color: #004884 !important;
   color: #ffffff !important;
   font-weight: 700 !important;
}

/* 4.2 Tabla de Riesgos Asociados al Cambio (Parte B) */
#cce_risks_table {
   min-width: 980px !important;
   width: 100% !important;
}

.cce-risk-applies-col {
   width: 140px !important;
   min-width: 130px !important;
   text-align: center !important;
   white-space: nowrap !important;
}

.cce-risk-applies-select,
#cce_risks_table select[name*="[applies]"] {
   min-width: 95px !important;
   width: 100% !important;
   max-width: 125px !important;
   margin: 0 auto !important;
   display: inline-block !important;
   text-align: center !important;
   font-weight: 500 !important;
}

/* 4.3 Tabla de Cierre del Cambio y Evidencias Documentales (Sección 4) */
#cce_evidences_table {
   min-width: 1100px !important;
   width: 100% !important;
}

.cce-evidence-status-col {
   width: 155px !important;
   min-width: 150px !important;
   text-align: center !important;
   white-space: nowrap !important;
}

.cce-evidence-status-select,
#cce_evidences_table select[name*="[status]"] {
   min-width: 140px !important;
   width: 100% !important;
   display: inline-block !important;
   font-weight: 500 !important;
}

/* 4.4 Tabla de Prerrequisitos (Sección 1) y Lecciones Aprendidas (Sección 5) */
#cce_prerequisites_table {
   min-width: 850px !important;
   width: 100% !important;
}

#cce_lessons_table {
   min-width: 950px !important;
   width: 100% !important;
}

/* 4.5 Campo de Observaciones en Sección 4 (Cierre de Cambio) */
.cce-evidence-notes {
   font-size: 0.85rem !important;
   line-height: 1.4 !important;
   border-color: #cbd5e1 !important;
}

.cce-evidence-notes:focus {
   border-color: #0072ce !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 114, 206, 0.15) !important;
}

/* 5. Ocultar bloques/acordeones nativos en la vista de Cambios (Change):
      Análisis, Planes y Objetos de asistencia vinculados */
body[data-itemtype="Change"] .itil-right-side .accordion-item:has(#analysis),
body[data-itemtype="Change"] .itil-right-side .accordion-item:has(#plans),
body[data-itemtype="Change"] .itil-right-side .accordion-item:has(#linked_itilobjects),
form[action*="change.form.php"] .itil-right-side .accordion-item:has(#analysis),
form[action*="change.form.php"] .itil-right-side .accordion-item:has(#plans),
form[action*="change.form.php"] .itil-right-side .accordion-item:has(#linked_itilobjects),
#itil-form .itil-right-side .accordion-item:has(#analysis),
#itil-form .itil-right-side .accordion-item:has(#plans),
#itil-form .itil-right-side .accordion-item:has(#linked_itilobjects) {
   display: none !important;
}

/* =======================================================
   6. Visualizador de Solicitudes Anteriores (GLPI 9 Histórico)
   ======================================================= */
.cce-legacy-btn {
   display: inline-flex !important;
   align-items: center !important;
   gap: 0.4rem !important;
   background: linear-gradient(135deg, #004884 0%, #0072ce 100%) !important;
   color: #ffffff !important;
   border: 1px solid rgba(255, 255, 255, 0.25) !important;
   font-weight: 500 !important;
   font-size: 0.85rem !important;
   padding: 0.4rem 0.85rem !important;
   border-radius: 6px !important;
   box-shadow: 0 2px 6px rgba(0, 72, 132, 0.2) !important;
   transition: all 0.2s ease-in-out !important;
   cursor: pointer !important;
   text-decoration: none !important;
}

.cce-legacy-btn:hover {
   background: linear-gradient(135deg, #003666 0%, #005fa8 100%) !important;
   color: #ffffff !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 4px 10px rgba(0, 72, 132, 0.3) !important;
}

.cce-legacy-btn i {
   font-size: 1.1rem !important;
}

/* Modal Overlay */
.cce-legacy-modal-backdrop {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   width: 100vw !important;
   height: 100vh !important;
   background: rgba(15, 23, 42, 0.65) !important;
   backdrop-filter: blur(4px) !important;
   z-index: 1060 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cce-legacy-modal-backdrop.cce-active {
   opacity: 1 !important;
   visibility: visible !important;
}

.cce-legacy-modal-container {
   background: #ffffff !important;
   border-radius: 12px !important;
   width: 92% !important;
   max-width: 1050px !important;
   max-height: 88vh !important;
   display: flex !important;
   flex-direction: column !important;
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
   border: 1px solid #e2e8f0 !important;
   transform: scale(0.96);
   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden !important;
}

.cce-legacy-modal-backdrop.cce-active .cce-legacy-modal-container {
   transform: scale(1);
}

.cce-legacy-modal-header {
   background: linear-gradient(135deg, #004884 0%, #003366 100%) !important;
   color: #ffffff !important;
   padding: 1.1rem 1.5rem !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   border-bottom: 3px solid #ffcd00 !important;
}

.cce-legacy-modal-title {
   margin: 0 !important;
   font-size: 1.2rem !important;
   font-weight: 600 !important;
   display: flex !important;
   align-items: center !important;
   gap: 0.6rem !important;
   color: #ffffff !important;
}

.cce-legacy-modal-close {
   background: rgba(255, 255, 255, 0.15) !important;
   border: none !important;
   color: #ffffff !important;
   width: 34px !important;
   height: 34px !important;
   border-radius: 50% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   cursor: pointer !important;
   transition: background 0.2s ease !important;
   font-size: 1.2rem !important;
}

.cce-legacy-modal-close:hover {
   background: rgba(255, 255, 255, 0.3) !important;
}

.cce-legacy-modal-body {
   padding: 1.25rem 1.5rem !important;
   overflow-y: auto !important;
   flex: 1 1 auto !important;
   background: #f8fafc !important;
}

.cce-legacy-search-box {
   background: #ffffff !important;
   border: 1px solid #cbd5e1 !important;
   border-radius: 8px !important;
   padding: 0.5rem 0.85rem !important;
   font-size: 0.9rem !important;
   width: 100% !important;
   max-width: 380px !important;
   transition: border-color 0.2s, box-shadow 0.2s !important;
}

.cce-legacy-search-box:focus {
   outline: none !important;
   border-color: #0072ce !important;
   box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.15) !important;
}

.cce-legacy-table {
   width: 100% !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   background: #ffffff !important;
   border-radius: 8px !important;
   overflow: hidden !important;
   border: 1px solid #e2e8f0 !important;
}

.cce-legacy-table th {
   background: #edf2f7 !important;
   color: #475569 !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.03em !important;
   padding: 0.75rem 1rem !important;
   border-bottom: 2px solid #cbd5e1 !important;
}

.cce-legacy-table td {
   padding: 0.75rem 1rem !important;
   font-size: 0.88rem !important;
   color: #1e293b !important;
   border-bottom: 1px solid #f1f5f9 !important;
   vertical-align: middle !important;
}

.cce-legacy-table tr:hover td {
   background-color: #f8fafc !important;
}

.cce-legacy-detail-box {
   background: #ffffff !important;
   border-radius: 8px !important;
   border: 1px solid #e2e8f0 !important;
   padding: 1.25rem !important;
   margin-top: 1rem !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Campos estructurados y tarjetas de detalle GLPI 9 */
.cce-legacy-formatted-details .cce-detail-section h6 {
   font-size: 0.92rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.03em !important;
}

.cce-legacy-formatted-details .border-start {
   border-left-width: 4px !important;
   transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.cce-legacy-formatted-details .border-start:hover {
   transform: translateY(-1px) !important;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06) !important;
}