/* =====================================================================
   Helpdesk Soluflex — Sistema visual v2 (light + dark)
   - Paleta base: --sf-primary #6EC1E4 / --sf-secondary #54595F (Elementor)
   - Light default; dark invierte el rol de primary↔secondary para que
     el primary en dark sea gris oscuro (#54595F) con buen contraste.
   ===================================================================== */

/* ---------- Tokens LIGHT (default) ---------- */
:root,
:root[data-theme="light"]{
  /* Marca */
  --sf-primary:        #6EC1E4;
  --sf-primary-dark:   #4FA6CC;     /* hover */
  --sf-primary-darker: #2F7EA0;     /* active + texto sobre tints claros */
  --sf-primary-soft:   #E6F4FB;
  --sf-primary-ring:   rgba(110, 193, 228, .32);

  --sf-secondary:      #54595F;
  --sf-secondary-dark: #3F434A;
  --sf-secondary-soft: #ECEEF0;

  /* Superficies */
  --sf-bg:             #F4F6F9;
  --sf-surface:        #FFFFFF;
  --sf-surface-2:      #F9FAFC;     /* header de card, fila hover */
  --sf-surface-3:      #F1F4F8;     /* inputs/select bg */
  --sf-border:         #E3E7EE;
  --sf-border-strong:  #CFD5DE;

  /* Texto */
  --sf-text:           #2A2E34;
  --sf-text-muted:     #5F6772;
  --sf-text-inverse:   #FFFFFF;

  /* Estado del sidebar (light: gris profundo con acento turquesa) */
  --sf-sidebar:        #2F343B;
  --sf-sidebar-2:      #232830;
  --sf-sidebar-text:   #F1F4F8;
  --sf-sidebar-text-muted: #A3ACBA;
  --sf-sidebar-active: #6EC1E4;

  /* Login */
  --sf-public-from:    #BFE2F3;
  --sf-public-to:      #6EC1E4;

  /* Sombra / radios / escala */
  --sf-shadow:         0 2px 10px rgba(16, 24, 40, .06);
  --sf-shadow-sm:      0 1px 3px rgba(16, 24, 40, .05);
  --sf-shadow-lg:      0 18px 44px rgba(16, 24, 40, .18);
  --sf-radius:         14px;
  --sf-radius-sm:      10px;
  --sf-radius-lg:      20px;

  /* Tipografía más legible */
  --sf-font:           'Inter','Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Botones en light: turquesa de marca con texto blanco */
  --sf-btn-primary-bg:     var(--sf-primary);
  --sf-btn-primary-hover:  var(--sf-primary-dark);
  --sf-btn-primary-active: var(--sf-primary-darker);
  --sf-btn-primary-fg:     var(--sf-text-inverse);
}

/* ---------- Tokens DARK ---------- */
:root[data-theme="dark"]{
  /* En dark, primary = secondary de la marca (#54595F) para tener contraste
     sobre fondo oscuro; secondary = turquesa (color de acento secundario). */
  --sf-primary:        #54595F;
  --sf-primary-dark:   #6E747D;
  --sf-primary-darker: #8C929A;
  --sf-primary-soft:   #2E333A;
  --sf-primary-ring:   rgba(180, 188, 200, .28);

  --sf-secondary:      #6EC1E4;
  --sf-secondary-dark: #4FA6CC;
  --sf-secondary-soft: #1F2A33;

  /* Superficies */
  --sf-bg:             #14181F;
  --sf-surface:        #1C222B;
  --sf-surface-2:      #252C37;
  --sf-surface-3:      #2E3644;
  --sf-border:         #323A47;
  --sf-border-strong:  #475164;

  /* Texto — contraste alto contra superficies */
  --sf-text:           #F1F4F8;
  --sf-text-muted:     #B6BFCD;
  --sf-text-inverse:   #14181F;

  /* En dark, primary = secondary de la marca (#54595F) para tener contraste
     sobre fondo oscuro; secondary = turquesa (color de acento secundario).
     PERO: para botones necesitamos un turquesa SATURADO que destaque; usamos
     tokens dedicados que NO dependen de --sf-primary/secondary. */
  --sf-btn-primary-bg:     #2EC4F1;  /* turquesa saturado */
  --sf-btn-primary-hover:  #1AAFE0;
  --sf-btn-primary-active: #0F95C7;
  --sf-btn-primary-fg:     #06212B;  /* texto oscuro sobre turquesa saturado */

  --sf-sidebar:        #0B0F15;
  --sf-sidebar-2:      #05080C;
  --sf-sidebar-text:   #F1F4F8;
  --sf-sidebar-text-muted: #97A1B0;
  --sf-sidebar-active: #6EC1E4;       /* turquesa en dark para destacar */

  /* Login */
  --sf-public-from:    #0B0F15;
  --sf-public-to:      #1E232B;

  --sf-shadow:         0 2px 12px rgba(0, 0, 0, .35);
  --sf-shadow-sm:      0 1px 3px rgba(0, 0, 0, .25);
  --sf-shadow-lg:      0 14px 38px rgba(0, 0, 0, .45);
}

/* ---------- Reset suave + tipografía ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  background: var(--sf-bg);
  font-family: var(--sf-font);
  color: var(--sf-text);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* En dark, asegurar que los títulos y labels no se “pierdan”. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6{
  color: var(--sf-text);
  font-weight: 700;
}
:root[data-theme="dark"] .table thead th{
  color: var(--sf-text-muted);
  background: var(--sf-surface-2);
  font-weight: 600;
  letter-spacing: .04em;
}
:root[data-theme="dark"] .form-label{
  color: var(--sf-text);
  font-weight: 550;
}
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .form-text{
  color: var(--sf-text-muted) !important;
}
:root[data-theme="dark"] .card-soft .card-header{
  color: var(--sf-text);
  font-weight: 700;
}
:root[data-theme="dark"] .kpi-card .kpi-label{
  color: var(--sf-text-muted);
}
:root[data-theme="dark"] .kpi-card .kpi-value{
  color: var(--sf-text);
}
/* Refuerzo extra: cualquier texto en negrita o monoespaciado debe heredar
   el color de texto principal en dark (los azules de "fw-bold fs-5" del
   número de ticket, etc., pueden quedar invisibles sin esto). */
:root[data-theme="dark"] .fw-bold,
:root[data-theme="dark"] .fw-semibold,
:root[data-theme="dark"] .fw-bolder{
  color: var(--sf-text);
}
:root[data-theme="dark"] .mono{
  color: var(--sf-text);
}

/* ---------- Layout ---------- */
.sf-layout{ display: flex; min-height: 100vh; }
.sf-sidebar{
  width: 252px;
  background: var(--sf-sidebar);
  color: var(--sf-sidebar-text);
  position: fixed; top: 0; bottom: 0; left: 0;
  overflow-y: auto; z-index: 1040;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column;
}
.sf-sidebar .brand{
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; gap: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  letter-spacing: .01em;
}
.sf-sidebar .brand .sf-sidebar-logo{
  height: 30px; width: auto; display: block;
  background: #fff; border-radius: 7px; padding: 3px 5px;
}
.sf-sidebar .nav-section{
  padding: 1.1rem 1.25rem .35rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--sf-sidebar-text-muted);
}
.sf-sidebar a.nav-link{
  color: var(--sf-sidebar-text);
  padding: .58rem .9rem;
  margin: 1px .55rem;
  border-radius: 8px;
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem;
  font-weight: 500;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.sf-sidebar a.nav-link:hover{ background: var(--sf-sidebar-2); color: #fff; }
.sf-sidebar a.nav-link.active{
  background: var(--sf-sidebar-active);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(110, 193, 228, .35);
}
.sf-sidebar a.nav-link i{ font-size: 1.08rem; opacity: .92; }

/* En light, dar personalidad al sidebar: brand con acento turquesa
   (línea sutil debajo). En dark esto ya queda por el color base. */
.sf-sidebar .brand::after{
  content: '';
  display: block;
  position: absolute;
  left: 1.25rem; right: 1.25rem;
  bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sf-sidebar-active), transparent);
  opacity: .55;
}
.sf-sidebar .brand{ position: relative; }

.sf-main{ margin-left: 252px; flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Light: ligero gradiente turquesa en el header del main, debajo del topbar.
   Dark: igual de sutil pero en otra dirección, para que no se vea plano. */
:root[data-theme="light"] .sf-content{
  background:
    linear-gradient(180deg, rgba(110, 193, 228, .07), transparent 240px),
    var(--sf-bg);
}
:root[data-theme="dark"] .sf-content{
  background: var(--sf-bg);
}
.sf-topbar{
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-border);
  padding: .65rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
  min-height: 56px;
}
.sf-topbar .page-title{
  font-weight: 650; margin: 0; font-size: 1.02rem; color: var(--sf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-topbar > .d-flex{ min-width: 0; }
.sf-content{ padding: 1.4rem 1.5rem; flex: 1; }

/* ---------- Backdrop móvil ---------- */
.sf-backdrop{ position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .2s; }
.sf-backdrop.show{ opacity: 1; visibility: visible; }

/* ---------- Botón switch de tema (topbar) ---------- */
.sf-theme-toggle{
  background: transparent;
  border: 1px solid var(--sf-border);
  color: var(--sf-text-muted);
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.sf-theme-toggle:hover{
  color: var(--sf-primary-darker);
  border-color: var(--sf-border-strong);
  background: var(--sf-surface-2);
}
.sf-theme-toggle-floating{
  position: fixed;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: blur(6px);
  z-index: 1050;
}
.sf-theme-toggle-floating:hover{
  background: rgba(255,255,255,.32);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
:root[data-theme="dark"] .sf-theme-toggle .bi-sun{ display: inline-block; }
:root[data-theme="dark"] .sf-theme-toggle .bi-moon-stars{ display: none; }
:root[data-theme="light"] .sf-theme-toggle .bi-sun{ display: none; }
:root[data-theme="light"] .sf-theme-toggle .bi-moon-stars{ display: inline-block; }

/* Login / pantallas públicas: el toggle de tema no se muestra.
   El layout público lo incluye como flotante; aquí lo anulamos. */
.sf-public-no-toggle .sf-theme-toggle{ display: none !important; }

/* ---------- Generador de contraseñas (botón al lado del input) ---------- */
.sf-pwd-wrap .sf-pwd-gen{
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .01em;
}
.sf-pwd-wrap .sf-pwd-gen i{ transition: transform .25s ease; }
.sf-pwd-wrap .sf-pwd-gen:hover i{ transform: rotate(-120deg); }

/* Botones de acción críticos (Aplicar estado, Asignar/Reasignar).
   Usa los tokens --sf-btn-* que en dark son turquesa saturado. */
.sf-btn-strong{
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.18);
  background-color: var(--sf-btn-primary-bg);
  border-color: var(--sf-btn-primary-bg);
  color: var(--sf-btn-primary-fg);
}
.sf-btn-strong:hover,
.sf-btn-strong:focus{
  background-color: var(--sf-btn-primary-hover);
  border-color: var(--sf-btn-primary-hover);
  color: var(--sf-btn-primary-fg);
  box-shadow: 0 2px 6px rgba(46, 196, 241, .35);
}
:root[data-theme="dark"] .sf-btn-strong{
  background-color: var(--sf-btn-primary-bg) !important;
  border-color: var(--sf-btn-primary-bg) !important;
  color: var(--sf-btn-primary-fg) !important;
}
:root[data-theme="dark"] .sf-btn-strong:hover,
:root[data-theme="dark"] .sf-btn-strong:focus{
  background-color: var(--sf-btn-primary-hover) !important;
  border-color: var(--sf-btn-primary-hover) !important;
  color: var(--sf-btn-primary-fg) !important;
}

/* ---------- Modal de confirmación estilado (reemplaza window.confirm) ---------- */
.sf-confirm-content{
  border-radius: var(--sf-radius);
  border: 0;
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow-lg);
  overflow: hidden;
}
.sf-confirm-icon-wrap{
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 0 .5rem;
}
.sf-confirm-icon-wrap > i{
  font-size: 2.6rem;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sf-primary-soft);
  color: var(--sf-primary-darker);
  box-shadow: 0 6px 20px rgba(110, 193, 228, .25);
}
.sf-confirm-warning > i{
  background: #FFF4DC;
  color: #B58105;
  box-shadow: 0 6px 20px rgba(245, 188, 66, .25);
}
.sf-confirm-danger  > i{
  background: #FBE9E9;
  color: #B02525;
  box-shadow: 0 6px 20px rgba(217, 71, 71, .25);
}
.sf-confirm-info    > i{
  background: var(--sf-primary-soft);
  color: var(--sf-primary-darker);
}
.sf-confirm-success > i{
  background: #E7F6EC;
  color: #1E6B3A;
  box-shadow: 0 6px 20px rgba(60, 178, 105, .25);
}
:root[data-theme="dark"] .sf-confirm-warning > i{ background: #3A2D14; color: #F5C24E; box-shadow: 0 6px 20px rgba(245, 188, 66, .15); }
:root[data-theme="dark"] .sf-confirm-danger  > i{ background: #3B1F1F; color: #F1B5B5; box-shadow: 0 6px 20px rgba(217, 71, 71, .15); }
:root[data-theme="dark"] .sf-confirm-info    > i{ background: #14323F; color: #6EC1E4; }
:root[data-theme="dark"] .sf-confirm-success > i{ background: #1F3A28; color: #B7E1C2; box-shadow: 0 6px 20px rgba(60, 178, 105, .15); }

.sf-confirm-body{
  padding: .25rem 1.5rem 1rem;
  text-align: center;
}
.sf-confirm-title{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sf-text);
  margin: 0 0 .4rem;
}
.sf-confirm-msg{
  margin: 0;
  color: var(--sf-text-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.sf-confirm-actions{
  display: flex;
  gap: .6rem;
  padding: .5rem 1.25rem 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}
.sf-confirm-actions .btn{
  min-width: 130px;
  font-weight: 550;
}
#sfConfirmOk{
  background-color: var(--sf-btn-primary-bg);
  border-color: var(--sf-btn-primary-bg);
  color: var(--sf-btn-primary-fg);
}
#sfConfirmOk:hover,
#sfConfirmOk:focus{
  background-color: var(--sf-btn-primary-hover);
  border-color: var(--sf-btn-primary-hover);
  color: var(--sf-btn-primary-fg);
}
.modal-backdrop{
  background-color: #0B1018;
}
.modal-backdrop.show{
  opacity: .55;
}

/* ---------- Tablas responsive (mobile cards) ---------- */
/* Patrón: en pantallas chicas (< 768 px) las filas pasan a mostrarse como
   tarjetas apiladas. Las celdas con clase d-none d-md-table-cell se
   ocultan. Las celdas con `data-label` muestran su etiqueta como título
   de la celda. La columna con .sf-table-sticky queda siempre visible a
   la derecha (acciones). */
.sf-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px)
{
  .sf-table-cards thead{ display: none; }
  .sf-table-cards tbody tr{
    display: block;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: .75rem;
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow-sm);
    padding: .25rem 0;
  }
  .sf-table-cards tbody td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .85rem;
    border: 0;
    text-align: right;
    min-height: 36px;
  }
  .sf-table-cards tbody td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-weight: 600;
    color: var(--sf-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .75rem;
  }
  .sf-table-cards tbody td:not([data-label])::before,
  .sf-table-cards tbody td[data-label=""]::before{ content: ''; margin: 0; flex: 0; }
  /* En mobile, la celda de Asunto crece verticalmente para que el texto
     largo del asunto + resumen IA envuelvan línea a línea. */
  .sf-table-cards tbody td[data-label="Asunto"]{
    flex-wrap: wrap;
    align-items: flex-start;
    text-align: left;
    min-height: 0;
  }
  .sf-table-cards tbody td[data-label="Asunto"]::before{
    width: 100%;
    margin-bottom: .25rem;
  }
  .sf-table-cards tbody td[data-label="Asunto"] .ticket-asunto{
    max-width: 100%;
    -webkit-line-clamp: 4;
  }
  .sf-table-cards tbody td[data-label="Asunto"] .sf-resumen-ia{
    max-width: 100%;
  }
  .sf-table-cards tbody td.sf-table-sticky{
    justify-content: flex-end;
    border-top: 1px solid var(--sf-border);
    margin-top: .35rem;
    padding-top: .65rem;
  }
  /* Sin la etiqueta "label" en mobile para celdas vacías (checkbox, acciones). */
  .sf-table-cards tbody td:not([data-label]),
  .sf-table-cards tbody td[data-label=""]{
    justify-content: flex-end;
    padding: .35rem .85rem;
  }

  /* Versión "sm" — más compacta (filas más juntas, sin card visual fuerte). */
  .sf-table-cards.sf-table-cards-sm tbody tr{
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin: 0;
    box-shadow: none;
    padding: 0;
  }
  .sf-table-cards.sf-table-cards-sm tbody td{
    padding: .45rem .5rem;
  }
}

/* En desktop, la columna de acciones queda fija a la derecha cuando la
   tabla es ancha. No usamos position: sticky realmente (problemas con
   table-responsive) — sólo la marcamos con fondo y borde para que sea
   visualmente distinguible. */
.sf-table-sticky{
  background: var(--sf-surface);
  text-align: right;
}

/* ---------- Cards ---------- */
.card-soft{
  border: 1px solid var(--sf-border);
  background: var(--sf-surface);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
}
.card-soft .card-header{
  background: var(--sf-surface-2);
  border-bottom: 1px solid var(--sf-border);
  font-weight: 650; font-size: .92rem; color: var(--sf-text);
  padding: .85rem 1.15rem;
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
}
.card-soft .card-body{ padding: 1.1rem 1.2rem; }

/* ---------- KPIs ---------- */
.kpi-card{
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-sm);
  background: var(--sf-surface);
  transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover{ transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.kpi-card .kpi-body{ padding: 1.1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.kpi-card .kpi-value{ font-size: 1.8rem; font-weight: 750; line-height: 1; letter-spacing: -.02em; color: var(--sf-text); }
.kpi-card .kpi-label{ color: var(--sf-text-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .35rem; }
.kpi-card .kpi-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--sf-primary-soft);
  color: var(--sf-primary-darker);
}

/* ---------- Contenedor de gráficos ---------- */
.sf-chart{ position: relative; width: 100%; }
.sf-chart canvas{ width: 100% !important; }

/* ---------- Badges ---------- */
.estado-badge{ font-weight: 600; letter-spacing: .01em; padding: .4em .65em; border-radius: 999px; font-size: .72rem; }
.badge{ border-radius: 999px; font-weight: 600; }

/* ---------- Tablas ---------- */
.table{
  --bs-table-bg: var(--sf-surface);
  --bs-table-color: var(--sf-text);
  --bs-table-border-color: var(--sf-border);
  --bs-table-striped-bg: var(--sf-surface-2);
  --bs-table-striped-color: var(--sf-text);
  --bs-table-hover-bg: var(--sf-surface-2);
  --bs-table-hover-color: var(--sf-text);
  color: var(--sf-text);
  background-color: var(--sf-surface);
  margin-bottom: 0;
}
.table > :not(caption) > * > *{
  background-color: var(--sf-table-cell-bg, var(--sf-surface));
  color: var(--sf-text);
}
.table thead th{
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sf-text-muted);
  background: var(--sf-surface-2);
  border-bottom: 1px solid var(--sf-border);
  border-top: none;
  padding: .65rem .85rem;
  font-weight: 700;
}
.table td{
  vertical-align: middle;
  padding: .65rem .85rem;
  border-color: var(--sf-border);
  color: var(--sf-text);
}
.table tbody tr{ transition: background .12s; }
.table-hover tbody tr:hover{ background: var(--sf-surface-2); color: var(--sf-text); }

/* Dark: explícito, porque Bootstrap también tiene defaults que pisan tokens. */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > :not(caption) > * > *{
  --bs-table-bg: var(--sf-surface);
  --bs-table-color: var(--sf-text);
  --bs-table-border-color: var(--sf-border);
  --bs-table-striped-bg: var(--sf-surface-2);
  --bs-table-striped-color: var(--sf-text);
  --bs-table-hover-bg: var(--sf-surface-2);
  --bs-table-hover-color: var(--sf-text);
  background-color: var(--sf-surface);
  color: var(--sf-text);
}
:root[data-theme="dark"] .table thead th{
  color: #FFFFFF;
  background: var(--sf-secondary-soft);
  border-bottom-color: var(--sf-border-strong);
}
:root[data-theme="dark"] .table tbody tr{
  color: var(--sf-text);
}
:root[data-theme="dark"] .table a,
:root[data-theme="dark"] .table .link-reset{
  color: #B6E3F3;
}
:root[data-theme="dark"] .table a:hover{
  color: #FFFFFF;
}

/* Paginación: botones legibles en dark */
:root[data-theme="dark"] .pagination .page-link{
  background-color: var(--sf-surface-2);
  color: var(--sf-text);
  border-color: var(--sf-border-strong);
}
:root[data-theme="dark"] .pagination .page-item.active .page-link{
  background-color: var(--sf-primary);
  border-color: var(--sf-primary);
  color: #FFFFFF;
}
:root[data-theme="dark"] .pagination .page-link:hover{
  background-color: var(--sf-surface-3);
  color: var(--sf-text);
}

.table-responsive{ border-radius: 0 0 var(--sf-radius) var(--sf-radius); }
.ticket-asunto{
  max-width: 380px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-resumen-ia{
  margin-top: 4px;
  font-size: .8rem;
  color: var(--sf-text-muted);
  font-style: italic;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-resumen-ia i{ color: var(--sf-primary-darker); margin-right: 4px; }
.sf-cliente-mail{
  margin-top: 4px;
  font-size: .8rem;
  color: var(--sf-text-muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-cliente-mail i{ color: var(--sf-primary-darker); margin-right: 4px; }
.link-reset{ color: inherit; text-decoration: none; }
.link-reset:hover{ color: var(--sf-primary-darker); }

/* ---------- Login / pantallas públicas ---------- */
/* El card del login SIEMPRE es claro (independiente del tema):
   el logo PNG ahora tiene fondo TRANSPARENTE y queremos que se integre al
   card blanco sin verse como mancha blanca en dark. La zona fuera del
   card sí cambia según el tema (celeste claro en light, gris oscuro
   profundo en dark). */
.login-card{
  max-width: 400px; margin: 0 auto;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--sf-radius-lg);
  box-shadow: 0 24px 60px rgba(16,24,40,.22);
  background: #FFFFFF;
  overflow: hidden;
  color: #2A2E34;
}
.login-header{
  /* Fondo blanco liso (sin gradiente) para que el logo transparente se
     asiente limpio y centrado sobre la cabecera del card. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6rem 1.5rem 1.2rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.login-body{
  padding: 1.5rem 1.5rem 1.6rem;
  background: #FFFFFF;
  color: #2A2E34;
}
.login-body h6.sf-login-title{
  color: #2A2E34;
  font-weight: 700;
}
.login-body p,
.login-body .text-muted{
  color: #5F6772 !important;
}
.login-logo{
  /* Centrado horizontal + vertical dentro de la cabecera flex. */
  display: block;
  margin: 0 auto;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.login-logo.login-logo-sm{ max-height: 64px; }

/* El footer del layout público (texto pequeño debajo del card) */
.sf-public footer{
  color: var(--sf-public-muted, rgba(255,255,255,.82));
}

.sf-public{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(160deg, var(--sf-public-from) 0%, var(--sf-public-to) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.sf-public-wrap{ width: 100%; max-width: 460px; }

/* En la página pública (.sf-public), los textos informativos directos
   bajo el card (NO DENTRO del card) deben ser claros para contrastar
   con el fondo turquesa. DENTRO del .login-card los .text-muted son
   gris oscuro (regla .login-body p, .login-body .text-muted abajo). */
.sf-public > .container > .text-muted.small,
.sf-public .alert-info,
.sf-public .form-text{ color: rgba(255,255,255,.92) !important; }

/* Links muted dentro del card de login: gris oscuro hover turquesa. */
.login-body a.text-muted,
.login-body a.text-muted.small{
  color: #54595F !important;
  text-decoration: none;
}
.login-body a.text-muted:hover{
  color: var(--sf-primary-darker) !important;
  text-decoration: underline;
}

/* ---------- Topbar (logo) ---------- */
.sf-topbar-logo{ height: 30px; width: auto; display: block; }

/* ---------- Formularios 2FA / secciones ---------- */
.sf-2fa-input{
  font-family: 'JetBrains Mono', 'Courier New', Consolas, monospace;
  font-size: 1.7rem; letter-spacing: .3em;
  padding: .85rem .5rem;
  background: var(--sf-surface-3);
}
.sf-2fa-form{ margin-top: .25rem; }
.form-section-title{
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--sf-text-muted); font-weight: 700;
  padding-top: .5rem;
  border-top: 1px solid var(--sf-border);
}

/* ---------- Timeline / auditoría ---------- */
.timeline{ position: relative; padding-left: 1.5rem; }
.timeline::before{ content: ''; position: absolute; left: .45rem; top: 0; bottom: 0; width: 2px; background: var(--sf-border); }
.timeline-item{ position: relative; margin-bottom: 1.1rem; }
.timeline-item::before{ content: ''; position: absolute; left: -1.25rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--sf-primary); border: 2px solid var(--sf-surface); }
.timeline-item.interno::before{ background: #f59e0b; }
.timeline-item.cliente::before{ background: #3b82f6; }
.log-timeline{ font-size: .85rem; }
.log-timeline .log-type{ font-weight: 600; color: var(--sf-primary-darker); }

.avatar{
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-dark));
  color: var(--sf-text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}

/* ---------- Filtros / botones ---------- */
.filtros-bar{
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-sm);
  padding: .9rem 1.15rem;
  margin-bottom: 1.15rem;
}
.btn-primary{
  background: var(--sf-btn-primary-bg);
  border-color: var(--sf-btn-primary-bg);
  color: var(--sf-btn-primary-fg);
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--sf-btn-primary-hover);
  border-color: var(--sf-btn-primary-hover);
  color: var(--sf-btn-primary-fg);
}
.btn-primary:active,
.btn-primary.active{
  background: var(--sf-btn-primary-active) !important;
  border-color: var(--sf-btn-primary-active) !important;
  color: var(--sf-btn-primary-fg) !important;
}
:root[data-theme="dark"] .btn-check:focus + .btn-primary,
:root[data-theme="dark"] .btn-check:checked + .btn-primary{
  background-color: var(--sf-btn-primary-bg) !important;
  border-color: var(--sf-btn-primary-bg) !important;
  color: var(--sf-btn-primary-fg) !important;
}
.btn{ border-radius: 9px; font-weight: 550; }
.btn-light{
  background: var(--sf-surface);
  border-color: var(--sf-border);
  color: var(--sf-text);
}
.btn-light:hover{ background: var(--sf-surface-2); border-color: var(--sf-border-strong); color: var(--sf-text); }
.btn-outline-secondary{ color: var(--sf-text-muted); border-color: var(--sf-border-strong); }
.btn-outline-secondary:hover{ background: var(--sf-surface-2); color: var(--sf-text); border-color: var(--sf-border-strong); }

.form-control, .form-select{
  border-radius: 9px;
  border-color: var(--sf-border-strong);
  background-color: var(--sf-surface-3);
  color: var(--sf-text);
}
.form-control::placeholder,
.form-select::placeholder{
  color: var(--sf-text-muted);
  opacity: .75;
}
.form-control:focus, .form-select:focus{
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 .25rem var(--sf-primary-ring);
  background-color: var(--sf-surface);
  color: var(--sf-text);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select{
  background-color: var(--sf-surface-3);
  color: var(--sf-text);
}
.form-check-input:checked{
  background-color: var(--sf-primary);
  border-color: var(--sf-primary);
}

.text-sf{ color: var(--sf-primary-darker); }
.cursor-pointer{ cursor: pointer; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Dropdown / modal coherentes con el tema */
.dropdown-menu{
  background-color: var(--sf-surface);
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
  box-shadow: var(--sf-shadow);
}
.dropdown-item{
  color: var(--sf-text);
}
.dropdown-item:hover,
.dropdown-item:focus{
  background-color: var(--sf-surface-2);
  color: var(--sf-text);
}
.dropdown-divider{ border-color: var(--sf-border); }
.modal-content{
  background-color: var(--sf-surface);
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}
.modal-header, .modal-footer{ border-color: var(--sf-border); }
.form-text{ color: var(--sf-text-muted); }

/* ---------- Cuerpos de mensaje ---------- */
.mensaje-cuerpo{ line-height: 1.6; color: var(--sf-text); }
.mensaje-cuerpo p{ margin-bottom: .5rem; }
.mensaje-cuerpo img{ max-width: 100%; height: auto; border-radius: .5rem; }
.mensaje-cuerpo a{ color: var(--sf-primary-darker); }
.mensaje-cuerpo table{ max-width: 100%; border-collapse: collapse; }
.mensaje-cuerpo blockquote{
  border-left: 3px solid var(--sf-border-strong);
  margin: .4rem 0; padding: .2rem .8rem; color: var(--sf-text-muted);
}

/* ---------- Hilo de correos ---------- */
.email-thread{ display: flex; flex-direction: column; gap: .85rem; }
.email-msg{
  border: 1px solid var(--sf-border);
  border-left: 4px solid var(--sf-border-strong);
  border-radius: 12px;
  padding: .8rem .95rem;
  background: var(--sf-surface);
  transition: box-shadow .15s;
}
.email-msg:hover{ box-shadow: var(--sf-shadow-sm); }
.email-msg.email-in{ border-left-color: #3b82f6; background: var(--sf-surface-2); }
.email-msg.email-out{ border-left-color: #22c55e; background: var(--sf-surface-2); }
.email-msg.email-sys{ border-left-color: #a78bfa; background: var(--sf-surface-2); }
.email-msg.email-note{ border-left-color: #f59e0b; background: var(--sf-surface-2); }
.email-head .email-avatar{ flex: 0 0 auto; width: 36px; height: 36px; font-size: .72rem; }
.email-body{ margin-top: .55rem; font-size: .88rem; color: var(--sf-text); }
.email-collapsed{ max-height: 170px; overflow: hidden; position: relative; }
.email-collapsed::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--sf-surface));
}
:root[data-theme="dark"] .email-collapsed::after{
  background: linear-gradient(to bottom, rgba(30,35,43,0), var(--sf-surface));
}
.email-toggle{ color: var(--sf-primary-darker); font-size: .8rem; text-decoration: none; padding: 0; }
.email-toggle:hover{ text-decoration: underline; }
.min-w-0{ min-width: 0; }

/* ---------- Alerts coherentes con tema ---------- */
.alert{
  border-width: 1px;
  border-left-width: 4px;
  border-radius: var(--sf-radius);
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  font-size: .9rem;
  box-shadow: var(--sf-shadow-sm);
}
.alert > i.bi:first-child{
  font-size: 1.1rem;
  line-height: 1.4;
  margin-top: 1px;
  flex: 0 0 auto;
}
.alert .btn-close{ margin-left: auto; }
.alert-success{
  background: #E7F6EC; color: #1E6B3A; border-color: #BFE5CC; border-left-color: #2EA85B;
}
.alert-danger{
  background: #FBE9E9; color: #8C2424; border-color: #F0BFBF; border-left-color: #D9534F;
}
.alert-info{
  background: var(--sf-primary-soft); color: var(--sf-primary-darker); border-color: var(--sf-primary); border-left-color: var(--sf-primary-dark);
}
.alert-warning{
  background: #FFF6E0; color: #825919; border-color: #F2D693; border-left-color: #D89D2E;
}
.alert-light{
  background: var(--sf-surface-2); color: var(--sf-text); border-color: var(--sf-border); border-left-color: var(--sf-primary);
}
:root[data-theme="dark"] .alert-success{
  background: #1F3A28; color: #B7E1C2; border-color: #2D5739; border-left-color: #4CC87A;
}
:root[data-theme="dark"] .alert-danger{
  background: #3B1F1F; color: #F1B5B5; border-color: #6A2E2E; border-left-color: #E36868;
}
:root[data-theme="dark"] .alert-info{
  background: rgba(79, 166, 204, .15); color: #B6E3F3; border-color: var(--sf-primary-dark); border-left-color: var(--sf-primary);
}
:root[data-theme="dark"] .alert-warning{
  background: #3B2F12; color: #F1D490; border-color: #6A5322; border-left-color: #E0B54A;
}
:root[data-theme="dark"] .alert-light{
  background: var(--sf-surface-2); color: var(--sf-text); border-color: var(--sf-border); border-left-color: var(--sf-primary);
}

/* ---------- Utilidades responsive ---------- */
@media (max-width: 991px){
  .sf-sidebar{ left: -270px; transition: left .25s ease; box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  .sf-sidebar.show{ left: 0; }
  .sf-main{ margin-left: 0; }
  .sf-content{ padding: 1rem 1.1rem; }
  .sf-topbar{ padding: .55rem .9rem; min-height: 52px; }
  .sf-topbar .page-title{ font-size: .95rem; }
  .sf-topbar-logo{ height: 26px; }
  .kpi-card .kpi-value{ font-size: 1.5rem; }
  .ticket-asunto{ max-width: 55vw; }
}
@media (max-width: 575px){
  .card-soft .card-body{ padding: .85rem .9rem; }
  .card-soft .card-header{ padding: .7rem .9rem; font-size: .88rem; }
  .email-msg{ padding: .7rem .8rem; }
  body{ font-size: 14px; }
}