/* ==========================================================================
   SEGMENTO 1: PALETA DE COLORES PROFESIONAL (Variables)
   ========================================================================== */
:root {
  --os-primary: #1e293b;       /* Azul pizarra oscuro para textos principales */
  --os-muted: #64748b;        /* Gris corporativo para descripciones secundarias */
  --os-blue-btn: #0284c7;     /* Azul moderno para acciones principales */
  --os-blue-hover: #0369a1;   /* Hover azul */
  --os-green-btn: #10b981;    /* Verde esmeralda para consultas de estado */
  --os-green-hover: #059669;  /* Hover verde */
  --os-border: #e2e8f0;       /* Gris claro para líneas y bordes sutiles */
}
/* ==========================================================================
   SEGMENTO 2: RESET Y CENTRADO DE PANTALLA GENERAL
   ========================================================================== */
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  background-color: #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; 
  align-items: center !important;     
}

body, input, select, textarea {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--os-primary);
}

b, strong {
  font-weight: 600;
}

blockquote {
  margin: 1em 40px;
}
/* ==========================================================================
   SEGMENTO 3: TIPOGRAFÍA, ENLACES Y ESTRUCTURAS ELEMENTALES
   ========================================================================== */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--os-border);
  margin: 1em 0;
  padding: 0;
}

small {
  font-size: 85%;
  color: var(--os-muted);
}

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 30px;
}

img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; font-weight: 500; }

a, .link {
  color: var(--os-blue-btn);
  text-decoration: none;
  display: inline;
  margin-bottom: 1px;
  transition: color 0.2s ease;
}
a:hover, .link:hover {
  color: var(--os-blue-hover);
  border-bottom: 1px solid var(--os-blue-hover);
  margin-bottom: 0;
  cursor: pointer;
}

h1 {
  color: #0f172a;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
}
h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--os-primary);
}
h2, .subject {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}
/* ==========================================================================
   SEGMENTO 4: CLASES AUXILIARES Y PAGINACIÓN
   ========================================================================== */
.centered { text-align: center; }
.hidden { display: none; }
.faded { color: var(--os-muted); }
.clear {
  clear: both;
  height: 1px;
  visibility: hidden;
}

#pagination {
  border: 0;
  margin: 25px 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
#pagination li {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
  display: inline-block;
}
#pagination li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--os-muted);
  border: 1px solid var(--os-border);
  border-radius: 6px;
  transition: all 0.2s ease;
}
#pagination li a:hover {
  color: var(--os-blue-btn);
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
#pagination .previousOff, #pagination .nextOff {
  color: #94a3b8;
  display: block;
  padding: 6px 12px;
  font-weight: 500;
}
#pagination .next a, #pagination .previous a { font-weight: 600; }
#pagination .active {
  color: #ffffff;
  background-color: var(--os-blue-btn);
  font-weight: 600;
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 6px;
}
/* ==========================================================================
   SEGMENTO 5: ALERTAS SEMÁNTICAS Y BOTONES MODERNOS
   ========================================================================== */
#msg_notice {
  margin: 0 0 15px 0; padding: 12px 16px 12px 42px; line-height: 1.5;
  border: 1px solid #bbf7d0; border-radius: 8px; color: #166534;
  background: url('../images/icons/ok.png') 14px 50% no-repeat #f0fdf4;
}
#msg_warning, .warning-banner {
  margin: 0 0 15px 0; padding: 12px 16px 12px 42px; line-height: 1.5;
  border: 1px solid #fed7aa; border-radius: 8px; color: #9a3412;
  background: url('../images/icons/alert.png') 14px 50% no-repeat #fff7ed;
}
#msg_error {
  margin: 0 0 15px 0; padding: 12px 16px 12px 42px; line-height: 1.5;
  border: 1px solid #fecaca; border-radius: 8px; color: #991b1b;
  background: url('../images/icons/error.png') 14px 50% no-repeat #fef2f2;
}
#msg_info { 
  margin: 0 0 15px 0; padding: 12px 16px 12px 16px; color: #0369a1; 
  border: 1px solid #bae6fd; border-radius: 8px; background-color: #f0f9ff; 
}
.warning { background: #fef08a; padding: 2px 4px; border-radius: 4px; font-style: italic; }
.warning strong { text-transform: uppercase; color: #991b1b; font-style: normal; }
.error { color: #dc2626; }
.error input { border: 1px solid #fca5a5; background-color: #fff5f5; }

.button, .button:visited {
  border: none !important; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 14px !important; font-weight: 600 !important; padding: 12px 24px !important;
  max-width: 100% !important; width: 100% !important; text-align: center !important; color: #fff !important;
  text-decoration: none !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  text-shadow: none !important; position: relative; cursor: pointer; font-family: inherit !important;
  transition: all 0.2s ease-in-out !important; background-color: var(--os-blue-btn) !important;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
.button:active { transform: translateY(0); box-shadow: none !important; }

.green.button:hover { background-color: var(--os-green-hover) !important; }
.blue.button, .blue.button:visited { background-color: var(--os-blue-btn) !important; }
.blue.button:hover { background-color: var(--os-blue-hover) !important; }
/* ==========================================================================
   SEGMENTO 6: CONTENEDOR CENTRAL DE LA TARJETA Y MENÚ SUPERIOR
   ========================================================================== */
#container {
  background: #ffffff !important; 
  max-width: 960px !important; 
  width: 92% !important;
  margin: auto !important; 
  padding: 30px !important; 
  box-sizing: border-box !important;
  border: 1px solid var(--os-border) !important; 
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

/*#content {
    
    width: 100% !important;
    max-width: 600px !important; /* Ajuste este valor según el ancho que desee 

    
    margin: 40px auto !important; 

   
    text-align: center !important; 
    
    padding: 10px 0 !important;
    height: auto !important;
}*/

#content {
    width: 120% !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    text-align: center !important;
    /* padding: 10px 0 !important; */
    height: auto !important;
}

#content p, 
#content div:last-child {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}



/* 4. Para centrar el cuadro blanco del formulario que está dentro de #content */
#content form, 
#content .login-box,
#content > div { 
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}




#header {
  position: relative; height: auto !important; min-height: 75px; padding: 0 0 20px 0 !important;
  display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important;
  align-items: center !important; border-bottom: 1px solid var(--os-border) !important; margin-bottom: 20px !important;
}



#logo { height: auto !important; max-width: 100% !important; }

/*#header #logo img { 
max-height: 95px; 
max-width: 100% !important; 
width: auto; 
height: auto; 
vertical-align: middle; }*/


#header #logo img { 
height: 90%;
width: 90%;
 }




.valign-helper { display: none !important; }
/*#header p { width: auto !important; margin: 0; padding: 0 !important; font-size: 0.9rem; }
#header p a { color: var(--os-blue-btn) !important; font-weight: 500; }*/

/* ==========================================================================
   NUEVO REDISEÑO DE MENÚ DE NAVEGACIÓN (Estilo Cards Modernas)
   ========================================================================== */

/* Contenedor del Menú: Ahora es transparente y agrupa las tarjetas */
#nav {
  margin: 10px 0 35px 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important; /* Eliminamos el fondo de barra rígido */
  border: none !important; /* Quitamos el borde limitante */
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important; /* Espacio uniforme entre cada Card */
  white-space: normal !important;
  list-style: none !important;
}

/* Cada elemento de la lista pasa a ser una tarjeta independiente */
#nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block !important;
  flex: 1 1 200px !important; /* Permite que las tarjetas crezcan proporcionalmente */
  max-width: 280px !important; /* Límite para que no se deformen en pantallas gigantes */
}

/* Estilo Base de las Cards */
#nav li a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 54px !important; /* Un poco más altas para dar presencia de Card */
  box-sizing: border-box !important;
  padding: 12px 16px 12px 42px !important; /* Espacio extra a la izquierda para el icono */
  
  /* Look de Tarjeta Premium */
  background-color: #ffffff !important; 
  color: #475569 !important; /* Texto gris pizarra corporativo muy legible */
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important; /* Esquinas redondeadas modernas */
  
  /* Sombra sutil que aporta profundidad */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
  
  background-position: 16px center !important; /* Ajuste preciso del icono nativo */
  background-repeat: no-repeat !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Animación ultra suave */
}

/* Tarjeta Activa (La página donde se encuentra el usuario actualmente) */
#nav li a.active {
  background-color: #ffffff !important;
  color: #0284c7 !important; /* Texto en azul de tu marca */
  border-color: #0284c7 !important; /* Resalta el borde con el color principal */
  box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.08), 0 4px 6px -4px rgba(2, 132, 199, 0.08) !important;
}

/* Efecto Hover: Movimiento e iluminación profesional al pasar el mouse */
#nav li a:hover {
  background-color: #f8fafc !important; /* Cambio sutil de fondo */
  color: #0284c7 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important; /* Eleva la tarjeta suavemente */
  
  /* Incrementa la sombra simulando que la tarjeta se eleva */
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

/* Iconos originales de osTicket (Se adaptan automáticamente a las nuevas Cards) */
#nav li a.home { background-image: url('../images/icons/home.png') !important; }
#nav li a.kb { background-image: url('../images/icons/kb.png') !important; }
#nav li a.new { background-image: url('../images/icons/new.png') !important; }
#nav li a.status { background-image: url('../images/icons/status.png') !important; }
#nav li a.tickets { background-image: url('../images/icons/tix.png') !important; }

/* Soporte para idiomas de derecha a izquierda (RTL) */
.rtl #nav li a {
  background-position: right 16px center !important;
  padding-left: 16px !important;
  padding-right: 42px !important;
}

/* ==========================================================================
   AJUSTE RESPONSIVE (Cards en Pantallas Móviles)
   ========================================================================== */
@media (max-width: 768px) {
  #nav {
    flex-direction: column !important; /* Se apilan en vertical en celulares */
    gap: 12px !important;
  }
  #nav li {
    max-width: 100% !important; /* Toman el ancho completo en teléfonos */
    width: 100% !important;
  }
}

/* ==========================================================================
   SEGMENTO 7: COLUMNAS FLEXIBLES Y BASE DE CONOCIMIENTO (FAQ)
   ========================================================================== */



#content-pipe {
    padding: 10px 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column;
    /* gap: 30px !important; */
    align-items: stretch;
    /* flex-wrap: nowrap; */
}








.main-content { width: auto !important; flex: 1 !important; }
#landing_page { display: flex !important; flex-direction: column !important; gap: 15px !important; }
#landing_page #new_ticket, #landing_page #check_status { width: 100% !important; max-width: 280px !important; margin-top: 0 !important; box-sizing: border-box !important; }
#landing_page h1, #landing_page h2, #landing_page h3 { margin-bottom: 12px; }

/*#footer { text-align: center; font-size: 0.8rem !important; color: var(--os-muted) !important; margin-top: 40px !important; border-top: 1px solid var(--os-border) !important; padding-top: 20px !important; }*/
#footer {
    text-align: center;
    font-size: 0.8rem !important;
    color: var(--os-muted) !important;
    /* margin-top: 40px !important; */
    border-top: 1px solid var(--os-border) !important;
    /* padding-top: 20px !important; */
}



#footer a { color: var(--os-blue-btn) !important; }
#footer p { margin: 8px 0 0 0; }
#footer #poweredBy { display: block; opacity: 0.6; transition: opacity 0.2s ease; }
#footer #poweredBy:hover { opacity: 1; }

#faq { clear: both; margin: 20px 0 0 0 !important; padding: 0 !important; }
#faq ol { font-size: 14px; margin-left: 0; padding-left: 0; border-top: 1px solid var(--os-border) !important; }
#faq ol li { list-style: none; margin: 0; padding: 0; }
#faq ol li a { display: block; padding: 10px 12px !important; color: #334155 !important; border-bottom: 1px solid var(--os-border) !important; line-height: 1.5 !important; padding-left: 28px !important; background: url('../images/icons/page.png') 6px 50% no-repeat !important; transition: all 0.2s ease !important; }
#faq ol li a:hover { background-color: #f8fafc !important; color: var(--os-blue-btn) !important; border-bottom-color: #cbd5e1 !important; }
#faq .article-meta { padding: 8px 12px !important; background: #f8fafc !important; border-radius: 4px; font-size: 0.85rem; }
#kb { margin: 10px 0 !important; padding: 0 !important; }

#kb > li { padding: 14px 16px !important; height: auto !important; overflow: hidden; margin: 0 0 10px 0 !important; background: #ffffff !important; border: 1px solid var(--os-border) !important; border-radius: 8px !important; display: block; }
#kb > li h4 span { color: var(--os-muted) !important; }
#kb > li h4 a { font-size: 15px !important; font-weight: 600 !important; color: var(--os-blue-btn) !important; }
#kb > li > i { display: block; width: 32px; height: 32px; float: left; margin-right: 12px !important; background: url(../images/kb_large_folder.png) top left no-repeat; }

.featured-category { margin-top: 15px !important; width: 48% !important; display: inline-block; box-sizing: border-box; vertical-align: top; background: #f8fafc !important; padding: 15px !important; border-radius: 8px !important; border: 1px solid var(--os-border) !important; }
.category-name { display: inline-block; font-weight: 600 !important; font-size: 1.1rem !important; color: #0f172a !important; }
.featured-category i { color: var(--os-blue-btn) !important; text-shadow: none !important; display: inline-block; vertical-align: middle; }
.article-headline { margin-left: 0 !important; margin-top: 8px !important; }
.rtl .article-headline { margin-left: 0; margin-right: 0 !important; }
.article-teaser { font-size: 0.9rem !important; line-height: 1.6 !important; height: auto !important; overflow: visible !important; color: var(--os-muted) !important; margin-top: 4px !important; }
.article-title { font-weight: 500; color: #1e293b !important; }
.faq-content .article-title { font-size: 1.5rem !important; font-weight: 700 !important; color: #0f172a !important; margin-top: 15px; }








/* ==========================================================================
   SEGMENTO 8: BUSCADORES, CUADROS DE ENTRADA E INICIO DE SESIÓN
   ========================================================================== */
#kb-search { padding: 15px 0 !important; overflow: hidden; }
#kb-search div { clear: both; overflow: hidden; padding-top: 5px; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
#kb-search #query, #kb-search #cid, #kb-search #topic-id { margin: 0 !important; display: block !important; float: none !important; width: 100% !important; max-width: 250px !important; padding: 8px 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; background-color: #ffffff !important; outline: none; }
#kb-search #topic-id { max-width: 350px !important; }
#kb-search #searchSubmit { margin: 0 !important; float: none !important; position: static !important; padding: 8px 20px !important; }
#kb-search #breadcrumbs { color: var(--os-muted) !important; margin-bottom: 15px; font-size: 0.9rem !important; }
#kb-search #breadcrumbs a { color: var(--os-blue-btn) !important; font-weight: 500; }
#clientLogin { display: block !important; padding: 25px !important; border: 1px solid var(--os-border) !important; border-radius: 12px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; background: #ffffff !important; }
#clientLogin .instructions { display: block !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 20px !important; font-size: 0.95rem !important; color: var(--os-muted) !important; line-height: 1.6 !important; }
.rtl #clientLogin .instructions { padding-left: 0 !important; padding-right: 0 !important; }
#clientLogin p { clear: both; }
#clientLogin strong { font-size: 12px !important; color: #dc2626 !important; margin-bottom: 10px; }
#clientLogin #email, #clientLogin #ticketno { margin-right: 0 !important; }
#clientLogin input[type=text], #clientLogin input[type=password] { padding: 10px 14px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; margin-bottom: 15px !important; width: 100% !important; max-width: 320px !important; }
#clientLogin input[type=submit] { padding: 10px 20px !important; border-radius: 6px !important; font-weight: 600 !important; background-color: var(--os-blue-btn) !important; color: #ffffff !important; border: none !important; cursor: pointer; transition: background-color 0.2s ease !important; }
#clientLogin input[type=submit]:hover { background-color: var(--os-blue-hover) !important; }















/* ==========================================================================
   SEGMENTO 9: TABLAS DE INFORMACIÓN, ACCIONES RÁPIDAS Y AUTH EXTERNA
   ========================================================================== */
#reply { margin-top: 20px !important; padding: 20px !important; background: #f8fafc !important; border: 1px solid var(--os-border) !important; border-radius: 8px !important; }
#reply h2 { font-size: 1.3rem !important; color: #0f172a !important; margin-bottom: 15px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--os-border) !important; }
#reply > table { width: 100% !important; }
#reply table td { vertical-align: top; padding: 6px 0 !important; }
#reply textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
#reply input[type=text], #reply #response_options textarea { border: 1px solid #cbd5e1 !important; background: #ffffff !important; padding: 8px 12px !important; border-radius: 6px !important; }

.Icon { width: auto; padding-left: 24px !important; background-position: left center !important; background-repeat: no-repeat; color: var(--os-blue-btn) !important; text-decoration: none; font-weight: 500; }
.Icon.Ticket { background-image: url('../images/icons/ticket.gif'); }
.Icon.webTicket { background-image: url('../images/icons/ticket_source_web.gif'); }
.Icon.emailTicket { background-image: url('../images/icons/ticket_source_email.gif'); }
.Icon.phoneTicket { background-image: url('../images/icons/ticket_source_phone.gif'); }
.Icon.otherTicket, .Icon.apiTicket { background-image: url('../images/icons/ticket_source_other.gif'); }
.Icon.attachment { background-image: url('../images/icons/attachment.gif'); }
.Icon.file { background-image: url('../images/icons/attachment.gif'); }
.Icon.refresh { background-image: url('../images/icons/refresh.gif'); }
.Icon.thread { font-weight: 600 !important; font-size: 0.95rem !important; background-image: url('../images/icons/thread.gif?1319556657'); }

#ticketTable { border: 1px solid var(--os-border) !important; border-radius: 8px !important; overflow: hidden !important; width: 100% !important; border-collapse: separate !important; margin: 15px 0 !important; }
#ticketTable caption { padding: 12px 16px !important; text-align: left; color: #0f172a !important; background: #f8fafc !important; border: 1px solid var(--os-border) !important; border-bottom: none !important; font-weight: 600 !important; font-size: 0.95rem !important; }
#ticketTable th { height: auto !important; line-height: 1.5 !important; background: #f1f5f9 !important; border: 1px solid var(--os-border) !important; border-right: none !important; border-top: none !important; padding: 12px 14px !important; font-weight: 600 !important; color: #475569 !important; }
#ticketTable th a { color: #0f172a !important; font-weight: 600 !important; }
#ticketTable td { padding: 12px 14px !important; border: 1px solid var(--os-border) !important; border-right: none !important; border-top: none !important; color: #334155 !important; font-size: 0.9rem !important; }
#ticketTable tr.alt td { background: #f8fafc !important; }

i.refresh { color: #16a34a !important; font-size: 85% !important; vertical-align: middle; }
.states small { font-size: 75% !important; color: var(--os-muted) !important; }
.active.state { font-weight: 600 !important; color: var(--os-blue-btn) !important; }



/*.search.well { padding: 14px !important; background-color: #f8fafc !important; border: 1px solid var(--os-border) !important; border-radius: 8px !important; margin-bottom: 15px !important; margin-top: 0 !important; }*/

.search.well {
    padding: 16px !important;
    background-color: #f8fafc !important;
    border: 1px solid var(--os-border) !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;

    /* Fuerza a los elementos a ordenarse en filas limpias */
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Espacio uniforme entre cada fila */
}

/* Evita que el botón "Buscar" y el select se encimen */
.search.well form, 
.search.well .row,
.search.well div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
}



.infoTable { background: #f8fafc !important; border: 1px solid var(--os-border) !important; border-radius: 6px !important; width: 100% !important; }
.infoTable th { text-align: left; padding: 8px 12px !important; color: #475569 !important; }

.action-button { border-radius: 6px !important; color: #475569 !important; display: inline-flex !important; align-items: center !important; border: 1px solid #cbd5e1 !important; cursor: pointer; font-size: 12px !important; font-weight: 500 !important; background-color: #ffffff !important; background-image: none !important; padding: 4px 12px !important; text-decoration: none; line-height: 1.5 !important; margin-left: 6px !important; transition: all 0.2s ease !important; }
.action-button:hover { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
.action-button span, .action-button a { color: inherit !important; display: inline-block; float: none !important; }
table.padded tr > td, table.padded tr > th { height: auto !important; padding-bottom: 8px !important; }

.external-auth + .external-auth { margin-top: 8px !important; }
a.external-sign-in { text-decoration: none; display: inline-block; }
.external-auth-box { vertical-align: middle; border-radius: 6px !important; border: 1px solid #cbd5e1 !important; background-color: #ffffff !important; display: flex !important; align-items: center !important; transition: all 0.2s ease !important; }
.external-auth-box:hover { border-color: #94a3b8 !important; background-color: #f8fafc !important; }
.external-auth-icon { display: inline-flex !important; align-items: center; justify-content: center; color: #1e293b !important; width: auto !important; padding: 8px 12px !important; border-right: 1px solid var(--os-border) !important; }
.external-auth-name { color: #334155 !important; width: auto !important; padding: 8px 14px !important; line-height: 1.2 !important; font-size: 0.95rem !important; font-weight: 500 !important; }
img.sign-in-image { border: none; max-height: 36px !important; max-width: 180px !important; width: auto; height: auto; }



/* ==========================================================================
   SEGMENTO 10: HILOS DE CHAT, AVATARES Y RESPONSIVE MÓVIL
   ========================================================================== */
.login-box {  max-width: 350px !important; display: block !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important; padding: 20px !important; border: 1px solid var(--os-border) !important; border-radius: 8px !important; background-color: #ffffff !important; }
.rtl .login-box { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important; }

.sidebar { margin-bottom: 20px !important; margin-left: 0 !important; width: 100% !important; max-width: 240px !important; }
.rtl .sidebar { margin-left: 0; margin-right: 0 !important; }
.sidebar .content { padding: 16px !important; border: 1px solid var(--os-border) !important; background: #f8fafc !important; border-radius: 8px !important; }
.sidebar .content:empty { display: none !important; }
.sidebar section .header { font-weight: 600 !important; color: #0f172a !important; margin-bottom: 0.5em !important; font-size: 0.95rem !important; }
.sidebar section + section { margin-top: 20px !important; }

.row { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; }
.span4 { display: block !important; width: 100% !important; flex: 1 1 28% !important; margin: 0 !important; }
.span8 { display: block !important; width: 100% !important; flex: 1 1 66% !important; margin: 0 !important; }
.truncate { display: inline-block; width: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.image-hover a.action-button:hover, .image-hover a.action-button { color: initial !important; text-decoration: none; }

table.custom-data { margin-top: 15px !important; width: 100% !important; }
table.custom-data th { width: 25%; background-color: #f1f5f9 !important; padding: 8px 12px !important; color: #475569 !important; font-weight: 600 !important; border: 1px solid var(--os-border) !important; }
table.custom-data td { padding: 8px 12px !important; border: 1px solid var(--os-border) !important; }
table .headline, table.custom-data .headline { border-bottom: 2px solid #cbd5e1 !important; font-weight: 600 !important; background-color: #ffffff !important; }

#ticketInfo h1 { padding-bottom: 12px !important; margin-bottom: 8px !important; font-size: 1.6rem !important; border-bottom: 1px solid var(--os-border) !important; }
#ticketInfo h1 small { font-weight: 400; color: var(--os-muted) !important; }



#ticketThread::before { border-left: 2px solid var(--os-border) !important; position: absolute !important; margin-left: 40px !important; z-index: -1; content: ""; top: 0; bottom: 0; left: 0; right: auto !important; }
#ticketThread { z-index: 0; position: relative; border-bottom: 1px solid var(--os-border) !important; padding-bottom: 15px !important; }

.freetext-files { padding: 16px !important; margin-top: 15px !important; border: 1px dashed #cbd5e1 !important; border-radius: 8px !important; background-color: #f8fafc !important; }
.freetext-files .file { margin-right: 0 !important; display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; padding-top: 4px !important; font-size: 0.9rem !important; color: #334155 !important; }
.freetext-files .title { font-weight: 600 !important; margin-bottom: 8px !important; font-size: 1rem !important; color: #0f172a !important; }

/* MEDIA QUERIES (Ajustes adaptables para Teléfonos Inteligentes) */
@media (max-width: 768px) {
  html, body { height: auto !important; padding: 10px 0 !important; }
  #container { padding: 20px !important; margin: 10px auto !important; }
  #header { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
  #nav { flex-direction: column !important; gap: 4px !important; }
  #nav li, #nav li a { display: block !important; width: 100% !important; text-align: left !important; }
  #content { flex-direction: column !important; gap: 25px !important; }
  #landing_page #new_ticket, #landing_page #check_status { max-width: 100% !important; }
  #ticketTable { display: block !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; }
  .external-auth-box { width: 100% !important; justify-content: center; }
  .row { flex-direction: column !important; }
  .sidebar { max-width: 100% !important; }
  .freetext-files { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .freetext-files .file { width: 100% !important; }
  #clientLogin input[type=text], #clientLogin input[type=password] { max-width: 100% !important; }
  #ticketForm div div.captchaRow { flex-direction: column !important; align-items: flex-start !important; }
}


/* ==========================================================================
   PARCHE DE CORRECCIÓN: AJUSTE EXCLUSIVO PARA LA PÁGINA DE LOGIN
   ========================================================================== */

/* Corrige el contenedor de tres columnas para que no se encime el texto */
/*#clientLogin {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 30px !important;
}*/

/* Columna Izquierda (Texto de bienvenida/registro) */
#clientLogin > div:first-child,
#clientLogin .instructions {
  flex: 1 !important;
  min-width: 200px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Columna Derecha (Texto de primer ticket / enlaces informativos) */
#clientLogin > div:last-child {
  flex: 1 !important;
  min-width: 200px !important;
  display: block !important;
}

/* COLOUMNA CENTRAL: El cuadro del formulario (Donde están los inputs y el botón) */
#clientLogin form,
.login-box {
  flex: 1.2 !important;
  min-width: 280px !important;
  max-width: 360px !important;
  background: #ffffff !important;
  border: 1px solid var(--os-border) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Ajuste milimétrico de los campos internos (Correo y Contraseña) */
.login-box input[type="text"],
.login-box input[type="password"],
#clientLogin input[type="text"],
#clientLogin input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important; /* Eliminamos el margen antiguo */
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

/* Asegura que los textos de ayuda interna ("Soy un agente", "Acceda aquí") no se monten */
.login-box div, 
#clientLogin form div {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 4px 0 !important;
}

/* Forzamos que el botón de inicio de sesión tome el ancho completo de su tarjeta */
#clientLogin input[type="submit"] {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 12px !important;
}

/* ==========================================================================
   AJUSTE DE LOGIN PARA PANTALLAS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
  #clientLogin {
    flex-direction: column !important; /* Apila las 3 columnas en vertical en celulares */
    align-items: center !important;
    gap: 30px !important;
    padding: 20px 10px !important;
  }

  #clientLogin > div:first-child,
  #clientLogin > div:last-child,
  .login-box,
  #clientLogin form {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}
/* ==========================================================================
   REDISEÑO DE BOTONES PRINCIPALES A CARDS PREMIUM CENTRADAS
   ========================================================================== */

/* 1. Contenedor de los botones: Centrado absoluto y espacio ordenado */
#sidebar, 
#landing_page, 
td[width="295"],
.sidebar {
  display: flex !important;
  flex-direction: row !important; /* Coloca las cards lado a lado */
  justify-content: center !important; /* Centra las dos cards en la pantalla */
  align-items: center !important;
  gap: 24px !important; /* Espacio elegante entre las tarjetas */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 30px 0 !important; /* Margen superior e inferior para que respiren */
  padding: 0 !important;
  flex-wrap: wrap !important;
}

/* 2. Transformación de los botones en Cards de Alta Calidad */
#sidebar a, 
#landing_page a, 
.sidebar a,
.front-page-button,
a[href*="open.php"],
a[href*="view.php"] {
  display: flex !important;
  flex-direction: column !important; /* Alinea contenido de forma vertical interna */
  align-items: center !important;
  justify-content: center !important;
  
  /* Dimensiones profesionales de una Card */
  flex: 1 !important;
  min-height: 80px !important; 
  max-width: 280px !important; 
  width: 100% !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  
  /* Estilo visual premium e institucional */
  background: #ffffff !important; /* Fondo blanco limpio */
  color: #1e293b !important; /* Texto oscuro elegante */
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  
  /* Bordes y profundidad de diseño moderno */
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important; /* Bordes suaves redondeados */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  
  /* Efecto de transición para las animaciones */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

/* 3. Personalización por intenciones (Colores de acento sutiles en bordes) */
/* Card: Abrir un nuevo Ticket (Detalle Azul Corporativo) */
#sidebar a:first-child, 
#landing_page a:first-child,
a[href*="open.php"] {
  border-bottom: 4px solid #0284c7 !important; /* Línea inferior de acento */
}

/* Card: Ver Estado de un Ticket (Detalle Verde Esmeralda) */
#sidebar a:nth-child(2), 
#landing_page a:nth-child(2),
a[href*="view.php"] {
  border-bottom: 4px solid #10b981 !important; /* Línea inferior de acento */
}

/* 4. Efectos interactivos al pasar el ratón (Hover) */
#sidebar a:hover, 
#landing_page a:hover, 
.sidebar a:hover,
a[href*="open.php"]:hover,
a[href*="view.php"]:hover {
  background-color: #f8fafc !important; /* Cambio de fondo muy suave */
  color: #0284c7 !important; /* El texto brilla en azul institucional */
  transform: translateY(-5px) !important; /* La tarjeta se eleva fluidamente */
  
  /* La sombra se expande simulando flotación real */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 5. Asegurar que el texto de bienvenida mantenga un formato limpio abajo */
.main-content, 
#main_content, 
td[width="565"], 
td.main-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-top: 20px !important;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE (Cards en Teléfonos Celulares)
   ========================================================================== */
@media (max-width: 640px) {
  #sidebar, 
  #landing_page,
  .sidebar {
    flex-direction: column !important; /* Se apilan ordenadamente en vertical */
    gap: 16px !important;
    padding: 0 10px !important;
  }

  #sidebar a, 
  #landing_page a,
  .sidebar a,
  a[href*="open.php"],
  a[href*="view.php"] {
    max-width: 100% !important; /* Toman todo el ancho en el móvil */
    width: 100% !important;
  }
}
/* ==========================================================================
   CORRECCIÓN QUIRÚRGICA: OCULTAR SOLO ELEMENTOS DUPLICADOS ABAJO
   ========================================================================== */

/* 
   Anula el display:none general para devolver el menú superior a la vida,
   pero bloqueamos los contenedores que se renderizan duplicados abajo.
*/

/* Ocultamos de forma exclusiva el bloque lateral/inferior antiguo */
.sidebar, 
td[width="295"], 
#main_content + td {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 
   Forzamos a que el menú #nav mantenga visibles sus 3 cards premium,
   bloqueando cualquier intento de ocultamiento heredadado.
*/
#nav, 
#nav li, 
#nav li a {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Oculta los botones si se repiten sueltos abajo de la bienvenida */
.main-content + #landing_page,
#main_content + #landing_page {
  display: none !important;
}





/* ==========================================================================
   ALINEACIÓN JUSTIFICADA PARA EL TEXTO DE BIENVENIDA
   ========================================================================== */



/* 4. EL TRUCO DEFINITIVO: SE COLOCO EL FONDO BLANCO A LOS INPUTS Y A LAS CELDAS POR IGUAL */
/* 
   Se aplica el look de tarjeta premium de 42px tanto a las cajas de texto reales 
   como a la segunda celda de la tabla. Esto asegura que se pinten en ambas secciones.
*/

#container form input[type="text"], #container form input[type="password"], #container form input[type="email"], #container form input[type="tel"], #container form select, #container form tr td:nth-child(2) {

    /*display: block !important;
    /* visibility: visible !important; */
    /* opacity: 1 !important; */
    /* width: 100% !important; */
    max-width: 440px !important;
    height: 42px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    /* margin: 0 !important; */
    /* background-color: #F44336 !important; */
    /* border: 1px solid #cbd5e1 !important; */
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    /* color: #1e293b !important; */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}








/* ==========================================================================
   6. ALINEACIÓN PREMIUM DE LA BARRA DE BOTONES INFERIOR
   ========================================================================== */
#container form p.centered,
#container form p[style*="text-align"],
#container form .buttons,
#container form table + p {
  display: flex !important;
  flex-direction: row !important; /* Botones alineados horizontalmente */
  justify-content: flex-start !important; /* Alineados a la izquierda de tus cajas */
  gap: 12px !important;
  margin-top: 36px !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}

/* Estilo unificado para los tres botones de control */
#container form input[type="submit"],
#container form input[type="reset"],
#container form input[type="button"]:not([value*="detectar"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 110px !important;
  height: 40px !important; /* Altura correcta para botones */
  padding: 0 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Botón Update (Azul principal de tu marca) */
#container form input[type="submit"] {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
}
#container form input[type="submit"]:hover { background-color: #0369a1 !important; }

/* Botones Reset y Cancel (Blanco minimalista elegante) */
#container form input[type="reset"],
#container form input[type="button"]:not([value*="detectar"]) {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
#container form input[type="reset"]:hover,
#container form input[type="button"]:not([value*="detectar"]):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}



.thread-entry { margin-bottom: 20px !important; padding: 16px !important; border: 1px solid var(--os-border) !important; border-radius: 10px !important; background-color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important; position: relative; }
.thread-entry.response { background-color: #f8fafc !important; border-color: var(--os-border) !important; }
/*.thread-entry.avatar, .thread-entry.response.avatar { margin-left: 0 !important; margin-right: 0 !important; display: flex !important; gap: 16px !important; }*/
.thread-entry > .avatar { margin-left: 0 !important; display: block !important; width: 42px !important; height: 42px !important; flex-shrink: 0 !important; }
.thread-entry.response > .avatar { margin-left: initial; margin-right: 0 !important; order: -1 !important; }
img.avatar { border-radius: 50% !important; border: 1px solid #cbd5e1 !important; }
.avatar > img.avatar { width: 100%; height: 100%; object-fit: cover !important; }

.thread-entry .header { padding: 12px 16px !important; border: 1px solid var(--os-border) !important; border-bottom: 1px solid var(--os-border) !important; border-radius: 8px 8px 0 0 !important; font-size: 0.9rem !important; color: #334155 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; }
.thread-entry.avatar .header:before, .thread-entry.avatar .header:after, .thread-entry.avatar.response .header:after, .thread-entry.avatar.message .header:before, .thread-entry.avatar.message .header:after { display: none !important; }
.thread-entry.avatar .header { position: static !important; }
.thread-entry.response .header { background: #f1f5f9 !important; border-color: var(--os-border) !important; }
.thread-entry.message .header { background: #f0f9ff !important; border-color: #bae6fd !important; }
.thread-entry .header .title { max-width: 100% !important; vertical-align: middle !important; display: inline-block; margin-left: 0 !important; font-weight: 600 !important; color: #0f172a !important; }

.thread-entry .thread-body { border: 1px solid var(--os-border) !important; border-top: none !important; border-bottom: 1px solid #cbd5e1 !important; border-radius: 0 0 8px 8px !important; padding: 16px !important; background-color: #ffffff !important; line-height: 1.6 !important; color: #334155 !important; }
.thread-body .attachments { background-color: #f8fafc !important; margin: 12px -16px -16px -16px !important; position: static !important; padding: 10px 16px !important; border-top: 1px solid var(--os-border) !important; border-radius: 0 0 8px 8px !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.thread-body .attachments .filesize { margin-left: 4px !important; color: var(--os-muted) !important; font-size: 0.85rem !important; }
.thread-body .attachments a { color: var(--os-blue-btn) !important; font-weight: 500 !important; font-size: 0.9rem !important; text-decoration: none; }
.thread-body .attachments a:hover { color: var(--os-blue-hover) !important; text-decoration: underline !important; }
.thread-body .attachment-info { margin-right: 0 !important; display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; }

.label { font-size: 11px !important; padding: 4px 8px !important; border-radius: 4px !important; font-weight: 600 !important; line-height: 1 !important; color: #ffffff !important; vertical-align: baseline; white-space: nowrap; text-shadow: none !important; background-color: var(--os-muted) !important; }
.label-bare { background-color: transparent !important; border: 1px solid #cbd5e1 !important; color: var(--os-muted) !important; text-shadow: none; }

/*.thread-event { padding: 8px 0 16px !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; border-left: 2px solid var(--os-border) !important; padding-left: 16px !important; margin-left: 20px !important; }*/
.thread-event { padding: 8px 0 16px !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-left: 20px !important; }

.type-icon { border-radius: 6px !important; background-color: #f1f5f9 !important; padding: 4px 8px !important; margin-right: 0 !important; text-align: center; display: inline-block; font-size: 1rem !important; border: 1px solid var(--os-border) !important; color: #475569 !important; }
.type-icon.dark { border-color: #334155 !important; background-color: #475569 !important; color: #ffffff !important; }
.thread-event img.avatar { vertical-align: middle; border-radius: 50% !important; width: 20px !important; height: 20px !important; margin: 0 4px !important; }
.thread-event .description { margin-left: 0 !important; padding-top: 2px !important; padding-left: 0 !important; display: inline-block; width: 100% !important; line-height: 1.5 !important; font-size: 0.9rem !important; color: var(--os-muted) !important; }
.thread-event .type-icon { position: static !important; }
.thread-event .type-icon::after, .thread-entry::after, .thread-entry::before { display: none !important; }



input[name*="-ext"][size="5"] {
    color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
    opacity: 0 !important; /* Si transparent no funciona, esto lo vuelve invisible */
    width: 0 !important; /* Reduce su tamaño al mínimo para ocultarlo por completo */
    padding: 0 !important;
    border: none !important;
}

/* Oculta el contenedor del enlace de inicio de sesión en la barra de navegación superior */
#header #nav p {
    display: none !important;
}


#header a[href*="login.php"] {
    display: none !important;
}