/* ============================================================================
   SHIM DE COMPATIBILIDAD — ukaro-platform → ukaro-ui (Fase 3)
   Fork histórico de platform (tokens `--color-primary-*`/`--gray-*`/`--sidebar-*`
   + clases .card/.kpi-card/.btn-primary/...). Se carga DESPUÉS del CSS compilado
   de ukaro-ui para que el markup existente (~1,900 refs inline a estos tokens)
   siga pintando idéntico sin reescribir templates. Convergencia al vocabulario
   de ukaro-ui = limpieza gradual post-migración (ver docs/specs/migracion-ukaro-ui-tokens.md).
   NO se toca la fuente de ukaro-ui aquí; esto es override local de platform.
   ============================================================================ */
/* Ukarasoft Technology — Sistema de Diseño Oficial */
:root {
    /* Tipografía */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Paleta Primaria — Azul Ucaro */
    --color-primary-900: #0B3D91;
    --color-primary-700: #1558C0;
    --color-primary-600: #1E7FC8;
    --color-primary-400: #5BB8E8;
    --color-primary-100: #DBEEFF;

    /* Paleta Secundaria — Verde Ucaro */
    --color-secondary-700: #1A5C3A;
    --color-secondary-500: #2E9E65;
    --color-secondary-200: #A7F3D0;

    /* Semánticos */
    --color-success:  #2E9E65;
    --color-warning:  #F59E0B;
    --color-error:    #EF4444;
    --color-info:     #1E7FC8;

    /* Variantes "-700" para TEXTO (2026-08-14): --color-success/warning/error
       dan buen contraste como ícono/acento/fondo de badge, pero como color de
       texto plano sobre blanco fallan WCAG AA (medido: success 3.39:1, warning
       1.99:1, error 3.5:1 — necesitan 4.5:1). success-700/primary-700 ya
       existían (botones); warning-700/error-700 son los mismos tonos que ya
       usa .badge-warning/.badge-error como color de texto — se nombran acá
       para poder reusarlos fuera de los badges sin repetir el hex. */
    --color-warning-700: #92400E;
    --color-error-700:   #991B1B;

    /* Fondos */
    --surface-body-light:   #F5F7FA;
    --surface-body-dark:    #0D1B2A;
    --surface-card-light:   #FFFFFF;
    --surface-card-dark:    #132236;

    /* Grises */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    /* gray-400 oscurecido de #9CA3AF a #6B7280 (2026-08-14): el valor original daba
       2.54:1 de contraste contra blanco — falla WCAG AA (4.5:1) en cualquier texto
       normal que lo use (se usa como texto en 39 templates, no solo decorativo).
       No hay margen para un tono más claro que --gray-500 y siga pasando 4.5:1 en
       blanco puro (el piso de WCAG para texto en blanco ronda #767676) — se iguala
       a --gray-500 a propósito en vez de inventar un tercer tono que tampoco pasaría. */
    --gray-400: #6B7280;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Bordes */
    --radius-sm: 0.25rem;
    --radius:    0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow:    0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

    /* Gradientes de marca */
    --gradient-brand:        linear-gradient(135deg, #0B3D91 0%, #1E7FC8 100%);
    --gradient-brand-subtle: linear-gradient(135deg, rgba(11,61,145,.12) 0%, rgba(30,127,200,.06) 100%);

    /* Sidebar de ukaro-ui (Fase 2, #uk-sidebar) — se rebrandea a oscuro FIJO acá,
       reusando los mismos valores exactos que tenía el sidebar viejo hand-rolled
       (borrado en Fase 2) para no perder la identidad visual. Nombres reales de
       ukaro-ui (--sidebar/--sidebar-text/...), NO los nombres viejos de Platform
       (--sidebar-text-muted/--sidebar-accent/... eran de un componente que ya no
       existe — quitados de acá para no dejar tokens fantasma sin dueño).
       Sin condicional de tema a propósito: en claro esto gana (misma especificidad
       que el :root de ukaro.css, entra después en el archivo). En oscuro pierde
       ante el html.dark de ukaro.css (más específico) — no importa, los valores
       de ahí ya son casi idénticos a estos. */
    --sidebar:             #0B1E30;
    --sidebar-text:        #CBD5E1;
    --sidebar-text-2:      #CBD5E1;
    --sidebar-muted:       #4A6080;
    --sidebar-border:      rgba(255,255,255,.07);
    --sidebar-hover:       rgba(255,255,255,.06);
    --sidebar-active-bg:   rgba(30,127,200,.18);
    --sidebar-active-text: #FFFFFF;
}

/* ─── Dark mode ───────────────────────────────────────────── */
html.dark {
    --surface-body-light:   var(--surface-body-dark);
    --surface-card-light:   var(--surface-card-dark);
    --gray-50:  #1a2332;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94a3b8;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
    --shadow:    0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);

    /* Variantes -700 de texto: en oscuro los tonos oscuros de arriba se
       hunden contra el fondo (medido: los 4 dan <2.5:1) — se reusan los
       mismos colores claros que ya usan los badges en dark mode. */
    --color-primary-700:   #93c5fd;
    --color-secondary-700: #6ee7b7;
    --color-warning-700:   #fcd34d;
    --color-error-700:     #fca5a5;
}
html.dark .badge-success { background-color: #064e3b; color: #6ee7b7; }
html.dark .badge-info    { background-color: #1e3a5f; color: #93c5fd; }
html.dark .badge-warning { background-color: #451a03; color: #fcd34d; }
html.dark .badge-error   { background-color: #450a0a; color: #fca5a5; }

/* ─── Botones ─────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--color-primary-600);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 500;
    min-height: 44px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
    gap: .375rem;
}
.btn-primary:hover {
    background-color: var(--color-primary-700);
    box-shadow: 0 4px 12px rgba(30,127,200,.35);
}

.btn-secondary {
    background-color: var(--color-secondary-500);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 500;
    min-height: 44px;
    transition: background-color 150ms ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
}
.btn-secondary:hover { background-color: var(--color-secondary-700); }

/* ─── Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: 1.25rem;
}

/* KPI card con franja de acento superior.
   box-shadow agregado en reposo (2026-08-14): antes solo tenía sombra al hover
   — sin ella, el fondo de la card (blanco) y el del body (#F4F7FB) dan 1.07:1
   de contraste entre sí, prácticamente indistinguibles; la card se perdía en
   la página. El borde tampoco alcanza (1.24:1) para separarla por sí solo. */
.kpi-card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-accent, var(--color-primary-600));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card.accent-green  { --kpi-accent: var(--color-success); }
.kpi-card.accent-red    { --kpi-accent: var(--color-error); }
.kpi-card.accent-yellow { --kpi-accent: var(--color-warning); }
.kpi-card.accent-blue   { --kpi-accent: var(--color-primary-600); }

/* Proyecto card con borde izquierdo de acento */
.proyecto-card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--proyecto-color, var(--color-primary-600));
    padding: 1.25rem;
    transition: box-shadow 200ms ease, transform 200ms ease;
    display: block;
    text-decoration: none;
    position: relative;
}
.proyecto-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Status bar — barra de uptime visual */
.status-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}
.status-bar-fill {
    height: 4px;
    border-radius: 2px;
    transition: width 600ms ease;
}

/* ─── Formularios ─────────────────────────────────────────── */
.form-input {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    width: 100%;
    font-family: var(--font-body);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    background-color: var(--surface-card-light);
    color: var(--gray-900);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(30,127,200,.15);
}

/* Estilo automático para campos de formulario dentro de .card y .form-auto.
   Evita tener que repetir un <style> por template (CRM, Presupuestos, etc.). */
.card input[type="text"], .card input[type="url"], .card input[type="email"],
.card input[type="number"], .card input[type="tel"], .card input[type="password"],
.card input[type="date"], .card input[type="datetime-local"], .card input[type="time"],
.card textarea, .card select,
.form-auto input, .form-auto textarea, .form-auto select {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    width: 100%;
    font-family: var(--font-body);
    font-size: .875rem;
    background-color: var(--surface-card-light);
    color: var(--gray-900);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.card input:focus, .card textarea:focus, .card select:focus,
.form-auto input:focus, .form-auto textarea:focus, .form-auto select:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(30,127,200,.15);
}
/* Checkboxes y radios no deben estirarse al 100% */
.card input[type="checkbox"], .card input[type="radio"],
.form-auto input[type="checkbox"], .form-auto input[type="radio"] {
    width: auto;
    display: inline-block;
    margin-right: .375rem;
}

/* ─── Layout ──────────────────────────────────────────────── */
/* .navbar / .sidebar (hand-rolled) borrados en Fase 2 junto con sus templates
   (_navbar.html, _sidebar.html) — el shell ahora es <c-ukaro.layout.app>. El
   override de color del sidebar nuevo vive arriba, en los tokens --sidebar-*. */

/* ─── Badges ──────────────────────────────────────────────── */
.badge-success { background-color: var(--color-secondary-200); color: var(--color-secondary-700); }
.badge-info    { background-color: var(--color-primary-100);   color: var(--color-primary-900);  }
.badge-warning { background-color: #FEF3C7; color: #92400E; }
.badge-error   { background-color: #FEE2E2; color: #991B1B; }

/* ─── Semáforo de estado ──────────────────────────────────── */
.semaforo {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.semaforo.up         { background-color: var(--color-success);  box-shadow: 0 0 0 3px rgba(46,158,101,.2); }
.semaforo.down       { background-color: var(--color-error);    box-shadow: 0 0 0 3px rgba(239,68,68,.2);  }
.semaforo.degradado  { background-color: var(--color-warning);  box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.semaforo.mantenimiento { background-color: var(--gray-400); }

/* ─── Tablas de lista → tarjetas en móvil ─────────────────────
   Mismo mecanismo que .u-table.responsive de ukaro-ui (thead oculto,
   fila = tarjeta, <td data-label> se autoetiqueta vía ::before), pero
   con clase propia y tokens de platform en vez de heredar los estilos
   de base de .u-table — así el desktop (ya maquetado a mano con
   padding/bordes propios en cada tabla) no cambia ni un píxel.
   Uso: <table class="... tabla-mobile-cards">, primer <td> de cada
   fila con class="cell-head" (sin data-label — es el título de la
   tarjeta), el resto con data-label="Columna", acciones con
   class="cell-actions" (sin label, alineado a la derecha). */
@media (max-width: 767px) {
    .tabla-mobile-cards thead { display: none; }
    .tabla-mobile-cards,
    .tabla-mobile-cards tbody,
    .tabla-mobile-cards tr,
    .tabla-mobile-cards td { display: block; width: 100%; }
    .tabla-mobile-cards tr {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        margin: 0 0 .75rem;
        padding: 1rem 1.1rem;
        background: var(--surface-card-light);
        box-shadow: var(--shadow-sm);
    }
    .tabla-mobile-cards tbody td {
        padding: .5rem 0;
        border-bottom: 1px solid var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }
    .tabla-mobile-cards tbody td:last-child { border-bottom: none; }
    .tabla-mobile-cards tbody td::before {
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--gray-400);
        text-align: left;
        flex-shrink: 0;
    }
    .tabla-mobile-cards td.cell-head {
        display: block;
        text-align: left;
        padding-top: 0;
        margin-bottom: .6rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--gray-100);
    }
    .tabla-mobile-cards td.cell-head::before { display: none; }
    .tabla-mobile-cards td.cell-actions { padding-top: .75rem; justify-content: flex-end; }
    .tabla-mobile-cards td.cell-actions::before { display: none; }
}