/* ==========================================================================
   TechShield S.A.S de C.V. — Capa de marca para la Mesa de Ayuda
   Manual de Identidad de Marca v1.1 (oct. 2026)

   Este archivo SOLO cambia la apariencia (colores y tipografías).
   No toca HTML, JavaScript, Supabase ni la lógica de tickets/SLA.
   Se carga DESPUÉS de los estilos originales y los sobrescribe.
   Para revertir: quitar la línea <link> que lo incluye.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta oficial
   -------------------------------------------------------------------------- */
:root {
  --ts-institucional: #0B56A4;   /* Azul Institucional */
  --ts-circuito:      #1E88D8;   /* Azul Circuito */
  --ts-senal:         #4DA6F5;   /* Azul Señal */
  --ts-noche:         #0A1F3D;   /* Azul Noche */
  --ts-grafito:       #2B3646;   /* Grafito */
  --ts-acero:         #6B7A90;   /* Gris Acero */
  --ts-nube:          #EEF3F9;   /* Nube */

  /* Derivados (tintes de la paleta para fondos y bordes) */
  --ts-tinte:         #E4EEF9;
  --ts-tinte-suave:   #F5F8FC;
  --ts-borde:         #D5DFEB;
  --ts-sombra:        rgba(10, 31, 61, 0.08);

  --ts-font-titulos:  'Montserrat', 'Segoe UI', sans-serif;
  --ts-font-texto:    'Open Sans', 'Segoe UI', sans-serif;

  /* ---- Consola de técnicos / admin (index.html) ---- */
  --hub-bg:           var(--ts-nube);
  --hub-sidebar:      #FFFFFF;
  --hub-topbar:       var(--ts-institucional);
  --hub-accent:       var(--ts-circuito);
  --hub-accent-hover: var(--ts-institucional);
  --hub-selected:     var(--ts-tinte);
  --hub-border:       var(--ts-borde);
  --hub-panel:        #FFFFFF;
  --hub-panel-soft:   var(--ts-tinte-suave);
  --hub-navy:         var(--ts-noche);
  --hub-cyan:         var(--ts-senal);
  --hub-ring:         rgba(30, 136, 216, 0.18);
  --text-main:        var(--ts-grafito);
  --text-muted:       var(--ts-acero);
  --text-light:       #9AA6B6;
  /* Los colores de estado (abierto, en curso, resuelto, reabierto) se conservan:
     son semánticos y el equipo ya los reconoce. */

  /* ---- Portal de clientes (ticket.html / ticket.css) ---- */
  --navy:       var(--ts-institucional);
  --navy-deep:  var(--ts-noche);
  --blue:       var(--ts-circuito);
  --blue-dark:  var(--ts-institucional);
  --cyan:       var(--ts-senal);
  --page:       var(--ts-nube);
  --line:       var(--ts-borde);
  --text:       var(--ts-grafito);
  --muted:      var(--ts-acero);
}

/* --------------------------------------------------------------------------
   2. Tipografía: Open Sans para texto, Montserrat para títulos y cifras
   -------------------------------------------------------------------------- */
body,
button, input, select, textarea, .btn { font-family: var(--ts-font-texto); }

h1, h2, h3, h4,
.login-card h1, .view-title-main, .list-header, .table-title,
.detail-header-info h2, .sla-header h2, .sla-section h3,
.stat-card .value, .sla-kpi strong, .sla-donut-inner strong,
.modal-header, .sidebar-brand-card strong, .topbar-brand,
.brand strong, .section-heading h2, .tracking-status .ticket-code,
.section-number, .btn-create-ticket, .btn-primary, .button-primary {
  font-family: var(--ts-font-titulos);
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   3. Consola de técnicos / admin
   -------------------------------------------------------------------------- */
#loginScreen {
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 166, 245, 0.20), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(11, 86, 164, 0.14), transparent 40%),
    linear-gradient(135deg, #F7FAFD 0%, var(--ts-nube) 55%, #E2EBF6 100%);
}
.login-card { box-shadow: 0 24px 70px rgba(10, 31, 61, 0.14); border-color: var(--ts-borde); }
.login-card:before { background: linear-gradient(90deg, var(--ts-noche), var(--ts-institucional), var(--ts-circuito), var(--ts-senal)); }
.login-card p { color: var(--ts-circuito); }
.role-tabs { background: var(--ts-tinte-suave); }
.role-tab.active { color: var(--ts-institucional); box-shadow: 0 6px 16px var(--ts-sombra); }

.btn-primary,
.btn-create-ticket {
  background: linear-gradient(135deg, var(--ts-circuito), var(--ts-institucional));
  box-shadow: 0 10px 22px rgba(11, 86, 164, 0.22);
}
.btn-primary:hover,
.btn-create-ticket:hover { background: linear-gradient(135deg, var(--ts-institucional), var(--ts-noche)); }
.btn-secondary { background: var(--ts-tinte-suave); color: var(--ts-grafito); }
.btn-secondary:hover { background: var(--ts-tinte); }

.hub-topbar {
  background: linear-gradient(90deg, var(--ts-noche) 0%, var(--ts-institucional) 60%, var(--ts-circuito) 100%);
  box-shadow: 0 10px 26px rgba(10, 31, 61, 0.20);
}
.topbar-nav-links span.active { border-bottom-color: var(--ts-senal); }

.hub-col-vistas { background: linear-gradient(180deg, #FFFFFF 0%, var(--ts-tinte-suave) 100%); }
.sidebar-brand-card small { color: var(--ts-circuito); }
.view-item-link:hover { background: var(--ts-tinte-suave); }
.view-item-link.active { color: var(--ts-institucional); border-left-color: var(--ts-institucional); }
.view-item-link span.count { background: var(--ts-tinte); color: var(--ts-institucional); }

.list-header, .detail-header-info h2 { color: var(--ts-noche); }
.ticket-list-card:hover { background: var(--ts-tinte-suave); }
.hub-col-detalle { background: var(--ts-nube); }

.stat-card { border-left-color: var(--ts-institucional); }
.radial-bg, .bar-track { stroke: var(--ts-tinte); background: var(--ts-tinte); }
.sla-track, .sla-status-bar { background: var(--ts-tinte); }

.stream-msg-card, .stat-card, .sla-dashboard-panel, .chart-section,
.corporate-table-box, .contact-card-premium, .admin-user-panel,
.notification-result { box-shadow: 0 12px 32px var(--ts-sombra); }

.modal-backdrop { background: rgba(10, 31, 61, 0.50); }
.modal-header { color: var(--ts-noche); }
.modal-footer { background: var(--ts-tinte-suave); }
#toastSystem { background: var(--ts-noche); border-left: 4px solid var(--ts-senal); }

/* --------------------------------------------------------------------------
   4. Portal de clientes (/ticket)
   -------------------------------------------------------------------------- */
.site-header { border-top: 4px solid var(--ts-institucional); }
.brand small { color: var(--ts-circuito); }
.staff-link { color: var(--ts-institucional); }
.eyebrow { color: var(--ts-circuito); }
.section-number { background: var(--ts-tinte); color: var(--ts-institucional); }
.field input, .field textarea, .field select { border-color: var(--ts-borde); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ts-circuito);
  box-shadow: 0 0 0 3px rgba(30, 136, 216, 0.16);
}
.button-primary { background: var(--ts-institucional); }
.button-primary:hover:not(:disabled) { background: var(--ts-noche); }
.button-secondary { color: var(--ts-institucional); border-color: #B9CDE4; }
.button-secondary:hover:not(:disabled) { background: var(--ts-tinte-suave); }
.workspace { box-shadow: 0 14px 38px var(--ts-sombra); }
.tracking-column { background: var(--ts-tinte-suave); }
.status-pill { background: var(--ts-tinte); color: var(--ts-institucional); }
.status-list { border-left-color: var(--ts-borde); }
.status-list li::before { border-color: var(--ts-tinte-suave); }
.status-list li.done::before { background: var(--ts-circuito); }

/* --------------------------------------------------------------------------
   5. Logotipo sin recuadro blanco (isotipo PNG transparente del kit oficial)
   -------------------------------------------------------------------------- */
.corporate-logo-img { width: 112px; filter: drop-shadow(0 10px 18px rgba(11, 86, 164, 0.18)); }
.topbar-logo,
.sidebar-brand-card img {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  object-fit: contain;
}
.topbar-logo { width: 34px; height: 34px; }
.sidebar-brand-card img { width: 38px; height: 38px; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
@media (max-width: 620px) {
  .corporate-logo-img { width: 96px; }
  .brand-logo { width: 38px; height: 38px; }
}