/* =============================================
   nexuz TALLER — Design System
   Rebrand: Rojo + Grafito + Plata (logo nexuz)
   ============================================= */

/* ── Fuentes de marca (logotipo) ── */
@font-face {
    font-family: 'Suissnord';           /* palabra "nexuz" */
    src: url('/fonts/Suissnord.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Abnes';               /* palabra "taller" */
    src: url('/fonts/abnes.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Clases utilitarias del logotipo tipográfico */
.brand-nexuz  { font-family: 'Suissnord', 'Segoe UI', sans-serif; font-weight: normal; letter-spacing: .5px; }
.brand-taller { font-family: 'Abnes', 'Segoe UI', sans-serif; font-weight: normal; letter-spacing: 1px; }

/* ── Variables ── */
:root {
    /* Marca — Rojo */
    --nt-red:        #C8102E;
    --nt-red-dark:   #9E0C22;
    --nt-red-light:  #E11B33;
    --nt-red-pale:   #FCE8EB;

    /* Marca — Grafito (estructura, texto oscuro, sidebar) */
    --nt-graphite:       #2C2C31;
    --nt-graphite-dark:  #1C1C20;
    --nt-graphite-deep:  #141416;
    --nt-graphite-soft:  #3A3A41;
    --nt-graphite-pale:  #F1F1F3;

    /* Marca — Plata */
    --nt-silver:      #B7B7BA;
    --nt-silver-pale: #ECECEE;

    /* Funcionales */
    --nt-green:       #16A34A;
    --nt-green-pale:  #DCFCE7;
    --nt-amber:       #D97706;
    --nt-amber-pale:  #FEF3C7;
    --nt-danger:      #DC2626;
    --nt-danger-pale: #FEE2E2;
    --nt-info:        #1D4ED8;
    --nt-info-pale:   #DBEAFE;

    /* Neutros */
    --nt-text:        #1E2024;
    --nt-text-muted:  #6B7079;
    --nt-border:      #E4E6EA;
    --nt-bg:          #F6F7F9;
    --nt-card-shadow: 0 1px 2px rgba(20,20,22,.06), 0 6px 20px rgba(20,20,22,.06);
    --nt-radius:      12px;

    /* ── Alias de compatibilidad (código heredado navy/orange) ──
       navy → estructura grafito · orange → acento rojo */
    --nt-navy:        var(--nt-graphite);
    --nt-navy-dark:   var(--nt-graphite-dark);
    --nt-navy-light:  var(--nt-graphite-soft);
    --nt-navy-pale:   var(--nt-graphite-pale);
    --nt-orange:      var(--nt-red);
    --nt-orange-dark: var(--nt-red-dark);
    --nt-orange-pale: var(--nt-red-pale);
    --nt-yellow:      var(--nt-amber);
    --nt-yellow-pale: var(--nt-amber-pale);
    --nt-red-legacy:  var(--nt-danger);
}

/* ── Reset / Base ── */
html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--nt-bg);
    color: var(--nt-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ── Links ── */
a { color: var(--nt-red); text-decoration: none; }
a:hover { color: var(--nt-red-dark); text-decoration: none; }

/* ── Código (números OT) ── */
code {
    color: var(--nt-red-dark);
    background-color: var(--nt-red-pale);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 { color: var(--nt-text); font-weight: 700; letter-spacing: -0.2px; }

/* ── Botón primario — rojo ── */
.btn-primary {
    background-color: var(--nt-red);
    border-color: var(--nt-red);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(200,16,46,.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--nt-red-dark) !important;
    border-color: var(--nt-red-dark) !important;
    color: #fff;
}

/* ── Botón outline primary ── */
.btn-outline-primary {
    color: var(--nt-red);
    border-color: var(--nt-red);
    border-radius: 8px;
    font-weight: 600;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--nt-red) !important;
    border-color: var(--nt-red) !important;
    color: #fff !important;
}

/* ── Botón secundario — grafito ── */
.btn-secondary {
    background-color: var(--nt-graphite);
    border-color: var(--nt-graphite);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
}
.btn-secondary:hover {
    background-color: var(--nt-graphite-dark);
    border-color: var(--nt-graphite-dark);
    color: #fff;
}
.btn-outline-secondary {
    color: var(--nt-graphite);
    border-color: var(--nt-border);
    border-radius: 8px;
    font-weight: 600;
}
.btn-outline-secondary:hover {
    background-color: var(--nt-graphite);
    border-color: var(--nt-graphite);
    color: #fff;
}

/* ── Botones generales ── */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.btn-success { background-color: var(--nt-green); border-color: var(--nt-green); }
.btn-danger  { background-color: var(--nt-danger); border-color: var(--nt-danger); }

/* ── Focus ring — rojo ── */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(200,16,46,0.22);
    outline: none;
}
.form-check-input:checked {
    background-color: var(--nt-red);
    border-color: var(--nt-red);
}

/* ── Inputs ── */
.form-control, .form-select {
    border-color: var(--nt-border);
    border-radius: 8px;
    color: var(--nt-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--nt-red);
}

/* ── Cards ── */
.card {
    border-radius: var(--nt-radius);
    border: 1px solid var(--nt-border);
    box-shadow: var(--nt-card-shadow);
    background: #fff;
}
.card-header {
    border-bottom: 1px solid var(--nt-border);
    background: #fff;
    border-radius: var(--nt-radius) var(--nt-radius) 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--nt-text);
}

/* ── KPI Cards ── */
.kpi-card {
    border-left: 4px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(20,20,22,0.10);
}
.kpi-card.kpi-navy   { border-left-color: var(--nt-graphite); }
.kpi-card.kpi-orange { border-left-color: var(--nt-amber); }
.kpi-card.kpi-green  { border-left-color: var(--nt-green); }
.kpi-card.kpi-red    { border-left-color: var(--nt-red); }

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.kpi-icon.navy   { background: var(--nt-graphite-pale); color: var(--nt-graphite); }
.kpi-icon.orange { background: var(--nt-amber-pale);    color: var(--nt-amber); }
.kpi-icon.green  { background: var(--nt-green-pale);    color: var(--nt-green); }
.kpi-icon.red    { background: var(--nt-red-pale);      color: var(--nt-red); }

.kpi-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--nt-text);
}
.kpi-label {
    font-size: 0.78rem;
    color: var(--nt-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ── Tablas ── */
.table {
    color: var(--nt-text);
    font-size: 0.875rem;
}
.table thead th {
    background: var(--nt-bg);
    color: var(--nt-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 2px solid var(--nt-border);
    padding: 0.75rem 1rem;
}
.table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-color: var(--nt-border);
}
.table-hover tbody tr:hover {
    background-color: var(--nt-red-pale);
}

/* ── Badges de estado ── */
.badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ── Spinner ── */
.spinner-border.text-primary { color: var(--nt-red) !important; }

/* ── Barra de página ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.page-header h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--nt-graphite);
}

/* ── Separador ── */
.section-divider {
    border: none;
    border-top: 2px solid var(--nt-border);
    margin: 1.5rem 0;
}

/* ── Estado badge colores ── */
.badge-abierta     { background: var(--nt-graphite-pale); color: var(--nt-graphite); }
.badge-progreso    { background: var(--nt-amber-pale);     color: var(--nt-amber); }
.badge-completada  { background: var(--nt-green-pale);     color: var(--nt-green);  }
.badge-cancelada   { background: var(--nt-danger-pale);    color: var(--nt-danger); }

/* ── Validación ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--nt-green); }
.invalid { outline: 1px solid var(--nt-danger); }
.validation-message { color: var(--nt-danger); font-size: 0.8rem; margin-top: 3px; }

/* ── Error boundary ── */
.blazor-error-boundary {
    background: var(--nt-danger-pale);
    border-left: 4px solid var(--nt-danger);
    padding: 1rem 1.5rem;
    color: var(--nt-danger);
    border-radius: var(--nt-radius);
}
.blazor-error-boundary::after { content: "Ocurrió un error. Por favor recarga la página." }

.darker-border-checkbox.form-check-input { border-color: #CBD5E1; }

/* ── Badges de estado personalizados ── */
.nt-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.nt-badge-navy   { background: var(--nt-graphite-pale); color: var(--nt-graphite); }
.nt-badge-orange { background: var(--nt-amber-pale);    color: var(--nt-amber); }
.nt-badge-green  { background: var(--nt-green-pale);    color: var(--nt-green); }
.nt-badge-red    { background: var(--nt-red-pale);      color: var(--nt-red); }
.nt-badge-blue   { background: var(--nt-info-pale);     color: var(--nt-info); }
.nt-badge-gray   { background: #F1F5F9;                 color: #64748B; }

/* ── Utilidades ── */
.text-navy   { color: var(--nt-graphite) !important; }
.text-orange { color: var(--nt-red) !important; }
.text-red    { color: var(--nt-red) !important; }
.text-graphite { color: var(--nt-graphite) !important; }
.bg-navy     { background-color: var(--nt-graphite) !important; }
.bg-orange   { background-color: var(--nt-red) !important; }
.bg-red      { background-color: var(--nt-red) !important; }

.shadow-sm { box-shadow: var(--nt-card-shadow) !important; }

/* ── Alerts ── */
.alert { border-radius: var(--nt-radius); border: none; font-size: 0.875rem; }
.alert-success { background: var(--nt-green-pale);  color: var(--nt-green); }
.alert-danger  { background: var(--nt-danger-pale); color: var(--nt-danger); }
.alert-warning { background: var(--nt-amber-pale);  color: var(--nt-amber); }
.alert-info    { background: var(--nt-info-pale);   color: var(--nt-info); }

/* ── Content padding ── */
.content { padding-top: 1.25rem; }
h1:focus  { outline: none; }