/* =====================================================================
   Faifex GMAO — Sistema de identidad de marca
   "No vendemos productos. Entendemos procesos."

   Paleta (no negociable):
     Ink     #0B0B0C  fondo oscuro / texto sobre claro
     Paper   #F5F5F4  texto sobre oscuro / fondos claros
     Naranja #EA580C  acento ÚNICO y plano — nunca texto de lectura
     Gris    #6B7280  bajadas / datos secundarios (textos cortos)
   Tipografía:
     Space Grotesk  titulares
     IBM Plex Sans  cuerpo
     IBM Plex Mono  datos / etiquetas / terminal
   ===================================================================== */

:root {
    /* ── Tokens de marca ─────────────────────────────────────────────── */
    --fx-ink:         #0B0B0C;
    --fx-ink-soft:    #17171a;   /* superficies elevadas sobre ink        */
    --fx-paper:       #F5F5F4;
    --fx-orange:      #EA580C;
    --fx-orange-deep: #9A3412;   /* fin de degradado, SOLO digital grande */
    --fx-gray:        #6B7280;
    --fx-hair:        #D6D3D1;   /* filetes / bordes                      */

    --fx-display: 'Space Grotesk', system-ui, sans-serif;
    --fx-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --fx-mono:    'IBM Plex Mono', ui-monospace, monospace;

    /* ── Compatibilidad con el resto del código (alias) ──────────────── */
    --primary:       var(--fx-orange);
    --primary-dark:  var(--fx-orange-deep);
    --primary-light: rgba(234, 88, 12, 0.10);
    --success:  #15803d;
    --warning:  #b45309;
    --danger:   #b91c1c;
    --info:     #0e7490;
    --light:    #f5f5f4;
    --dark:     var(--fx-ink);
    --sidebar-w: 244px;

    /* Bootstrap 5 overrides vía CSS vars nativas */
    --bs-primary:      #EA580C;
    --bs-primary-rgb:  234, 88, 12;
    --bs-body-font-family: var(--fx-body);
    --bs-body-color:   #1c1917;
    --bs-link-color:   #C2410C;
    --bs-link-hover-color: #9A3412;
}

/* ── Reset / Base ────────────────────────────────────────────────────── */
body {
    font-family: var(--fx-body);
    background-color: var(--fx-paper);
    color: #1c1917;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fx-display);
    letter-spacing: -0.015em;
}

/* Datos, valores y etiquetas tipo terminal → monoespaciada */
.fx-mono, code, kbd, samp,
.kpi-value, .kpi-card .kpi-value,
.table thead th,
.sidebar-section,
.badge { font-family: var(--fx-mono); }

/* ── Marca / acento naranja ──────────────────────────────────────────── */
/* Regla: el naranja es acento gráfico. Como color de "texto" lo permitimos
   solo en su variante oscura accesible (orange-700) para links/énfasis. */
.text-primary   { color: #C2410C !important; }
.border-primary { border-color: var(--fx-orange) !important; }
.bg-primary     { background-color: var(--fx-orange) !important; }
a               { color: #C2410C; }
a:hover         { color: var(--fx-orange-deep); }

.btn-primary {
    background-color: var(--fx-orange);
    border-color:     var(--fx-orange);
    color: var(--fx-paper);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--fx-orange-deep);
    border-color:     var(--fx-orange-deep);
    color: var(--fx-paper);
}
.btn-outline-primary {
    color:        #C2410C;
    border-color: var(--fx-orange);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--fx-orange);
    border-color:     var(--fx-orange);
    color: var(--fx-paper);
}
.btn-check:focus + .btn, .btn:focus {
    box-shadow: 0 0 0 .2rem rgba(234, 88, 12, .25);
}

/* Botones oscuros de marca (CTA secundario) */
.btn-ink {
    background-color: var(--fx-ink);
    border-color:     var(--fx-ink);
    color: var(--fx-paper);
    font-weight: 600;
}
.btn-ink:hover { background-color: #000; color: var(--fx-paper); }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select { border-color: var(--fx-hair); }
.form-control:focus,
.form-select:focus {
    border-color: var(--fx-orange);
    box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.20);
}
.form-check-input:checked {
    background-color: var(--fx-orange);
    border-color:     var(--fx-orange);
}
.form-check-input:focus { border-color: var(--fx-orange); box-shadow: 0 0 0 .2rem rgba(234,88,12,.20); }
.form-label { font-weight: 600; color: #292524; }

/* ── Navbar ──────────────────────────────────────────────────────────── */
/* Fondo Paper para que el lockup oficial (letras en tinta) se lea correcto.
   La franja de acento inferior es el único portador del naranja. */
.navbar {
    background-color: #fff;
    border-bottom: 1px solid var(--fx-hair);
    box-shadow: 0 2px 6px rgba(11,11,12,.05);
    z-index: 1030;
}
.navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--fx-orange);
}
.navbar-brand { display: inline-flex; align-items: center; padding-top: .2rem; padding-bottom: .2rem; }
.navbar-brand img { height: 32px; width: 32px; display: block; border-radius: 8px; }
.navbar .nav-link {
    font-family: var(--fx-body);
    font-weight: 500;
    color: #57534e !important;
    transition: color .15s;
    position: relative;
}
.navbar .nav-link:hover { color: var(--fx-ink) !important; }
.navbar .nav-link.active { color: var(--fx-ink) !important; }
.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: .75rem; right: .75rem; bottom: -2px;
    height: 2px;
    background: var(--fx-orange);
    border-radius: 2px;
}
.navbar .dropdown-toggle { color: #292524 !important; }

/* Avatar de usuario: monograma (ink + inicial paper), no naranja de relleno */
.fx-user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--fx-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fx-mono);
    font-size: .8rem; font-weight: 600;
    color: var(--fx-paper);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    min-height: calc(100vh - 56px);
    background: #fff;
    border-right: 1px solid var(--fx-hair);
    padding-top: 1rem;
    flex-shrink: 0;
}
.sidebar .nav-link {
    font-family: var(--fx-body);
    color: #44403c;
    font-weight: 500;
    border-radius: 6px;
    margin: 2px 10px;
    padding: 8px 12px;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sidebar .nav-link:hover {
    background: var(--primary-light);
    color: #C2410C;
}
.sidebar .nav-link.active {
    background: var(--fx-ink);
    color: var(--fx-paper);
    box-shadow: inset 3px 0 0 var(--fx-orange);
}
.sidebar .nav-link svg,
.sidebar .nav-link .icon { width: 18px; margin-right: 8px; opacity: .7; }
.sidebar-section {
    font-size: .68rem;
    font-weight: 600;
    color: var(--fx-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 20px 4px;
}
.sidebar-section::before { content: '// '; color: var(--fx-orange); }
.content-wrapper { flex: 1; min-width: 0; padding: 1.5rem; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
    border-radius: 10px;
    border: 1px solid var(--fx-hair);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 4px 16px rgba(11,11,12,.07) !important; }
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--fx-hair);
    font-family: var(--fx-display);
    font-weight: 600;
}
.kpi-card .kpi-value {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fx-ink);
}
.kpi-card .kpi-label {
    font-family: var(--fx-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--fx-gray);
    margin-bottom: .25rem;
}
.kpi-card .kpi-icon { font-size: 2rem; opacity: .9; }

/* ── Login ───────────────────────────────────────────────────────────── */
.brand-icon { width: 56px; height: 56px; }
.login-card  { max-width: 420px; }
/* Fondo oscuro de marca para la pantalla de acceso */
.fx-login-bg {
    background:
      radial-gradient(1200px 600px at 100% -10%, rgba(234,88,12,.14), transparent 55%),
      var(--fx-ink);
    min-height: 100vh;
}
.fx-login-bg .card {
    background: #fff;
    border: 1px solid rgba(245,245,244,.08);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table thead th {
    background-color: #fafaf9;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #57534e;
    border-bottom: 2px solid var(--fx-hair);
    white-space: nowrap;
}
.table-hover tbody tr:hover { background-color: rgba(234, 88, 12, .05); }
.table td { vertical-align: middle; }

/* ── Badges / Estados ────────────────────────────────────────────────── */
.badge {
    padding: .38em .70em;
    font-weight: 500;
    font-size: .74em;
    letter-spacing: .2px;
    border-radius: 5px;
}

/* Estado activos */
.badge-operativo     { background-color: #dcfce7; color: #166534; }
.badge-mantenimiento { background-color: #ffedd5; color: #9a3412; }
.badge-fuera-servicio{ background-color: #fee2e2; color: #991b1b; }

/* Prioridad OT */
.badge-critica { background-color: #fee2e2; color: #991b1b; }
.badge-alta    { background-color: #ffedd5; color: #9a3412; }
.badge-media   { background-color: #e7e5e4; color: #292524; }
.badge-baja    { background-color: #f5f5f4; color: #57534e; }

/* Estado OT */
.badge-abierta     { background-color: #e7e5e4; color: #292524; }
.badge-en-progreso { background-color: #ffedd5; color: #9a3412; }
.badge-en-espera   { background-color: #f5f5f4; color: #57534e; }
.badge-completada  { background-color: #dcfce7; color: #166534; }
.badge-cancelada   { background-color: #fee2e2; color: #991b1b; }

/* SLA */
.badge-sla-cumplido    { background-color: #dcfce7; color: #166534; }
.badge-sla-en-riesgo   { background-color: #ffedd5; color: #9a3412; }
.badge-sla-incumplido  { background-color: #fee2e2; color: #991b1b; }
.badge-sla-pendiente   { background-color: #f5f5f4; color: #57534e; }

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal-header {
    background-color: var(--fx-ink);
    color: var(--fx-paper);
    border-bottom: 2px solid var(--fx-orange);
}
.modal-header .modal-title { font-family: var(--fx-display); }
.modal-header .btn-close { filter: invert(1) grayscale(1); opacity: .8; }
.modal-header .btn-close:focus { box-shadow: 0 0 0 .25rem rgba(234, 88, 12, .3); }

/* ── Toast container ─────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    min-width: 280px;
}

/* ── Timeline (OT detail) ────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute;
    left: .5rem; top: 0; bottom: 0;
    width: 2px;
    background: var(--fx-hair);
}
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.625rem; top: .35rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--fx-orange);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--fx-orange);
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.page-link { color: #C2410C; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(234, 88, 12, .25); }
.page-item.active .page-link {
    background-color: var(--fx-orange);
    border-color:     var(--fx-orange);
    color: var(--fx-paper);
}

/* ── Utilidades de marca ─────────────────────────────────────────────── */
.fx-eyebrow {
    font-family: var(--fx-mono);
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fx-gray);
}
.fx-eyebrow::before { content: '// '; color: var(--fx-orange); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { display: none !important; }
    .content-wrapper { padding: 1rem .75rem; }
    .kpi-card .kpi-value { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    .table-responsive-xs { overflow-x: auto; }
    .btn-action-group .btn { padding: .25rem .5rem; font-size: .8rem; }
}