/* ============================================================
   TICKETING PORTAL LS — Estilos globales
   Convención: BEM simplificado + variables CSS
   ============================================================ */

:root {
  --color-primary:      #1a73e8;
  --color-danger:       #d93025;
  --color-success:      #188038;
  --color-secondary:    #888;
  --color-bg:           #f4f4f4;
  --color-white:        #ffffff;
  --color-border:       #cccccc;
  --color-text:         #333333;
  --color-text-muted:   #666666;
  --color-header-bg:    #e8eaf6;
  --color-row-hover:    #f9f9f9;
  --radius:             4px;
  --radius-card:        8px;
  --shadow-card:        0 1px 4px rgba(0,0,0,0.1);
  --font-base:          Arial, sans-serif;
  --font-size-base:     14px;
  --font-size-sm:       13px;
  --font-size-xs:       12px;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Layout ------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* --- Card --------------------------------------------------- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

/* --- Typography --------------------------------------------- */
h1 { font-size: 20px; margin-bottom: 20px; color: #222; }
h2 { font-size: 16px; margin-bottom: 16px; color: #333; }

/* --- Form elements ------------------------------------------ */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
  margin-top: 12px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-family: var(--font-base);
  color: var(--color-text);
}

textarea { height: 80px; resize: vertical; }

input[readonly] { background: #f5f5f5; cursor: not-allowed; }

/* --- Buttons ------------------------------------------------ */
.btn {
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-base);
  margin-right: 8px;
  margin-top: 16px;
  transition: opacity 0.15s;
}
.btn:hover   { opacity: 0.88; }
.btn:active  { opacity: 0.75; }
.btn--primary   { background: var(--color-primary);   color: #fff; }
.btn--danger    { background: var(--color-danger);    color: #fff; }
.btn--success   { background: var(--color-success);   color: #fff; }
.btn--secondary { background: var(--color-secondary); color: #fff; }
.btn--sm { padding: 4px 10px; font-size: var(--font-size-xs); margin-top: 0; }

/* --- Nav ---------------------------------------------------- */
.nav {
  background: var(--color-primary);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__brand { color: #fff; font-size: 15px; font-weight: bold; }
.nav__link  { color: #fff; text-decoration: none; font-size: var(--font-size-base); }
.nav__link:hover { text-decoration: underline; }
.nav__user  { margin-left: auto; color: #fff; font-size: var(--font-size-sm); }

/* --- Nav dropdown (Admin Recursos) --------------------------- */
.nav__dropdown { position: relative; display: inline-block; }
.nav__dropdown-toggle {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: var(--font-size-base); font-family: inherit; padding: 0;
}
.nav__dropdown-toggle:hover { text-decoration: underline; }
.nav__dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: #fff; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  min-width: 200px; z-index: 200; overflow: hidden;
}
.nav__dropdown-menu.show { display: block; }
.nav__dropdown-menu a {
  display: block; padding: 9px 16px; color: var(--color-text);
  text-decoration: none; font-size: var(--font-size-sm);
}
.nav__dropdown-menu a:hover { background: var(--color-bg); }
body.tema-oscuro .nav__dropdown-menu { background: #12121e; border: 1px solid #1e2a3a; }
body.tema-oscuro .nav__dropdown-menu a { color: #cbd5e1; }
body.tema-oscuro .nav__dropdown-menu a:hover { background: #1a2744; color: #f0c040; }
body.tema-oscuro .nav__dropdown-toggle { color: #cbd5e1; }
body.tema-oscuro .nav__dropdown-toggle:hover { color: #f0c040; }

/* --- Etiquetas de vigencia (Admin Recursos) ------------------- */
.vigencia { font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 10px; display:inline-block; }
.vigencia--auto    { background: #d2e3fc; color: #0d47a1; }
.vigencia--vigente { background: #c8e6c9; color: #1b5e20; }
.vigencia--vencida { background: #f5c6c6; color: #7f0000; }
body.tema-oscuro .vigencia--auto    { background: #1a2744; color: #7ab8f5; }
body.tema-oscuro .vigencia--vigente { background: #14361c; color: #6fcf7a; }
body.tema-oscuro .vigencia--vencida { background: #3a1414; color: #f28b8b; }

/* --- Badges ------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: bold;
}
.badge--sin-asignar { background: #fce8b2; color: #7a4f00; }
.badge--en-gestion  { background: #c8e6c9; color: #1b5e20; }
.badge--cerrado     { background: #d2e3fc; color: #0d47a1; }
.badge--anulado     { background: #f5c6c6; color: #7f0000; }
.badge--urgente     { background: #f8d7ff; color: #6a0dad; font-weight: 800; }
.badge--alta        { background: #fde0dc; color: #c62828; }
.badge--media       { background: #fff3e0; color: #e65100; }
.badge--baja        { background: #e8f5e9; color: #2e7d32; }
/* Ajuste 25-sep-2026: columna auxiliar "Vencido" (ver UI.badgeVencido) */
.badge--vencido      { background: #fde0dc; color: #c62828; font-weight: 800; border: 1px solid #f3aba3; }

/* --- Calendario: resaltar el ícono del selector de fecha -----
   Ajuste 15-sep-2026: el ícono nativo casi no se veía y el usuario
   tenía que hacerle clic "a ciegas". Se resalta con color propio. */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: #ffb020;
  border-radius: 4px;
  padding: 3px;
  cursor: pointer;
  filter: none;
}
input[type="date"] { cursor: pointer; }

/* --- Celdas colapsables (Ajuste 15-sep-2026, punto 4) --------- */
.celda-colapsable {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.celda-colapsable--abierta {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.celda-colapsable__toggle {
  font-size: 11px;
  display: inline-block;
  margin-top: 2px;
  cursor: pointer;
}

/* --- Table -------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th {
  background: var(--color-header-bg);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid #c5cae9;
}
td { padding: 7px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
tr:hover td { background: var(--color-row-hover); }

/* --- Pagination --------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pagination__btn {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: var(--radius);
  cursor: pointer;
}
.pagination__btn--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --- Filters ------------------------------------------------ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: flex-end;
}
.filtros__item { display: flex; flex-direction: column; min-width: 140px; }
.filtros__item label { margin-top: 0; font-size: var(--font-size-xs); }
.filtros__item input,
.filtros__item select { padding: 6px 8px; font-size: var(--font-size-sm); }

/* --- Modal/Popup -------------------------------------------- */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  justify-content: center;
  align-items: center;
}
.popup-overlay--show { display: flex; }
.popup-box {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}
.popup-box__title   { font-size: 18px; margin-bottom: 12px; }
.popup-box__message { margin-bottom: 20px; color: var(--color-text-muted); }
.popup-box__number  { font-size: 36px; font-weight: bold; color: var(--color-primary); margin: 16px 0; }
.popup-box__hint    { font-size: var(--font-size-sm); color: var(--color-secondary); }

/* --- Feedback ----------------------------------------------- */
.error-msg { color: var(--color-danger); font-size: var(--font-size-sm); margin-top: 4px; }
.info-msg  { color: var(--color-primary); font-size: var(--font-size-sm); margin-top: 4px; }

/* --- Divider ------------------------------------------------ */
.divider { border: none; border-top: 2px solid #e0e0e0; margin: 24px 0; }

/* --- Grid form --------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TEMAS — claro (default), oscuro, sepia
   Se aplican como clase en <body>: body.tema-oscuro, body.tema-sepia
   ============================================================ */

/* ── OSCURO mejorado — inspirado en Copérnico WMS ── */
body.tema-oscuro {
  background: #0a0a0f;
  color:      #e2e8f0;
}
body.tema-oscuro .nav {
  background:    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-bottom: 1px solid #e8a020;
  box-shadow:    0 2px 8px rgba(232,160,32,0.15);
}
body.tema-oscuro .nav__brand { color: #f0c040; font-weight: bold; }
body.tema-oscuro .nav__link  { color: #cbd5e1; }
body.tema-oscuro .nav__link:hover { color: #f0c040; text-decoration: none; }
body.tema-oscuro .nav__user  { color: #94a3b8; }

body.tema-oscuro .container  { background: transparent; }

body.tema-oscuro .card {
  background:    #12121e;
  border:        1px solid #1e2a3a;
  border-top:    3px solid #e8a020;
  border-radius: 8px;
  box-shadow:    0 4px 16px rgba(0,0,0,0.5);
}

body.tema-oscuro h1 { color: #f0c040; }
body.tema-oscuro h2 { color: #cbd5e1; }
body.tema-oscuro label { color: #94a3b8; }

/* Tabla */
body.tema-oscuro table { border-collapse: collapse; }
body.tema-oscuro th {
  background:    #1a2744;
  color:         #94a3b8;
  border-bottom: 2px solid #e8a020;
  text-transform: uppercase;
  font-size:     11px;
  letter-spacing: 0.5px;
}
body.tema-oscuro td {
  border-bottom: 1px solid #1a1a2e;
  color:         #e2e8f0;
}
body.tema-oscuro tr:nth-child(even) td { background: #0f0f1a; }
body.tema-oscuro tr:hover td {
  background: #1a2744;
  transition: background 0.15s;
}

/* Formularios */
body.tema-oscuro input[type="text"],
body.tema-oscuro input[type="email"],
body.tema-oscuro input[type="password"],
body.tema-oscuro input[type="number"],
body.tema-oscuro input[type="date"],
body.tema-oscuro input[type="file"],
body.tema-oscuro select,
body.tema-oscuro textarea {
  background:  #0d1117;
  color:       #e2e8f0;
  border:      1px solid #2a3a4a;
}
body.tema-oscuro input[readonly] {
  background: #1a1a2e;
  color:      #64748b;
  cursor:     not-allowed;
}
body.tema-oscuro select option { background: #12121e; color: #e2e8f0; }
body.tema-oscuro input::placeholder,
body.tema-oscuro textarea::placeholder { color: #3a4a5a; }
body.tema-oscuro input:focus,
body.tema-oscuro select:focus,
body.tema-oscuro textarea:focus {
  outline:      none;
  border-color: #e8a020;
  box-shadow:   0 0 0 3px rgba(232,160,32,0.2);
}

/* Botones en oscuro */
body.tema-oscuro .btn--primary   { background: #e8a020; color: #0a0a0f; font-weight: bold; }
body.tema-oscuro .btn--primary:hover { background: #f0c040; }
body.tema-oscuro .btn--secondary { background: #1e2a3a; color: #cbd5e1; border: 1px solid #2a3a4a; }
body.tema-oscuro .btn--success   { background: #15803d; color: #fff; }
body.tema-oscuro .btn--danger    { background: #b91c1c; color: #fff; }

/* Paginación */
body.tema-oscuro .pagination__btn {
  background:    #12121e;
  border-color:  #2a3a4a;
  color:         #94a3b8;
}
body.tema-oscuro .pagination__btn--active {
  background:    #e8a020;
  color:         #0a0a0f;
  border-color:  #e8a020;
  font-weight:   bold;
}

/* Badges oscuro con buen contraste */
body.tema-oscuro .badge--sin-asignar { background: #2d1a00; color: #f0c040; border: 1px solid #e8a020; }
body.tema-oscuro .badge--en-gestion  { background: #052e16; color: #4ade80; border: 1px solid #166534; }
body.tema-oscuro .badge--cerrado     { background: #0c1a3a; color: #60a5fa; border: 1px solid #1d4ed8; }
body.tema-oscuro .badge--anulado     { background: #2d0a0a; color: #f87171; border: 1px solid #b91c1c; }
body.tema-oscuro .badge--urgente     { background: #3a0a4d; color: #e29bff; border: 1px solid #9333ea; }
body.tema-oscuro .badge--alta        { background: #2d0a0a; color: #f87171; border: 1px solid #b91c1c; }
body.tema-oscuro .badge--media       { background: #2d1a00; color: #f0c040; border: 1px solid #a16207; }
body.tema-oscuro .badge--baja        { background: #052e16; color: #4ade80; border: 1px solid #166534; }
body.tema-oscuro .badge--vencido     { background: #2d0a0a; color: #f87171; border: 1px solid #b91c1c; }

/* Popup */
body.tema-oscuro .popup-box {
  background:    #12121e;
  border:        1px solid #e8a020;
  color:         #e2e8f0;
  box-shadow:    0 8px 32px rgba(0,0,0,0.8);
}
body.tema-oscuro .popup-box__message { color: #94a3b8; }
body.tema-oscuro .popup-box__number  { color: #f0c040; }

/* Divider, input-eye, filtros */
body.tema-oscuro .divider          { border-color: #1e2a3a; }
body.tema-oscuro .filtros__item label { color: #64748b; }
body.tema-oscuro .error-msg        { color: #f87171; }
body.tema-oscuro .info-msg         { color: #60a5fa; }

/* ── SEPIA ── */
body.tema-sepia {
  --color-bg:           #f5ebe0;
  --color-white:        #fdf6ec;
  --color-text:         #4a3728;
  --color-text-muted:   #7a6050;
  --color-border:       #c8a882;
  --color-header-bg:    #e8d5b7;
  --color-row-hover:    #f0e2cc;
  --color-primary:      #8b5e3c;
  background:           #f5ebe0;
  color:                #4a3728;
}
body.tema-sepia .nav          { background: #8b5e3c; }
body.tema-sepia .card         { background: #fdf6ec; border: 1px solid #c8a882; box-shadow: 0 1px 4px rgba(139,94,60,0.1); }
body.tema-sepia h1            { color: #3a2518; }
body.tema-sepia th            { background: #e8d5b7; color: #5a3e2b; border-bottom: 2px solid #c8a882; }
body.tema-sepia td            { border-bottom: 1px solid #e8d5b7; }
body.tema-sepia tr:hover td   { background: #f0e2cc; }
body.tema-sepia .pagination__btn { background: #fdf6ec; border-color: #c8a882; color: #4a3728; }
body.tema-sepia .pagination__btn--active { background: #8b5e3c; color: #fff; border-color: #8b5e3c; }
body.tema-sepia input[type="text"],
body.tema-sepia input[type="email"],
body.tema-sepia input[type="password"],
body.tema-sepia input[type="number"],
body.tema-sepia input[type="date"],
body.tema-sepia input[type="file"],
body.tema-sepia select,
body.tema-sepia textarea {
  background: #fdf6ec;
  color:      #4a3728;
  border:     1px solid #c8a882;
}
body.tema-sepia select option { background: #fdf6ec; color: #4a3728; }
body.tema-sepia input:focus,
body.tema-sepia select:focus,
body.tema-sepia textarea:focus {
  outline:      none;
  border-color: #8b5e3c;
  box-shadow:   0 0 0 3px rgba(139,94,60,0.2);
}
body.tema-sepia .popup-box { background: #fdf6ec; border: 1px solid #c8a882; }
body.tema-sepia .divider   { border-color: #c8a882; }

/* ── Ajuste 28-sep-2026: línea de tiempo del historial de un ticket ──
   Se movieron aquí (antes solo en el <style> de historial.html) para
   que UI.abrirHistorialTicket() pueda usarlas desde el popup flotante
   en cualquier pantalla (Dashboard, Consolidado, Informes, Asignación,
   Crear Ticket, Auditoría) — historial.html conserva su copia local,
   que ahora es redundante pero inofensiva (el navegador aplica la
   misma regla dos veces sin problema). */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e0e0e0}
.tl-item{position:relative;margin-bottom:20px}
.tl-dot{position:absolute;left:-27px;top:8px;width:14px;height:14px;border-radius:50%;border:2px solid #fff}
.tl-dot.CREADO    {background:#1a73e8;box-shadow:0 0 0 2px #1a73e8}
.tl-dot.ASIGNADO  {background:#f9ab00;box-shadow:0 0 0 2px #f9ab00}
.tl-dot.CERRADO   {background:#0d47a1;box-shadow:0 0 0 2px #0d47a1}
.tl-dot.ANULADO   {background:#d93025;box-shadow:0 0 0 2px #d93025}
.tl-dot.MODIFICADO{background:#888;box-shadow:0 0 0 2px #888}
.tl-dot.DEVUELTO  {background:#f9ab00;box-shadow:0 0 0 2px #f9ab00}
.tl-dot.REENVIADO {background:#0d47a1;box-shadow:0 0 0 2px #0d47a1}

.tl-card{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;padding:12px 16px;color:#333}
.tl-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.tl-accion{font-weight:bold;font-size:13px;padding:2px 10px;border-radius:12px}
.tl-accion.CREADO    {background:#e8f0fe;color:#1a73e8}
.tl-accion.ASIGNADO  {background:#fff8e1;color:#7a4f00}
.tl-accion.CERRADO   {background:#d2e3fc;color:#0d47a1}
.tl-accion.ANULADO   {background:#fce8e6;color:#d93025}
.tl-accion.MODIFICADO{background:#f0f0f0;color:#444}
.tl-accion.DEVUELTO  {background:#fff3e0;color:#a65500}
.tl-accion.REENVIADO {background:#d2e3fc;color:#0d47a1}
.tl-meta{font-size:12px;color:#666}
.tl-detalle{font-size:13px;color:#333;margin-bottom:6px}
.tl-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:8px}
.tl-foto-item{background:#fff;border:1px solid #e8e8e8;border-radius:4px;padding:6px 10px;font-size:12px}
.tl-foto-item strong{display:block;color:#1a73e8;font-size:11px;font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:0.3px}
.tl-foto-item span{color:#222;font-size:12px}

body.tema-oscuro .timeline::before{background:#2a3a4a}
body.tema-oscuro .tl-card{background:#1a2233;border-color:#2a3a4a;color:#e2e8f0}
body.tema-oscuro .tl-meta{color:#8b949e}
body.tema-oscuro .tl-detalle{color:#cbd5e1}
body.tema-oscuro .tl-foto-item{background:#0d1117;border-color:#2a3a4a}
body.tema-oscuro .tl-foto-item strong{color:#e8a020}
body.tema-oscuro .tl-foto-item span{color:#e2e8f0}
body.tema-oscuro .tl-accion.CREADO    {background:#0c1f3a;color:#60a5fa}
body.tema-oscuro .tl-accion.ASIGNADO  {background:#2d1a00;color:#f0c040}
body.tema-oscuro .tl-accion.CERRADO   {background:#0c1a3a;color:#93c5fd}
body.tema-oscuro .tl-accion.ANULADO   {background:#2d0a0a;color:#f87171}
body.tema-oscuro .tl-accion.MODIFICADO{background:#1a1a2e;color:#94a3b8}
body.tema-oscuro .tl-accion.DEVUELTO  {background:#3a2400;color:#fbbf24}
body.tema-oscuro .tl-accion.REENVIADO {background:#0c1a3a;color:#93c5fd}

body.tema-sepia .tl-card{background:#fff8f0;border-color:#c8a882;color:#4a3728}
body.tema-sepia .tl-meta{color:#7a6050}
body.tema-sepia .tl-detalle{color:#4a3728}
body.tema-sepia .tl-foto-item{background:#fdf6ec;border-color:#d4b896}
body.tema-sepia .tl-foto-item strong{color:#8b5e3c;font-weight:700}
body.tema-sepia .tl-foto-item span{color:#3a2518}
body.tema-sepia .tl-accion.CREADO    {background:#e8d5b7;color:#5a3e2b}
body.tema-sepia .tl-accion.ASIGNADO  {background:#f5e6cc;color:#7a4f00}
body.tema-sepia .tl-accion.CERRADO   {background:#dce8f5;color:#1e4a8a}
body.tema-sepia .tl-accion.ANULADO   {background:#f5d5d0;color:#8a1a1a}
body.tema-sepia .tl-accion.MODIFICADO{background:#e8ddd0;color:#5a4a3a}
body.tema-sepia .tl-accion.DEVUELTO  {background:#f5e6cc;color:#7a4f00}
body.tema-sepia .tl-accion.REENVIADO {background:#dce8f5;color:#1e4a8a}