/* ════════════════════════════════════════════════════════════════════════════
   Rediseño UI — Fases C (utilitarios) + D (overrides globales)
   ────────────────────────────────────────────────────────────────────────────
   Este archivo se carga DESPUÉS de app.css y de los scoped styles de los
   componentes, así toma precedencia sobre la cascada. La idea es aplicar
   el look "shadcn / autoasistente" a las clases legacy más usadas (.card,
   .btn-primary, .page-title, .section-title, etc.) sin tocar cada Razor
   uno por uno.

   Para componentes NUEVOS, preferir los utilitarios .gi-* definidos al
   final — son más predecibles y no pelean con CSS legacy.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   El título se veía "seleccionado" con un recuadro
   ═══════════════════════════════════════════════════════════════════════
   `<FocusOnNavigate Selector="h1" />` (Routes.razor) le pone tabindex="-1"
   al primer <h1> y lo enfoca después de cada navegación, para que un lector
   de pantalla anuncie la página nueva. El navegador dibuja ahí su anillo de
   foco y quedaba un rectángulo alrededor de "Bienvenido", "Bienvenido de
   vuelta", "Dashboard" y cualquier otro título.

   Se saca el anillo SÓLO de los elementos que únicamente se pueden enfocar
   por código (tabindex="-1"): no se llega a ellos con Tab, así que no se
   pierde ninguna pista de navegación por teclado. La función de
   accesibilidad se mantiene: el foco se sigue moviendo, sólo deja de verse.
   Antes esto estaba parcheado a mano y sólo para el hero de la landing. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ─── Overrides globales ─────────────────────────────────────────────────── */

/* Headings — tipografía con Inter y peso ajustado */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gi-font);
    color: var(--gi-fg);
    letter-spacing: -0.01em;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gi-fg);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gi-fg);
    margin: 0 0 1rem;
}

/* Cards — radius más grande, shadow suave, border slate-200 */
.card {
    background: var(--gi-card);
    border-radius: var(--gi-radius);
    padding: 1.25rem;
    box-shadow: var(--gi-shadow-sm);
    border: 1px solid var(--gi-border);
    color: var(--gi-card-fg);
}

/* Botones primary — azul (era brand-red) */
.btn {
    border-radius: var(--gi-radius-sm);
    font-family: var(--gi-font);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease,
                box-shadow 0.15s ease;
}

.btn-primary {
    background: var(--gi-primary);
    color: var(--gi-primary-fg);
}
.btn-primary:hover:not(:disabled) {
    background: var(--gi-primary-hover);
}
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gi-ring);
}

.btn-secondary {
    background: var(--gi-muted);
    color: var(--gi-fg);
    border: 1px solid var(--gi-border);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--gi-border);
}

.btn-ghost {
    background: transparent;
    color: var(--gi-muted-fg);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--gi-muted);
    color: var(--gi-fg);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--gi-destructive);
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.18);
}

/* Inputs — radius y focus ring azul */
.form-input, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="search"], input[type="number"],
input[type="url"], input[type="tel"], textarea, select {
    border-radius: var(--gi-radius-sm);
    border-color: var(--gi-input-border);
    font-family: var(--gi-font);
}

.form-input:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--gi-primary);
    box-shadow: 0 0 0 3px var(--gi-ring);
    outline: none;
}

/* Tablas — header con bg muted */
table.data-table {
    font-family: var(--gi-font);
}
table.data-table th {
    background: var(--gi-muted);
    color: var(--gi-muted-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   ESTADOS DE CARGA — unificados para toda la app
   ═══════════════════════════════════════════════════════════════════════
   Convención del proyecto (74 usos):
       <div class="loading-row"><span class="loading-spinner"></span> Cargando…</div>
   El problema: `.loading-row` NO estaba definida en ningún CSS global. Unas 34
   páginas la definían localmente (casi siempre igual: flex en fila, alineada a
   la izquierda) y otras 32 la usaban SIN definirla, así que el "Cargando…"
   quedaba pegado arriba a la izquierda. Además varias pantallas usan su propia
   clase (.ad-loading, .sub-loading, …) y 9 de ellas ni siquiera muestran spinner.

   Acá queda una sola definición: spinner grande centrado con el texto debajo.
   Se duplica la clase (`.loading-row.loading-row`) para ganarle a esas
   definiciones locales, que viven en bloques <style> del .razor y por lo tanto
   se inyectan en el <body> — más tarde que cualquier hoja del <head>. */

/* Spinner base — queda CHICO a propósito: además de los loaders de página se
   usa suelto dentro de frases ("Pensando…") y con tamaño forzado por style
   inline en algunos lugares. El grande se aplica sólo dentro del contenedor. */
.loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--gi-border);
    border-top-color: var(--gi-primary);
    border-radius: 50%;
    animation: gi-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Contenedor de carga a nivel página/sección */
.loading-row.loading-row,
.ad-loading.ad-loading,
.osm-loading.osm-loading,
.usr-loading.usr-loading,
.txo-loading.txo-loading,
.tsp-loading.tsp-loading,
.sub-loading.sub-loading,
.studio-loading.studio-loading,
.ssb-loading.ssb-loading,
.ss3-loading.ss3-loading,
.ss2-loading.ss2-loading,
.ss1c-loading.ss1c-loading,
.rd-loading.rd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 140px;
    padding: 2.25rem 1rem;
    color: var(--gi-muted-fg);
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

/* Spinner grande sólo dentro del contenedor (no afecta a los inline). */
.loading-row .loading-spinner,
.ad-loading .loading-spinner,
.ad-loading .ad-spinner,
.osm-loading .loading-spinner,
.txo-loading .loading-spinner,
.rd-loading .loading-spinner,
.ssb-loading .loading-spinner,
.ss3-loading .loading-spinner,
.ss2-loading .loading-spinner {
    width: 34px;
    height: 34px;
    border-width: 3px;
}

/* Los contenedores que en el markup NO traen <span class="loading-spinner">
   reciben uno por CSS, así todas las pantallas muestran el mismo indicador
   sin tener que tocar las páginas que los usan.

   INVARIANTE: una clase va acá SÓLO si NINGUNO de sus usos trae el <span>.
   Si trae los dos, se ven DOS ruedas (pasó en el celu con "Cargando
   habilidades…": ss2/ss3/ssb ya traían el span en sus 4 usos cada una y
   ademas recibían este ::before). Esas tres se sacaron de esta lista y se
   sumaron arriba, al bloque que agranda el spinner del markup.
   Para chequearlo hay que buscar `class="<clase>"` en los .razor y ver si en
   esa línea hay CUALQUIER spinner — no alcanza con buscar `loading-spinner`:
   `.ad-loading` traía uno propio llamado `ad-spinner` y se escapó del primer
   chequeo, así que siguió mostrando dos ruedas. */
.usr-loading::before,
.tsp-loading::before,
.sub-loading::before,
.studio-loading::before,
.ss1c-loading::before {
    content: "";
    width: 34px;
    height: 34px;
    border: 3px solid var(--gi-border);
    border-top-color: var(--gi-primary);
    border-radius: 50%;
    animation: gi-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes gi-spin { to { transform: rotate(360deg); } }

/* Accesibilidad: no lo frenamos del todo (un spinner detenido parece colgado),
   pero lo hacemos mucho más lento para quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner, .ad-spinner,
    .usr-loading::before, .tsp-loading::before,
    .sub-loading::before, .studio-loading::before, .ss1c-loading::before {
        animation-duration: 2.4s;
    }
}

/* Alerts — radius más grande */
.alert {
    border-radius: var(--gi-radius-sm);
    font-family: var(--gi-font);
}

/* Badges — radius compacto */
.badge {
    border-radius: 999px;
    font-family: var(--gi-font);
}

/* Dashboard scope headers — refresh slate */
.scope-header {
    background: var(--gi-card);
    border: 1px solid var(--gi-border);
    border-radius: var(--gi-radius);
    box-shadow: var(--gi-shadow-sm);
}

/* Empty states con tipografía consistente */
.empty-state, .empty-table {
    font-family: var(--gi-font);
    color: var(--gi-muted-fg);
}

/* ─── Utilitarios .gi-* (para componentes nuevos) ────────────────────────── */
/* Card */
.gi-card {
    background: var(--gi-card);
    border: 1px solid var(--gi-border);
    border-radius: var(--gi-radius);
    box-shadow: var(--gi-shadow-sm);
    padding: 1.25rem;
    color: var(--gi-card-fg);
}
.gi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.75rem;
}
.gi-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gi-fg);
    margin: 0;
    letter-spacing: -0.01em;
}
.gi-card-subtitle {
    font-size: 0.8rem;
    color: var(--gi-muted-fg);
    margin: 0.15rem 0 0;
}

/* Botones */
.gi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: var(--gi-radius-sm);
    border: 1px solid transparent;
    font-family: var(--gi-font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    line-height: 1.25;
}
.gi-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gi-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gi-ring); }

.gi-btn-primary {
    background: var(--gi-primary);
    color: var(--gi-primary-fg);
}
.gi-btn-primary:hover:not(:disabled) { background: var(--gi-primary-hover); }

.gi-btn-secondary {
    background: var(--gi-card);
    color: var(--gi-fg);
    border-color: var(--gi-border);
}
.gi-btn-secondary:hover:not(:disabled) { background: var(--gi-muted); }

.gi-btn-ghost {
    background: transparent;
    color: var(--gi-muted-fg);
}
.gi-btn-ghost:hover:not(:disabled) {
    background: var(--gi-muted);
    color: var(--gi-fg);
}

.gi-btn-destructive {
    background: var(--gi-destructive);
    color: var(--gi-destructive-fg);
}
.gi-btn-destructive:hover:not(:disabled) { background: #dc2626; }

/* Inputs */
.gi-input, .gi-select, .gi-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--gi-input-border);
    border-radius: var(--gi-radius-sm);
    font-family: var(--gi-font);
    font-size: 0.9rem;
    color: var(--gi-fg);
    background: var(--gi-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gi-input:focus, .gi-select:focus, .gi-textarea:focus {
    border-color: var(--gi-primary);
    box-shadow: 0 0 0 3px var(--gi-ring);
}

/* ═══════════════════════════════════════════════════════════════════════
   ALIAS LEGACY: `.input` y `.form-grid`
   ═══════════════════════════════════════════════════════════════════════
   36 páginas usan `class="input"` pero la clase NO estaba definida en ningún
   CSS global: 25 repetían la misma definición localmente y 11 quedaban con el
   input NATIVO del navegador (/entregas era el caso más visible: campos tipo
   "píldora" sin estilo y con otra tipografía). Lo mismo con `.form-grid`, que
   sin definición dejaba los campos fluyendo en línea en vez de en grilla.
   Se define acá una sola vez, con los mismos valores que ya repetían las
   páginas, para que todas se vean igual. */
.input {
    border: 1px solid var(--gi-border);
    border-radius: var(--gi-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--gi-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
    border-color: var(--gi-primary);
    box-shadow: 0 0 0 3px var(--gi-ring);
}
/* Los <input>/<select>/<textarea> NO heredan la tipografía del documento: sin
   esto quedan con la fuente por defecto del navegador y desentonan con el resto
   de la página. La clase va duplicada para alcanzar también a las 25 páginas que
   definen `.input` localmente (sus <style> se inyectan en el <body> y, a igual
   especificidad, le ganarían a esta hoja). */
.input.input {
    font-family: var(--gi-font);
    color: var(--gi-fg);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 0.9rem;
}
/* Patrón usado por estas páginas: <label>Texto <input class="input"/></label>.
   Sin estilo el input quedaba pegado al texto en la misma línea; así se arma el
   campo clásico (etiqueta arriba, control abajo ocupando el ancho). */
.form-grid > label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gi-fg);
    min-width: 0;
}
.form-grid > label > .input,
.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Input con prefijo fijo (ej. "https://" en Sitio web) — mismo criterio visual
   que el +54 del teléfono: el usuario solo tipea la parte variable y no puede
   equivocarse con el esquema. Espeja .ob-input-group del onboarding para que
   ambos formularios se vean igual. */
.gi-input-group { display: flex; align-items: stretch; min-width: 0; }
.gi-input-prefix {
    display: inline-flex; align-items: center;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: var(--gi-muted-fg);
    background: var(--gi-muted-2);
    border: 1px solid var(--gi-input-border);
    border-right: none;
    border-radius: var(--gi-radius-sm) 0 0 var(--gi-radius-sm);
    white-space: nowrap;
    user-select: none;
}
.gi-input-suffix { border-radius: 0 var(--gi-radius-sm) var(--gi-radius-sm) 0; }
.gi-input-group:focus-within .gi-input-prefix { border-color: var(--gi-primary); }
.gi-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gi-fg);
    margin-bottom: 0.35rem;
}
.gi-hint {
    font-size: 0.78rem;
    color: var(--gi-muted-fg);
}

/* Badges */
.gi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: var(--gi-font);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--gi-muted);
    color: var(--gi-muted-fg);
}
.gi-badge-primary  { background: var(--gi-accent);                color: var(--gi-accent-fg); }
.gi-badge-success  { background: rgba(16, 185, 129, 0.12);        color: #047857; }
.gi-badge-warning  { background: rgba(245, 158, 11, 0.15);        color: #b45309; }
.gi-badge-danger   { background: rgba(239, 68, 68, 0.15);         color: #b91c1c; }
.gi-badge-info     { background: rgba(99, 102, 241, 0.12);        color: #4338ca; }

/* Page header — para páginas internas */
.gi-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.gi-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gi-fg);
    margin: 0;
    letter-spacing: -0.02em;
}
.gi-page-header .gi-subtitle {
    font-size: 0.9rem;
    color: var(--gi-muted-fg);
    margin: 0.25rem 0 0;
}