/* Estilos Generales */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Estilos generales */
body {
    font-family: 'Roboto', Arial, sans-serif; /* Aplica Roboto como fuente principal */
    font-weight: 400; /* Regular para el texto normal */
    color: #333333; /* Texto oscuro por defecto para contenido claro */
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  color: #333333; /* Default dark headings */
}

/* Headings inside light containers (container and card) */
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: #111827; /* Dark headings inside light containers */
}

/* Dashboard titles on dark header */
.admin-title h1, .admin-title h2 { color: #f9fafb; }
.admin-title .muted { color: #e5e7eb; }
/* Agent dashboard: top header title inside .wrap */
.wrap > header h1 { color: #f9fafb; }
/* Page titles on dark header across common pages */
/* Direct H1 under .wrap are scoped via data-mode to avoid global impact */
/* Scoped titles for memos/messages pages where H1 is nested */
body[data-mode="MEMOS"] .wrap h1,
body[data-mode="MESSAGES"] .wrap h1,
body[data-mode="ADMIN_MEMOS"] .wrap h1,
body[data-mode="MEMOS_ARCHIVED"] .wrap h1,
body[data-mode="ADMIN_MESSAGES"] .wrap h1,
body[data-mode="KNOWLEDGE_CENTER"] .wrap h1,
body[data-mode="ADMIN_KNOWLEDGE"] .wrap h1 { color: #f9fafb; }

button {
    font-family: 'Roboto', Arial, sans-serif; /* Asegura que los botones usen la misma fuente */
    font-weight: bold; /* Negritas para destacar el texto */
}

label {
  font-weight: bold;
  display: inline-block;
  width: 120px;
  color: #555555; /* Gris medio */
}

input, textarea, button {
  margin: 2px 0;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px; /* Bordes redondeados */
}

/* Input y Textarea */
input[type="text"], input[type="number"], textarea {
  width: calc(100% - 130px);
  height: 30px; /* Ajustamos la altura para uniformidad */
  border: 1px solid #cccccc; /* Gris claro en bordes */
  background-color: #ffffff; /* Fondo blanco */
  padding: 5px 10px;
}

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input, textarea {
  text-transform: uppercase;
}

/* Users page: disable forced uppercase on all fields */
body[data-mode="USERS"] input,
body[data-mode="USERS"] textarea {
  text-transform: none !important;
}

/* Admin Memos page: disable forced uppercase on all fields */
body[data-mode="ADMIN_MEMOS"] input,
body[data-mode="ADMIN_MEMOS"] textarea {
  text-transform: none !important;
}

/* Mantener los placeholder en su formato original */
input::placeholder, textarea::placeholder {
  text-transform: none;
}


/* Botones */
button {
  font-size: 14px;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.2s;
}

/* Botón Naranja */
button.orange {
  background-color: #fd8b50; /* Naranja */
  color: white;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold; /* Texto en negritas */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

button.orange:hover {
  background-color: #d17905; /* Naranja más oscuro al pasar el mouse */
  transform: scale(1.05); /* Ligero escalado al hover */
}

/* Enlaces Naranja (mismo estilo que botón) */
a.orange {
  background-color: #fd8b50; /* Naranja */
  color: #ffffff; /* Texto blanco */
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}
a.orange:hover {
  background-color: #d17905; /* Naranja más oscuro */
  transform: scale(1.05);
}

/* Botón Gris Oscuro */
button.dark-gray {
  background-color: #555555; /* Gris oscuro */
  color: white;
}

button.dark-gray:hover {
  background-color: #444444; /* Más oscuro al pasar el mouse */
}

/* Alineación de botones */
button:hover {
  transform: scale(1.05); /* Animación al pasar el mouse */
}

/* Checkbox y Radios */
input[type="radio"], input[type="checkbox"] {
  width: auto;
  margin: 0 5px;
  transform: scale(1.2); /* Hacemos más visibles los elementos */
}

/* Tamaño consistente de checkboxes dentro de la página de Usuarios */
body[data-mode="USERS"] input[type="checkbox"] {
  transform: none;
  width: 16px;
  height: 16px;
  margin: 0 4px;
}

/* Checkboxes uniformes en listas de scopes (crear/editar) */
#editScopesList input[type="checkbox"],
#createScopesList input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #666;
  border-radius: 3px;
  background: #fff;
  display: inline-block;
  position: relative;
  margin-right: 0; /* usamos gap del label */
  flex: 0 0 auto;
}
#editScopesList input[type="checkbox"]:checked::after,
#createScopesList input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: #ff7a00; /* color de selección */
  border-radius: 2px;
}

/* Texto más pequeño y sin salto de línea en scopes */
#editScopesList .scope-item span,
#createScopesList .scope-item span {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 5px; /* Bordes redondeados */
  overflow: hidden; /* Aplica los bordes redondeados correctamente */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-size: 13px;
}

th {
  background-color: #f4f4f4; /* Encabezado gris claro */
  color: #333333;
}

.subtotal {
  font-weight: bold;
  text-align: right;
  color: #555555; /* Gris medio */
}



/* Resultados */
#results {
  width: 100%;
  height: auto;
  white-space: pre-wrap;
  font-family: monospace;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #ffffff; /* Fondo blanco para resultados */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
body {
  background: linear-gradient(135deg, #2a2f42, #2a2f42); /* Degradado entre dos tonos oscuros */
  margin: 0;
  padding: 0;
}

button.saved {
  background-color: #555555; /* Gris oscuro */
  color: white; /* Texto blanco para contraste */
  cursor: not-allowed; /* Indica que ya no se puede oprimir */
  opacity: 0.7; /* Aplica un efecto visual de "deshabilitado" */
}
/* Fondo del formulario */
.container {
  max-width: 600px;
  margin: auto;
  background-color: #f8f8fa; /* Gris oscuro con tono azul */
  border-radius: 5px; /* Bordes redondeados para darle estilo */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  padding: 20px; /* Espaciado interno */
}

/* OTL: contenedor más ancho para tablas y notas */
body[data-mode="OTLS"] .container {
  max-width: 1200px;
  padding: 24px;
}
/* OTL: ampliar el cuadro de notas en la tabla */
body[data-mode="OTLS"] #tbl th:nth-child(4),
body[data-mode="OTLS"] #tbl td:nth-child(4) {
  min-width: 420px; /* asegura espacio para visualizar notas */
}
body[data-mode="OTLS"] #tbl td:nth-child(4) .notes {
  width: 100%;
  min-width: 400px;
  box-sizing: border-box;
  resize: vertical; /* solo vertical para evitar overflow horizontal */
}

/* Fondo del formulario */
.container2 {
  max-width: 80%;
  margin: auto;
  background-color: #f8f8fa; /* Gris oscuro con tono azul */
  border-radius: 5px; /* Bordes redondeados para darle estilo */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  padding: 20px; /* Espaciado interno */
}

/* Fondo del formulario extended mfg */
.container1 {
  max-width: 700px;
  margin: auto;
  background-color: #f8f8fa; /* Gris oscuro con tono azul */
  border-radius: 5px; /* Bordes redondeados para darle estilo */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  padding: 20px; /* Espaciado interno */
}

/* Contenedor del formulario */
.login-container {
  max-width: 350px; /* Ancho máximo del formulario */
  margin: 50px auto; /* Centrar vertical y horizontal */
  background-color: #f8f8fa; /* Fondo oscuro */
  border-radius: 8px; /* Bordes redondeados */
  padding: 20px; /* Espaciado interno */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
  text-align: center; /* Centrar contenido dentro del contenedor */
}

/* Título */
.login-container h2 {
  color: #2a2f42; /* Título blanco */
  font-size: 24px; /* Tamaño mayor para destacar */
  margin-bottom: 20px; /* Espaciado inferior */
}

/* Campos de entrada uniformes */
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%; /* Ocupa todo el ancho disponible */
  height: 40px; /* Altura uniforme */
  border: 1px solid #cccccc; /* Borde gris claro */
  border-radius: 5px; /* Bordes redondeados */
  padding: 10px; /* Espaciado interno */
  font-size: 14px; /* Tamaño de texto adecuado */
  box-sizing: border-box; /* Incluye padding en el cálculo del tamaño */
  margin-bottom: 15px; /* Espaciado entre los campos */
}

/* Botón naranja */
.login-container button.orange {
  width: 100%; /* Botón del mismo ancho que los campos */
  background-color: #fd8b50; /* Naranja */
  color: #ffffff; /* Texto blanco */
  font-size: 16px; /* Texto claro y legible */
  font-weight: bold; /* Texto en negrita */
  border: none; /* Sin bordes extra */
  border-radius: 5px; /* Bordes redondeados */
  padding: 12px; /* Espaciado interno */
  cursor: pointer; /* Cursor de mano */
  transition: background-color 0.3s; /* Animación en hover */
}

/* Hover del botón */
.login-container button.orange:hover {
  background-color: #d17905; /* Naranja más oscuro */
}

/* Etiquetas */
.login-container label {
  display: block; /* Cada etiqueta en su línea */
  color: #ffffff; /* Etiquetas blancas */
  margin-bottom: 5px; /* Separación con el input */
  font-weight: bold; /* Negritas para destacar */
}

/* Contenedor del formulario */
.container1 {
  max-width: 500px; /* Ajustado para ser más compacto */
  margin: 40px auto; /* Centrado */
  background-color: #f8f8fa; /* Fondo oscuro */
  border-radius: 8px; /* Bordes redondeados */
  padding: 15px; /* Espaciado interno */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Título */
.container1 h2 {
  color: #2a2f42; /* Blanco */
  text-align: center; /* Centrado */
  font-size: 22px; /* Tamaño reducido ligeramente */
  margin-bottom: 15px; /* Espaciado inferior */
}

/* Campos de entrada compactos */
.container1 input[type="text"],
.container1 input[type="password"],
.container1 input[type="number"],
.container1 select {
  width: 70%; /* Más estrechos */
  height: 30px; /* Altura compacta */
  border: 1px solid #cccccc; /* Borde gris claro */
  border-radius: 5px; /* Bordes redondeados */
  padding: 5px; /* Espaciado interno */
  font-size: 14px; /* Texto claro */
  margin: 5px auto 10px; /* Separación entre elementos */
  display: block; /* Centrado */
  box-sizing: border-box;
}

/* Botones compactos */
.container1 button.orange {
  width: 50%; /* Más estrecho */
  background-color: #fd8b50; /* Naranja */
  color: #ffffff; /* Texto blanco */
  font-size: 14px; /* Tamaño compacto */
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 8px; /* Menor altura */
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 10px auto; /* Centrado */
  display: block;
}

/* Hover para botones */
.container1 button.orange:hover {
  background-color: #d17905;
}

#username, #password {
    text-transform: none !important; /* 🔥 Evita que se apliquen mayúsculas */
}

/* (Obsoleto) Reglas antiguas de #popup eliminadas para usar el sistema de overlay estándar */


.popup-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

body {
  overflow-x: hidden;
}


#popupContent {
  max-height: 90vh;             /* límite vertical del contenido */
  overflow: auto;               /* ← aquí vive el scroll */
  -webkit-overflow-scrolling: touch;
  /* por si tu popup usa flex en el contenedor, esto habilita el scroll interno */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* en móviles con viewport dinámico */
@supports (height: 100dvh) {
  #popupContent { max-height: 85dvh; }
}

/* evita desbordes por líneas larguísimas en el results */
#popupContent .popup-results {
  word-break: break-word;
}


/* ===== Pendings: compactar filas y ancho cómodo ===== */
body[data-mode="PENDINGS"] .container{
  width: min(99vw, 1600px);
  max-width: none;
}

/* Tabla fluida y celdas arriba */
body[data-mode="PENDINGS"] #tbl{
  table-layout: auto;
  width: 100%;
}
body[data-mode="PENDINGS"] #tbl th,
body[data-mode="PENDINGS"] #tbl td{
  vertical-align: top;
  white-space: normal;
  padding: 6px 8px;
}

/* Evita que la regla global de formularios achique inputs/textarea en la tabla */
body[data-mode="PENDINGS"] #tbl input,
body[data-mode="PENDINGS"] #tbl textarea{
  width: 100% !important;
  box-sizing: border-box;
}

/* Notas más bajitas por defecto (y ajustables) */
body[data-mode="PENDINGS"] textarea.notes{
  min-height: 72px;   /* ↓ antes 110/120 */
  line-height: 1.2;
  resize: vertical;
}

/* Píldoras más pequeñas */
body[data-mode="PENDINGS"] .pill{
  padding: 1px 6px;
  font-size: 11px;
}

/* Acciones en 2 columnas para que quepan en 1–2 renglones */
body[data-mode="PENDINGS"] .actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
}
body[data-mode="PENDINGS"] .actions .orange{
  width: 100%;
  padding: 6px 8px;       /* botones compactos */
  font-size: 12px;
}

/* Inputs fecha y columnas estrechas donde aplica */
body[data-mode="PENDINGS"] #tbl td:nth-child(7),
body[data-mode="PENDINGS"] #tbl td:nth-child(8),
body[data-mode="PENDINGS"] #tbl td:nth-child(9){
  white-space: nowrap;
}

body[data-mode="PENDINGS"] #tbl th:nth-child(1),
body[data-mode="PENDINGS"] #tbl td:nth-child(1){ width: 48px; }         /* ID */

body[data-mode="PENDINGS"] #tbl th:nth-child(2),
body[data-mode="PENDINGS"] #tbl td:nth-child(2){ width: 220px; }        /* Auth + fecha */

body[data-mode="PENDINGS"] #tbl th:nth-child(3),
body[data-mode="PENDINGS"] #tbl td:nth-child(3){ width: 140px; }        /* Type */

body[data-mode="PENDINGS"] #tbl th:nth-child(4),
body[data-mode="PENDINGS"] #tbl td:nth-child(4){ width: 100%; }         /* Notes (toma el resto) */

body[data-mode="PENDINGS"] #tbl th:nth-child(5),
body[data-mode="PENDINGS"] #tbl td:nth-child(5){ width: 110px; white-space: nowrap; } /* Assigned */

body[data-mode="PENDINGS"] #tbl th:nth-child(6),
body[data-mode="PENDINGS"] #tbl td:nth-child(6){ width: 90px;  white-space: nowrap; } /* Source */

body[data-mode="PENDINGS"] #tbl th:nth-child(7),
body[data-mode="PENDINGS"] #tbl td:nth-child(7){ width: 140px; }        /* Due */

body[data-mode="PENDINGS"] #tbl th:nth-child(8),
body[data-mode="PENDINGS"] #tbl td:nth-child(8){ width: 70px; }         /* Status */

body[data-mode="PENDINGS"] #tbl th:nth-child(9),
body[data-mode="PENDINGS"] #tbl td:nth-child(9){ width: 120px; }        /* Updated (solo fecha) */

body[data-mode="PENDINGS"] #tbl th:nth-child(10),
body[data-mode="PENDINGS"] #tbl td:nth-child(10){ width: 180px; }       /* Actions (2 cols) */


/* Mantener todo en una fila bonita para Resolution */
#resolutionRowWrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Quitar anchos fijos de label/inputs del layout global para este row */
#resolutionRowWrap > label { min-width:auto !important; width:auto !important; margin:0 !important; }

/* El select NO debe usar el calc(100% - 130px) del estilo global */
#resolutionRowWrap select { width:auto !important; min-width:240px; }

/* Checkbox alineado al centro y sin “bailar” verticalmente */
#resolutionRowWrap .pending-inline input[type="checkbox"] { transform: translateY(1px); }


/* ===== Pendings: resaltado de OVERDUE (vencidos) ===== */
body[data-mode="PENDINGS"] tr.row-overdue {
  background: #fff5f5; /* rojito muy suave de fondo en toda la fila */
}

body[data-mode="PENDINGS"] input.date.overdue {
  border-color: #d32f2f;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}

body[data-mode="PENDINGS"] .due-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 18px;
  height: 18px;
  background: #d32f2f;
  color: #fff;
  vertical-align: middle;
}

/* (Opcional) resalta el Auth cuando esté overdue */
body[data-mode="PENDINGS"] .auth-overdue strong {
  color: #b00020;
}

/* Ocultar/mostrar robusto */
.hidden { display: none !important; }

/* (OTL removido) */

/* ===== Admin modals ===== */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.single { grid-template-columns: 1fr; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-weight:600; font-size: 13px; color:#374151; }
.input-lg, .select-lg {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 16px; line-height: 1.2; box-sizing: border-box;
}
.input-lg[type="number"] { /* Evita inputs minúsculos en algunos navegadores */
  min-width: 0; /* permite contraer en grid */
  appearance: textfield;
}
.input-lg::-webkit-outer-spin-button,
.input-lg::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* tarjeta simple */
.card { background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:18px; }
/* botones */
.btn { height:40px; padding:0 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fafafa; cursor:pointer; }
.btn.primary { background:#ff7a00; color:#fff; border:none; }
.btn.ghost { background:#fff; }

/* === Admin modals: compact & centered === */
/* === Admin modals — único sistema (overlay + card) === */
.modal-overlay{
  position: fixed;
  inset: 0;
  padding: 24px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  display: none;               /* <-- OCULTO por defecto */
  z-index: 9999;
  overflow: auto;              /* si el contenido es muy alto, scrollea la página */
  place-items: center;         /* se activará cuando sea grid */
}
.modal-overlay.open{
  display: grid;               /* <-- SOLO visible cuando tiene .open */
}

/* Garantiza que el overlay con id #popup se muestre aunque haya reglas más específicas */
.modal-overlay.open#popup{
  display: grid !important;
}

.modal-overlay > .modal{
  display: inline-block;       /* tamaño natural según contenido */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 18px;
  color: #111827;              /* texto oscuro por defecto para buen contraste */

  /* ancho/alto adaptativos con límites sanos */
  width: auto;                                   /* auto por contenido */
  min-width: min(420px, 92vw);                   /* cómodo en desktop, responsivo en móvil */
  max-width: min(var(--modal-max-w, 720px), 96vw);
  max-height: min(var(--modal-max-h, 90vh), 90vh);
  overflow: auto;                                /* si el card se pasa de alto, scroll interno */
}

.modal header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* Formularios dentro del modal */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.single{ grid-template-columns: 1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:600; font-size: 13px; color:#374151; }
.input-lg, .select-lg, .field input, .field select{
  width: 100%;
  height: 40px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
}
.input-lg[type="number"]{ min-width: 0; appearance: textfield; }
.input-lg::-webkit-outer-spin-button,
.input-lg::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ====== Severity + Agents side-by-side ====== */
.sev-row{
  display:grid;
  grid-template-columns: 340px 1fr; /* izquierda fija, derecha flexible */
  gap:16px;
  align-items:stretch;
  width:100%;
}

/* lista de agentes con scroll mismo alto que la gráfica */
#agentsNowCard{ display:flex; flex-direction:column; }
.agents-scroll{
  border:1px solid #eee; border-radius:12px; background:#fff;
  padding:10px; overflow:auto;
  min-height:420px; max-height:420px;
}
.agent-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid #eee; border-radius:10px; background:#fafafa;
  margin-bottom:6px;
}
.agent-row .name{ font-weight:600; }
.agent-row .badge{
  min-width:28px; height:24px; border-radius:999px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#111827; color:#fff; font-weight:700; font-size:12px;
}

/* canvas grande y fluido */
#severityTrendCard{ display:flex; flex-direction:column; }
#severityChart{
  display:block;
  width:100%;
  height:420px;      /* alto visible: el JS ajusta HiDPI internamente */
  max-height:60vh;
}

/* responsive: apila en pantallas chicas */
@media (max-width:1024px){
  .sev-row{ grid-template-columns:1fr; }
  .agents-scroll{ min-height:0; max-height:none; }
}


/* Global brand badge (top-left, outside content) */
/* ===== Brand & Sidebar positions ===== */
:root{
  /* Brand (logo pill) */
  --brand-left: 18px;
  --brand-top: 16px;
  --brand-width: 140px;
  --brand-height: 40px;
  --brand-gap: 12px;       /* espacio entre logo y hamburguesa */

  /* Sidebar */
  --side-w: 260px;
  --side-bg: #1f2937;
  --side-fg: #cbd5e1;
  --side-fg-strong: #e5e7eb;
  --side-sep: rgba(255,255,255,.08);
}

/* Global brand badge (top-left, outside content) */
.brand-badge{
  position: fixed;
  top: var(--brand-top);
  left: var(--brand-left);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--brand-width);
  height: var(--brand-height);
  padding: 8px 10px;

  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);

  text-decoration: none;
}
.brand-badge img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* === Sidebar (collapsible) === */
.side-toggle{
  position: fixed;
  /* centrado vertical relativo al alto del brand */
  top: calc(var(--brand-top) + (var(--brand-height) - 40px)/2);
  /* inmediatamente a la derecha del brand */
  left: calc(var(--brand-left) + var(--brand-width) + var(--brand-gap));
  z-index: 1100;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.05);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.side-toggle .hamburger{
  width: 20px; height: 2px; background: #111; position: relative;
}
.side-toggle .hamburger::before,
.side-toggle .hamburger::after{
  content:""; position: absolute; left:0; right:0; height:2px; background:#111;
}
.side-toggle .hamburger::before{ top:-6px; }
.side-toggle .hamburger::after { top: 6px; }

/* Dark mode: mejor contraste del toggle y líneas de hamburguesa */
@media (prefers-color-scheme: dark) {
  .side-toggle { background: #2b2f36 !important; border-color: rgba(255,255,255,.12) !important; }
  .side-toggle .hamburger,
  .side-toggle .hamburger::before,
  .side-toggle .hamburger::after { background: #f0f4f8 !important; }
}

/* Drawer */
.side-nav{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  background: var(--side-bg);
  color: var(--side-fg);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1090;
  box-shadow: 6px 0 24px rgba(0,0,0,.25);
}
.side-open .side-nav{ transform: translateX(0); }

/* Backdrop */
.side-scrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1080;
}

/* Header with logo inside drawer */
.side-header{
  height: 64px; display:flex; align-items:center; padding: 0 16px;
  border-bottom: 1px solid var(--side-sep);
}
.side-logo img{ height: 28px; display:block; }

.breadcrumbs{ display:flex; align-items:center; gap:6px; padding:8px 16px; color: var(--side-fg); font-size: 12px; }
.breadcrumbs .sep{ opacity:.6; }
.breadcrumbs .current{ color: var(--side-fg-strong); font-weight: 700; }

/* Menu */
.side-menu{ padding: 10px 8px 18px; overflow-y: auto; height: calc(100vh - 64px); }
.side-label{
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; padding: 10px 12px;
  margin: 0 0 4px;
}
.side-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 10px;
  color: var(--side-fg-strong); text-decoration: none;
}
.side-item:hover{ background: rgba(255,255,255,.06); }
.side-item .icon{ width: 18px; text-align:center; }
.side-item.active{ background: rgba(255,255,255,.10); color: #ffffff; }
.side-item.active .icon{ color: #ffffff; }

/* Groups */
.side-group{ margin-top: 6px; }
.side-collapser{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: 10px; background: transparent; border:0; color: var(--side-fg-strong);
  cursor:pointer; text-align:left;
}
.side-collapser:hover{ background: rgba(255,255,255,.06); }
.side-collapser .icon{ width:18px; text-align:center; }
.side-collapser .chev{
  margin-left:auto; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.side-collapser.open .chev{ transform: rotate(45deg); }

.side-sub{ padding: 4px 0 8px 38px; }
.side-sub a{
  display:block; padding:8px 10px; color: var(--side-fg); text-decoration:none; border-radius:8px;
}
.side-sub a:hover{ background: rgba(255,255,255,.05); color: #ffffff; }

/* Hide global brand when sidebar is open */
.brand-badge.hide-on-sidebar{ display:none !important; }

/* Mobile tweaks */
@media (max-width: 720px){
  :root{
    --brand-left: 12px;
    --brand-top: 10px;
    --brand-width: 110px;
    --brand-height: 34px;
    --brand-gap: 8px;
  }
}

/* (Optional) On wide screens you could push content when open
@media (min-width: 1280px){
  .side-open .wrap { margin-left: var(--side-w); transition: margin .25s ease; }
}
*/

/* Interaction: Agent Notes larger textarea */
#agentNotesInteraction {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.popup-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

body {
  overflow-x: hidden;
}


#popupContent {
  max-height: 90vh;             /* límite vertical del contenido */
  overflow: auto;               /* ← aquí vive el scroll */
  -webkit-overflow-scrolling: touch;
  /* por si tu popup usa flex en el contenedor, esto habilita el scroll interno */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* en móviles con viewport dinámico */
@supports (height: 100dvh) {
  #popupContent { max-height: 85dvh; }
}

/* evita desbordes por líneas larguísimas en el results */
#popupContent .popup-results {
  word-break: break-word;
}


/* ===== Pendings: compactar filas y ancho cómodo ===== */
body[data-mode="PENDINGS"] .container{
  width: min(99vw, 1600px);
  max-width: none;
}

/* Tabla fluida y celdas arriba */
body[data-mode="PENDINGS"] #tbl{
  table-layout: auto;
  width: 100%;
}
body[data-mode="PENDINGS"] #tbl th,
body[data-mode="PENDINGS"] #tbl td{
  vertical-align: top;
  white-space: normal;
  padding: 6px 8px;
}

/* Evita que la regla global de formularios achique inputs/textarea en la tabla */
body[data-mode="PENDINGS"] #tbl input,
body[data-mode="PENDINGS"] #tbl textarea{
  width: 100% !important;
  box-sizing: border-box;
}

/* Notas más bajitas por defecto (y ajustables) */
body[data-mode="PENDINGS"] textarea.notes{
  min-height: 72px;   /* ↓ antes 110/120 */
  line-height: 1.2;
  resize: vertical;
}

/* Píldoras más pequeñas */
body[data-mode="PENDINGS"] .pill{
  padding: 1px 6px;
  font-size: 11px;
}

/* Acciones en 2 columnas para que quepan en 1–2 renglones */
body[data-mode="PENDINGS"] .actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
}
body[data-mode="PENDINGS"] .actions .orange{
  width: 100%;
  padding: 6px 8px;       /* botones compactos */
  font-size: 12px;
}

/* Inputs fecha y columnas estrechas donde aplica */
body[data-mode="PENDINGS"] #tbl td:nth-child(7),
body[data-mode="PENDINGS"] #tbl td:nth-child(8),
body[data-mode="PENDINGS"] #tbl td:nth-child(9){
  white-space: nowrap;
}

body[data-mode="PENDINGS"] #tbl th:nth-child(1),
body[data-mode="PENDINGS"] #tbl td:nth-child(1){ width: 48px; }         /* ID */

body[data-mode="PENDINGS"] #tbl th:nth-child(2),
body[data-mode="PENDINGS"] #tbl td:nth-child(2){ width: 220px; }        /* Auth + fecha */

body[data-mode="PENDINGS"] #tbl th:nth-child(3),
body[data-mode="PENDINGS"] #tbl td:nth-child(3){ width: 140px; }        /* Type */

body[data-mode="PENDINGS"] #tbl th:nth-child(4),
body[data-mode="PENDINGS"] #tbl td:nth-child(4){ width: 100%; }         /* Notes (toma el resto) */

body[data-mode="PENDINGS"] #tbl th:nth-child(5),
body[data-mode="PENDINGS"] #tbl td:nth-child(5){ width: 110px; white-space: nowrap; } /* Assigned */

body[data-mode="PENDINGS"] #tbl th:nth-child(6),
body[data-mode="PENDINGS"] #tbl td:nth-child(6){ width: 90px;  white-space: nowrap; } /* Source */

body[data-mode="PENDINGS"] #tbl th:nth-child(7),
body[data-mode="PENDINGS"] #tbl td:nth-child(7){ width: 140px; }        /* Due */

body[data-mode="PENDINGS"] #tbl th:nth-child(8),
body[data-mode="PENDINGS"] #tbl td:nth-child(8){ width: 70px; }         /* Status */

body[data-mode="PENDINGS"] #tbl th:nth-child(9),
body[data-mode="PENDINGS"] #tbl td:nth-child(9){ width: 120px; }        /* Updated (solo fecha) */

body[data-mode="PENDINGS"] #tbl th:nth-child(10),
body[data-mode="PENDINGS"] #tbl td:nth-child(10){ width: 180px; }       /* Actions (2 cols) */


/* Mantener todo en una fila bonita para Resolution */
#resolutionRowWrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Quitar anchos fijos de label/inputs del layout global para este row */
#resolutionRowWrap > label { min-width:auto !important; width:auto !important; margin:0 !important; }

/* El select NO debe usar el calc(100% - 130px) del estilo global */
#resolutionRowWrap select { width:auto !important; min-width:240px; }

/* Checkbox alineado al centro y sin “bailar” verticalmente */
#resolutionRowWrap .pending-inline input[type="checkbox"] { transform: translateY(1px); }


/* ===== Pendings: resaltado de OVERDUE (vencidos) ===== */
body[data-mode="PENDINGS"] tr.row-overdue {
  background: #fff5f5; /* rojito muy suave de fondo en toda la fila */
}

body[data-mode="PENDINGS"] input.date.overdue {
  border-color: #d32f2f;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}

body[data-mode="PENDINGS"] .due-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 18px;
  height: 18px;
  background: #d32f2f;
  color: #fff;
  vertical-align: middle;
}

/* (Opcional) resalta el Auth cuando esté overdue */
body[data-mode="PENDINGS"] .auth-overdue strong {
  color: #b00020;
}

/* Ocultar/mostrar robusto */
.hidden { display: none !important; }

/* (OTL removido) */

/* ===== Admin modals ===== */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.single { grid-template-columns: 1fr; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-weight:600; font-size: 13px; color:#374151; }
.input-lg, .select-lg {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 16px; line-height: 1.2; box-sizing: border-box;
}
.input-lg[type="number"] { /* Evita inputs minúsculos en algunos navegadores */
  min-width: 0; /* permite contraer en grid */
  appearance: textfield;
}
.input-lg::-webkit-outer-spin-button,
.input-lg::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* tarjeta simple */
.card { background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:18px; }
/* botones */
.btn { height:40px; padding:0 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fafafa; cursor:pointer; }
.btn.primary { background:#ff7a00; color:#fff; border:none; }
.btn.ghost { background:#fff; }

/* === Admin modals: compact & centered === */
/* === Admin modals — único sistema (overlay + card) === */
.modal-overlay{
  position: fixed;
  inset: 0;
  padding: 24px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  display: none;               /* <-- OCULTO por defecto */
  z-index: 9999;
  overflow: auto;              /* si el contenido es muy alto, scrollea la página */
  place-items: center;         /* se activará cuando sea grid */
}
.modal-overlay.open{
  display: grid;               /* <-- SOLO visible cuando tiene .open */
}

/* Garantiza que el overlay con id #popup se muestre aunque haya reglas más específicas */
.modal-overlay.open#popup{
  display: grid !important;
}

.modal-overlay > .modal{
  display: inline-block;       /* tamaño natural según contenido */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 18px;
  color: #111827;              /* texto oscuro por defecto para buen contraste */

  /* ancho/alto adaptativos con límites sanos */
  width: auto;                                   /* auto por contenido */
  min-width: min(420px, 92vw);                   /* cómodo en desktop, responsivo en móvil */
  max-width: min(var(--modal-max-w, 720px), 96vw);
  max-height: min(var(--modal-max-h, 90vh), 90vh);
  overflow: auto;                                /* si el card se pasa de alto, scroll interno */
}

.modal header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* Formularios dentro del modal */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.single{ grid-template-columns: 1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:600; font-size: 13px; color:#374151; }
.input-lg, .select-lg, .field input, .field select{
  width: 100%;
  height: 40px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
}
.input-lg[type="number"]{ min-width: 0; appearance: textfield; }
.input-lg::-webkit-outer-spin-button,
.input-lg::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ====== Severity + Agents side-by-side ====== */
.sev-row{
  display:grid;
  grid-template-columns: 340px 1fr; /* izquierda fija, derecha flexible */
  gap:16px;
  align-items:stretch;
  width:100%;
}

/* lista de agentes con scroll mismo alto que la gráfica */
#agentsNowCard{ display:flex; flex-direction:column; }
.agents-scroll{
  border:1px solid #eee; border-radius:12px; background:#fff;
  padding:10px; overflow:auto;
  min-height:420px; max-height:420px;
}
.agent-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid #eee; border-radius:10px; background:#fafafa;
  margin-bottom:6px;
}
.agent-row .name{ font-weight:600; }
.agent-row .badge{
  min-width:28px; height:24px; border-radius:999px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#111827; color:#fff; font-weight:700; font-size:12px;
}

/* canvas grande y fluido */
#severityTrendCard{ display:flex; flex-direction:column; }
#severityChart{
  display:block;
  width:100%;
  height:420px;      /* alto visible: el JS ajusta HiDPI internamente */
  max-height:60vh;
}

/* responsive: apila en pantallas chicas */
@media (max-width:1024px){
  .sev-row{ grid-template-columns:1fr; }
  .agents-scroll{ min-height:0; max-height:none; }
}


/* Global brand badge (top-left, outside content) */
/* ===== Brand & Sidebar positions ===== */
:root{
  /* Brand (logo pill) */
  --brand-left: 18px;
  --brand-top: 16px;
  --brand-width: 140px;
  --brand-height: 40px;
  --brand-gap: 12px;       /* espacio entre logo y hamburguesa */

  /* Sidebar */
  --side-w: 260px;
  --side-bg: #1f2937;
  --side-fg: #cbd5e1;
  --side-fg-strong: #e5e7eb;
  --side-sep: rgba(255,255,255,.08);
}

/* Global brand badge (top-left, outside content) */
.brand-badge{
  position: fixed;
  top: var(--brand-top);
  left: var(--brand-left);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--brand-width);
  height: var(--brand-height);
  padding: 8px 10px;

  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);

  text-decoration: none;
}
.brand-badge img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* === Sidebar (collapsible) === */
.side-toggle{
  position: fixed;
  /* centrado vertical relativo al alto del brand */
  top: calc(var(--brand-top) + (var(--brand-height) - 40px)/2);
  /* inmediatamente a la derecha del brand */
  left: calc(var(--brand-left) + var(--brand-width) + var(--brand-gap));
  z-index: 1100;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.05);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.side-toggle .hamburger{
  width: 20px; height: 2px; background: #111; position: relative;
}
.side-toggle .hamburger::before,
.side-toggle .hamburger::after{
  content:""; position: absolute; left:0; right:0; height:2px; background:#111;
}
.side-toggle .hamburger::before{ top:-6px; }
.side-toggle .hamburger::after { top: 6px; }

/* Dark mode: mejor contraste del toggle y líneas de hamburguesa */
@media (prefers-color-scheme: dark) {
  .side-toggle { background: #2b2f36 !important; border-color: rgba(255,255,255,.12) !important; }
  .side-toggle .hamburger,
  .side-toggle .hamburger::before,
  .side-toggle .hamburger::after { background: #f0f4f8 !important; }
}

/* Drawer */
.side-nav{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  background: var(--side-bg);
  color: var(--side-fg);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1090;
  box-shadow: 6px 0 24px rgba(0,0,0,.25);
}
.side-open .side-nav{ transform: translateX(0); }

/* Backdrop */
.side-scrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1080;
}

/* Header with logo inside drawer */
.side-header{
  height: 64px; display:flex; align-items:center; padding: 0 16px;
  border-bottom: 1px solid var(--side-sep);
}
.side-logo img{ height: 28px; display:block; }

.breadcrumbs{ display:flex; align-items:center; gap:6px; padding:8px 16px; color: var(--side-fg); font-size: 12px; }
.breadcrumbs .sep{ opacity:.6; }
.breadcrumbs .current{ color: var(--side-fg-strong); font-weight: 700; }

/* Menu */
.side-menu{ padding: 10px 8px 18px; overflow-y: auto; height: calc(100vh - 64px); }
.side-label{
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; padding: 10px 12px;
  margin: 0 0 4px;
}
.side-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 10px;
  color: var(--side-fg-strong); text-decoration: none;
}
.side-item:hover{ background: rgba(255,255,255,.06); }
.side-item .icon{ width: 18px; text-align:center; }
.side-item.active{ background: rgba(255,255,255,.10); color: #ffffff; }
.side-item.active .icon{ color: #ffffff; }

/* Groups */
.side-group{ margin-top: 6px; }
.side-collapser{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: 10px; background: transparent; border:0; color: var(--side-fg-strong);
  cursor:pointer; text-align:left;
}
.side-collapser:hover{ background: rgba(255,255,255,.06); }
.side-collapser .icon{ width:18px; text-align:center; }
.side-collapser .chev{
  margin-left:auto; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.side-collapser.open .chev{ transform: rotate(45deg); }

.side-sub{ padding: 4px 0 8px 38px; }
.side-sub a{
  display:block; padding:8px 10px; color: var(--side-fg); text-decoration:none; border-radius:8px;
}
.side-sub a:hover{ background: rgba(255,255,255,.05); color: #ffffff; }

/* Hide global brand when sidebar is open */
.brand-badge.hide-on-sidebar{ display:none !important; }

/* Mobile tweaks */
@media (max-width: 720px){
  :root{
    --brand-left: 12px;
    --brand-top: 10px;
    --brand-width: 110px;
    --brand-height: 34px;
    --brand-gap: 8px;
  }
}

/* (Optional) On wide screens you could push content when open
@media (min-width: 1280px){
  .side-open .wrap { margin-left: var(--side-w); transition: margin .25s ease; }
}
*/

/* === Global Loader Overlay === */
.loader-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.loader-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.loader-box{
  position: relative;
  z-index: 1;
  background: #fff;
  color: #2a2f42;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loader-spinner{
  width: 56px;
  height: 56px;
  border: 6px solid #eee;
  border-top-color: #fd8b50;
  border-radius: 50%;
  animation: loader-spin .9s linear infinite;
}

.loader-text{
  font-weight: 700;
  font-size: 14px;
}

@keyframes loader-spin{
  to { transform: rotate(360deg); }
}

/* Utilitario: texto atenuado consistente */
.muted { color: #6b7280; }

/* Memos: visual separation of memo cards */
body[data-mode="MEMOS"] #memosList { background: transparent; border: none; padding: 0; }
body[data-mode="MEMOS"] #memosList .card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin: 12px 0; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
body[data-mode="MEMOS"] #memoDetail.card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
/* Sidebar grouping spacing */
body[data-mode="MEMOS"] #memosSidebar .month-group { border-bottom: 1px solid #eee; padding-bottom: 6px; }