/**
 * FixPro360 — Sistema de diseño oficial
 * Versión 1.0
 *
 * Paleta: Azul royal profesional + Slate neutros + semánticos estándar
 * Accesibilidad: todas las combinaciones cumplen WCAG AA (contraste 4.5:1 mínimo)
 *
 * Uso: incluir en todas las vistas mediante <link rel="stylesheet" href="/assets/css/theme.css">
 */

:root {
    /* ============================================
       PALETA PRIMARIA — AZUL ROYAL
       ============================================ */
    --fp-primary-50:  #EFF6FF;
    --fp-primary-100: #DBEAFE;
    --fp-primary-200: #BFDBFE;
    --fp-primary-400: #60A5FA;
    --fp-primary-500: #3B82F6;
    --fp-primary-600: #2563EB;  /* BASE — botones, links, CTAs */
    --fp-primary-700: #1D4ED8;  /* Hover */
    --fp-primary-800: #1E40AF;
    --fp-primary-900: #1E3A8A;

    /* ============================================
       NEUTROS — SLATE (texto y fondos)
       ============================================ */
    --fp-slate-50:  #F8FAFC;   /* Fondo general app */
    --fp-slate-100: #F1F5F9;
    --fp-slate-200: #E2E8F0;   /* Bordes, separadores */
    --fp-slate-300: #CBD5E1;
    --fp-slate-400: #94A3B8;   /* Íconos inactivos */
    --fp-slate-500: #64748B;   /* Texto secundario */
    --fp-slate-600: #475569;
    --fp-slate-700: #334155;   /* Texto normal */
    --fp-slate-800: #1E293B;   /* Sidebar items hover */
    --fp-slate-900: #0F172A;   /* Títulos, sidebar BG */

    /* ============================================
       SEMÁNTICOS — ESTADOS
       ============================================ */
    /* Éxito */
    --fp-success:      #10B981;
    --fp-success-bg:   #DCFCE7;
    --fp-success-border: #BBF7D0;
    --fp-success-text: #065F46;

    /* Aviso */
    --fp-warning:      #F59E0B;
    --fp-warning-bg:   #FEF3C7;
    --fp-warning-border: #FDE68A;
    --fp-warning-text: #92400E;

    /* Error */
    --fp-danger:       #EF4444;
    --fp-danger-bg:    #FEE2E2;
    --fp-danger-border: #FECACA;
    --fp-danger-text:  #991B1B;

    /* Info */
    --fp-info:         #06B6D4;
    --fp-info-bg:      #CFFAFE;
    --fp-info-border:  #A5F3FC;
    --fp-info-text:    #155E75;

    /* ============================================
       BRAND ACENTO — TEAL (identidad FixPro360)
       ============================================ */
    --fp-brand-50:  #F0FDFA;
    --fp-brand-100: #CCFBF1;
    --fp-brand-500: #14B8A6;
    --fp-brand-700: #0F766E;

    /* ============================================
       ADMIN CONTEXT - INDIGO/VIOLET (diferenciador)
       ============================================ */
    --fp-admin-50:   #EEF2FF;
    --fp-admin-100:  #E0E7FF;
    --fp-admin-300:  #A5B4FC;
    --fp-admin-400:  #818CF8;
    --fp-admin-500:  #6366F1;
    --fp-admin-600:  #7C3AED;  /* Violet 600 - acento principal admin */
    --fp-admin-700:  #6D28D9;  /* Hover states */
    --fp-admin-800:  #312E81;  /* Hover en sidebar */
    --fp-admin-900:  #1E1B4B;  /* Sidebar BG admin */
    --fp-admin-950:  #0F0C29;  /* Variante mas oscura si se necesita */

    /* ============================================
       APLICACIÓN — roles semánticos
       ============================================ */

    /* Fondos */
    --fp-bg:            var(--fp-slate-50);   /* Fondo general */
    --fp-surface:       #FFFFFF;               /* Cards, inputs, modales */
    --fp-surface-hover: var(--fp-slate-100);
    --fp-sidebar-bg:    var(--fp-slate-900);
    --fp-sidebar-item-active: var(--fp-slate-800);

    /* Texto */
    --fp-text:          var(--fp-slate-900);  /* Títulos */
    --fp-text-body:     var(--fp-slate-700);  /* Texto normal */
    --fp-text-soft:     var(--fp-slate-500);  /* Labels, subtítulos */
    --fp-text-muted:    var(--fp-slate-400);  /* Placeholders, hints */
    --fp-text-inverse:  #FFFFFF;               /* Texto sobre fondos oscuros */

    /* Bordes */
    --fp-border:        var(--fp-slate-200);
    --fp-border-strong: var(--fp-slate-300);
    --fp-border-focus:  var(--fp-primary-600);

    /* ============================================
       TIPOGRAFÍA
       ============================================ */
    --fp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fp-font: var(--fp-font-sans); /* alias usado en vistas inline */
    --fp-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Tamaños */
    --fp-text-xs:   11px;
    --fp-text-sm:   12px;
    --fp-text-base: 14px;
    --fp-text-md:   15px;
    --fp-text-lg:   16px;
    --fp-text-xl:   18px;
    --fp-text-2xl:  22px;
    --fp-text-3xl:  28px;

    /* Pesos */
    --fp-weight-regular: 400;
    --fp-weight-medium:  500;
    --fp-weight-semibold: 600;
    --fp-weight-bold:    700;

    /* ============================================
       ESPACIADO Y DIMENSIONES
       ============================================ */
    --fp-space-1: 4px;
    --fp-space-2: 8px;
    --fp-space-3: 12px;
    --fp-space-4: 16px;
    --fp-space-5: 20px;
    --fp-space-6: 24px;
    --fp-space-8: 32px;

    /* Radios */
    --fp-radius-sm: 4px;
    --fp-radius:    6px;   /* Default */
    --fp-radius-md: 8px;   /* Cards */
    --fp-radius-lg: 12px;  /* Modales grandes */
    --fp-radius-full: 9999px;

    /* Sombras — uso mínimo y funcional */
    --fp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --fp-shadow:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --fp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --fp-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
    --fp-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
    --fp-border-subtle: 1px solid var(--fp-gray-200);

    /* Focus ring (accesibilidad) */
    --fp-ring: 0 0 0 3px rgba(37, 99, 235, 0.2);

    /* Dimensiones de layout */
    --fp-sidebar-width:           240px;
    --fp-sidebar-width-collapsed: 64px;
    --fp-sidebar-collapsed:       64px; /* alias compat */
    --fp-topbar-height:           56px;
    --fp-footer-height:           40px;

    /* Transiciones */
    --fp-transition-fast: 150ms ease-out;
    --fp-transition:      200ms ease-out;

    /* ── Aliases gray → slate (compatibilidad con vistas generadas) ── */
    --fp-gray-50:  var(--fp-slate-50);
    --fp-gray-100: var(--fp-slate-100);
    --fp-gray-200: var(--fp-slate-200);
    --fp-gray-300: var(--fp-slate-300);
    --fp-gray-400: var(--fp-slate-400);
    --fp-gray-500: var(--fp-slate-500);
    --fp-gray-600: var(--fp-slate-600);
    --fp-gray-700: var(--fp-slate-700);
    --fp-gray-800: var(--fp-slate-800);
    --fp-gray-900: var(--fp-slate-900);
}

/* ============================================
   RESET Y BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--fp-font-sans);
    font-size: var(--fp-text-base);
    line-height: 1.5;
    color: var(--fp-text-body);
    background: var(--fp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--fp-text);
    font-weight: var(--fp-weight-semibold);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

a {
    color: var(--fp-primary-600);
    text-decoration: none;
    transition: color var(--fp-transition-fast);
}

/* Los enlaces con .fp-btn ya definen color por variante; a:hover global los pisaba
   (misma tonalidad que el fondo en primary → texto “invisible”). */
a:not(.fp-btn):hover {
    color: var(--fp-primary-700);
}

/* ============================================
   UTILIDADES DE TEXTO
   ============================================ */
.fp-text-xs   { font-size: var(--fp-text-xs); }
.fp-text-sm   { font-size: var(--fp-text-sm); }
.fp-text-base { font-size: var(--fp-text-base); }
.fp-text-lg   { font-size: var(--fp-text-lg); }
.fp-text-xl   { font-size: var(--fp-text-xl); }

.fp-text-soft    { color: var(--fp-text-soft); }
.fp-text-muted   { color: var(--fp-text-muted); }
.fp-text-success { color: var(--fp-success); }
.fp-text-warning { color: var(--fp-warning); }
.fp-text-danger  { color: var(--fp-danger); }
.fp-text-info    { color: var(--fp-info); }

.fp-font-mono { font-family: var(--fp-font-mono); }

/* ============================================
   COMPONENTES BASE
   ============================================ */

/* --- Card --- */
.fp-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: var(--fp-space-4);
}

.fp-card__title {
    margin: 0 0 var(--fp-space-3);
    font-size: var(--fp-text-md);
    font-weight: var(--fp-weight-semibold);
    color: var(--fp-text);
}

/* --- Tablas --- */
.fp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fp-text-sm);
}

.fp-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--fp-slate-50);
    color: var(--fp-text-soft);
    font-weight: var(--fp-weight-semibold);
    border-bottom: 1px solid var(--fp-border);
}

.fp-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--fp-border);
    color: var(--fp-text-body);
    vertical-align: middle;
}

.fp-table tbody tr:hover td {
    background: var(--fp-slate-50);
}

.fp-table .text-right {
    text-align: right;
}

.fp-table-wrap {
    overflow: hidden;
}

/* --- Responsive: tablas en móvil ---
   Cualquier .fp-table dentro de un .fp-card (o de un contenedor con
   la clase .fp-table-wrap) se vuelve scrolleable horizontalmente en
   vez de encimarse o desbordar la pantalla. */
@media (max-width: 768px) {
    .fp-card:has(.fp-table),
    .fp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fp-card:has(.fp-table) .fp-table,
    .fp-table-wrap .fp-table {
        min-width: 560px;
    }
}

.fp-link {
    color: var(--fp-primary-600);
    text-decoration: none;
    font-weight: var(--fp-weight-medium);
}

.fp-link:hover {
    color: var(--fp-primary-700);
    text-decoration: underline;
}

.fp-empty {
    padding: var(--fp-space-6);
    text-align: center;
    color: var(--fp-text-muted);
    border: 1px dashed var(--fp-border-strong);
    border-radius: var(--fp-radius-md);
    background: var(--fp-slate-50);
    font-size: var(--fp-text-sm);
}

/* Pills de estado (cotizaciones / proyectos / facturas) */
.fp-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--fp-radius-full);
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-weight-semibold);
    line-height: 1.4;
    text-transform: capitalize;
    background: var(--fp-slate-100);
    color: var(--fp-slate-700);
}

.fp-pill--pendiente,
.fp-pill--borrador { background: var(--fp-slate-100); color: var(--fp-slate-700); }
.fp-pill--enviada,
.fp-pill--activo { background: var(--fp-info-bg); color: var(--fp-info-text); }
.fp-pill--aprobada,
.fp-pill--completado,
.fp-pill--pagada,
.fp-pill--pagado,
.fp-pill--cobrada { background: var(--fp-success-bg); color: var(--fp-success-text); }
.fp-pill--progreso,
.fp-pill--en_progreso { background: var(--fp-primary-50); color: var(--fp-primary-800); }
.fp-pill--vencida,
.fp-pill--cancelado { background: var(--fp-danger-bg); color: var(--fp-danger-text); }
.fp-pill--neutral { background: var(--fp-slate-100); color: var(--fp-slate-600); }

.text-right { text-align: right; }

/* --- Botones --- */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: 8px 14px;
    font-family: inherit;
    font-size: var(--fp-text-base);
    font-weight: var(--fp-weight-medium);
    line-height: 1;
    border-radius: var(--fp-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--fp-transition-fast),
        border-color var(--fp-transition-fast),
        color var(--fp-transition-fast),
        box-shadow var(--fp-transition-fast);
    white-space: nowrap;
}

.fp-btn:focus-visible {
    outline: none;
    box-shadow: var(--fp-ring);
}

.fp-btn--primary {
    background: var(--fp-primary-600);
    color: #fff;
    border-color: var(--fp-primary-600);
}

.fp-btn--primary:hover {
    background: var(--fp-primary-700);
    border-color: var(--fp-primary-700);
    color: #fff;
}

.fp-btn--secondary {
    background: var(--fp-surface);
    color: var(--fp-text);
    border-color: var(--fp-border);
}

.fp-btn--secondary:hover {
    background: var(--fp-surface-hover);
    border-color: var(--fp-border-strong);
    color: var(--fp-text);
}

.fp-btn--ghost {
    background: transparent;
    color: var(--fp-text-body);
    border-color: transparent;
}

.fp-btn--ghost:hover {
    background: var(--fp-surface-hover);
    color: var(--fp-text-body);
}

.fp-btn--danger {
    background: var(--fp-danger);
    color: #fff;
    border-color: var(--fp-danger);
}

.fp-btn--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.fp-btn--sm {
    padding: 6px 10px;
    font-size: var(--fp-text-sm);
}

/* Botón solo ícono (tablas, toolbar) */
.fp-btn--icon {
    padding: 6px;
    min-width: 32px;
    justify-content: center;
    gap: 0;
}

.fp-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.fp-btn__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fp-btn--icon-primary {
    color: var(--fp-primary-600);
    background: transparent;
    border-color: transparent;
}

.fp-btn--icon-primary:hover {
    color: var(--fp-primary-700);
    background: var(--fp-primary-50);
}

/* --- Inputs --- */
.fp-input,
.fp-select,
.fp-textarea {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--fp-text-base);
    color: var(--fp-text);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    transition: border-color var(--fp-transition-fast), box-shadow var(--fp-transition-fast);
    outline: none;
}

.fp-input:focus,
.fp-select:focus,
.fp-textarea:focus {
    border-color: var(--fp-border-focus);
    box-shadow: var(--fp-ring);
}

.fp-input::placeholder {
    color: var(--fp-text-muted);
}

/* --- Badges / Chips --- */
.fp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-weight-semibold);
    border-radius: var(--fp-radius-full);
    line-height: 1.4;
}

.fp-badge--success { background: var(--fp-success-bg); color: var(--fp-success-text); }
.fp-badge--warning { background: var(--fp-warning-bg); color: var(--fp-warning-text); }
.fp-badge--danger  { background: var(--fp-danger-bg);  color: var(--fp-danger-text); }
.fp-badge--info    { background: var(--fp-info-bg);    color: var(--fp-info-text); }
.fp-badge--neutral { background: var(--fp-slate-100);  color: var(--fp-slate-700); }
.fp-badge--brand {
    background: var(--fp-brand-100);
    color: var(--fp-brand-700);
}

/* --- Alertas --- */
.fp-alert {
    display: flex;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3) var(--fp-space-4);
    border: 1px solid;
    border-radius: var(--fp-radius-md);
    font-size: var(--fp-text-base);
}

.fp-alert--success { background: var(--fp-success-bg); border-color: var(--fp-success-border); color: var(--fp-success-text); }
.fp-alert--warning { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); color: var(--fp-warning-text); }
.fp-alert--danger  { background: var(--fp-danger-bg);  border-color: var(--fp-danger-border);  color: var(--fp-danger-text); }
.fp-alert--info    { background: var(--fp-info-bg);    border-color: var(--fp-info-border);    color: var(--fp-info-text); }

/* --- Métrica KPI --- */
.fp-metric {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: var(--fp-space-3) var(--fp-space-4);
}

.fp-metric__label {
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-weight-semibold);
    color: var(--fp-text-soft);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fp-metric__value {
    font-size: var(--fp-text-2xl);
    font-weight: var(--fp-weight-bold);
    color: var(--fp-text);
    letter-spacing: -0.02em;
    margin-top: var(--fp-space-1);
}

.fp-metric__delta {
    font-size: var(--fp-text-xs);
    font-weight: var(--fp-weight-semibold);
    margin-top: var(--fp-space-1);
}

/* ============================================
   CLASES DE ESTADO (check BD, etc)
   ============================================ */
.fp-status--ok   { color: var(--fp-success); font-weight: var(--fp-weight-semibold); }
.fp-status--fail { color: var(--fp-danger);  font-weight: var(--fp-weight-semibold); }
.fp-status--warn { color: var(--fp-warning); font-weight: var(--fp-weight-semibold); }