/* ─────────────────────────────────────────────────────────────────────────────
   OConnect · la capa de diseño del panel

   Fuente de verdad junto con Theme/OConnectTheme.cs: los DOS llevan los mismos
   valores del spec (docs/superpowers/specs/2026-09-09-identidad-visual-oconnect-design.md).
   Ninguna pantalla escribe un color, un radio o una sombra suelta.

   El rojo OpenX (--oc-alerta) es de toda la familia y se reserva a "exige
   intervención". El cobre es el color propio de OConnect.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Marca */
    --oc-cobre: #C4622D;
    --oc-cobre-hover: #A44E20;
    --oc-cobre-suave: #F9E9DF;
    --oc-cobre-claro: #F0B48C;
    --oc-cobre-oscuro: #8F4620;

    /* Neutros cálidos (familia OpenX) */
    --oc-tinta: #1A1618;
    --oc-tinta-2: #2A2427;
    --oc-papel: #F6F3F0;
    --oc-superficie: #FFFFFF;
    --oc-borde: #E6E0DD;
    --oc-texto: #1A1618;
    --oc-texto-2: #5C5457;
    --oc-texto-3: #8E8588;

    /* Señales: significado, no marca */
    --oc-alerta: #C8102E;        --oc-alerta-suave: #FAE3E6;
    --oc-alerta-hover: #A80D25;  /* presionado del boton de peligro */
    --oc-fisico: #2F7D5B;        --oc-fisico-suave: #E4F1EA;
    --oc-reserva: #6B5FC7;       --oc-reserva-suave: #ECE9F8;
    --oc-erp: #2A7DA0;           --oc-erp-suave: #E3EFF5;
    --oc-vivo: #C4622D;

    /* Forma */
    --oc-radio: 10px;
    --oc-radio-sm: 8px;
    --oc-radio-pill: 999px;
    --oc-sombra: 0 1px 2px rgba(26, 22, 24, .06);
    --oc-borde-ancho: 1px;

    /* Tipografía */
    --oc-fuente: 'Archivo', system-ui, -apple-system, sans-serif;
    --oc-fuente-datos: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

/* ── 1. Base ──────────────────────────────────────────────────────────────── */

body {
    background: var(--oc-papel);
    color: var(--oc-texto);
    font-family: var(--oc-fuente);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--oc-cobre);
    text-decoration: none;
}

a:hover {
    color: var(--oc-cobre-hover);
}

/* Códigos y cifras que se comparan, no prosa: SKU, folio, RUT, montos. */
.oc-dato, code, .oc-sku, .oc-folio {
    font-family: var(--oc-fuente-datos);
    font-variant-numeric: tabular-nums;
}

.oc-num {
    font-family: var(--oc-fuente-datos);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oc-rotulo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--oc-texto-3);
}

.oc-titulo {
    font-family: var(--oc-fuente);
    font-size: 26px;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -.02em;
    color: var(--oc-texto);
}

/* ── 2. Botones ───────────────────────────────────────────────────────────── */

.oc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--oc-radio-sm);
    font-family: var(--oc-fuente);
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.oc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--oc-cobre-suave);
}

.oc-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.oc-btn-primario {
    background: var(--oc-cobre);
    color: var(--oc-superficie);
}

.oc-btn-primario:hover:not(:disabled), .oc-btn-primario.is-hover {
    background: var(--oc-cobre-hover);
}

.oc-btn-secundario {
    background: var(--oc-superficie);
    color: var(--oc-texto);
    border-color: var(--oc-borde);
}

.oc-btn-secundario:hover:not(:disabled), .oc-btn-secundario.is-hover {
    background: var(--oc-papel);
}

.oc-btn-peligro {
    background: var(--oc-alerta);
    color: var(--oc-superficie);
}

.oc-btn-peligro:hover:not(:disabled), .oc-btn-peligro.is-hover {
    background: var(--oc-alerta-hover);
}

.oc-btn-fantasma {
    background: transparent;
    color: var(--oc-cobre);
}

.oc-btn-fantasma:hover:not(:disabled), .oc-btn-fantasma.is-hover {
    background: var(--oc-cobre-suave);
}

/* Simula :focus-visible con una clase, para poder mostrar el estado de foco en una
   captura estática (la pantalla de estilo) sin depender del teclado real. */
.oc-btn.is-focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--oc-cobre-suave);
}

/* Botón a ancho completo: el primario de las pantallas de acceso, una columna angosta
   donde no tiene sentido un botón del ancho de su texto. */
.oc-btn-ancho { width: 100%; }

/* ── 3. Tarjeta y tarjeta de cifra ────────────────────────────────────────── */

.oc-tarjeta {
    background: var(--oc-superficie);
    border: var(--oc-borde-ancho) solid var(--oc-borde);
    border-radius: var(--oc-radio);
    padding: 18px 22px;
}

/* Un filete superior en color semántico en vez de un icono de adorno: el color
   ya dice de qué familia es el dato. */
.oc-cifra {
    position: relative;
    background: var(--oc-superficie);
    border: var(--oc-borde-ancho) solid var(--oc-borde);
    border-radius: var(--oc-radio);
    padding: 18px 18px 16px;
    overflow: hidden;
}

.oc-cifra::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--oc-color, var(--oc-texto-3));
}

.oc-cifra-rotulo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--oc-texto-3);
}

.oc-cifra-valor {
    margin-top: 4px;
    font-family: var(--oc-fuente-datos);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--oc-texto);
    font-variant-numeric: tabular-nums;
}

.oc-cifra-delta {
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oc-delta-sube { color: var(--oc-fisico); }
.oc-delta-baja { color: var(--oc-alerta); }

.oc-cifra-fisico  { --oc-color: var(--oc-fisico); }
.oc-cifra-reserva { --oc-color: var(--oc-reserva); }
.oc-cifra-erp     { --oc-color: var(--oc-erp); }
.oc-cifra-alerta  { --oc-color: var(--oc-alerta); }

/* Rótulo que agrupa una fila de cifras: dice de qué familia son sin encerrarlas en
   una tarjeta más. */
.oc-grupo {
    display: block;
    margin: 0 0 10px 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--oc-texto-3);
}

/* ── 4. Chips de estado ───────────────────────────────────────────────────── */

/* Los nombres de modificador (-ok, -espera) son los que ya usan las 41 pantallas;
   se conservan tal cual, solo cambia el color detrás de cada uno: -ok es "físico",
   -espera es "reserva", igual que antes. */
.oc-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--oc-radio-pill);
}

.oc-estado-ok     { color: var(--oc-fisico); background: var(--oc-fisico-suave); }
.oc-estado-espera { color: var(--oc-reserva); background: var(--oc-reserva-suave); }
.oc-estado-erp    { color: var(--oc-erp); background: var(--oc-erp-suave); }
.oc-estado-alerta { color: var(--oc-alerta); background: var(--oc-alerta-suave); }
.oc-estado-neutro { color: var(--oc-texto-2); background: var(--oc-papel); }

/* ── 5. Badge contador ────────────────────────────────────────────────────── */

.oc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--oc-radio-pill);
    background: var(--oc-cobre);
    color: var(--oc-superficie);
    font-family: var(--oc-fuente-datos);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── 6. Estado vacío ──────────────────────────────────────────────────────── */

.oc-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 48px;
    border: 1px dashed var(--oc-borde);
    border-radius: var(--oc-radio);
}

.oc-vacio-icono {
    display: inline-flex;
    width: 48px;
    height: 48px;
    color: var(--oc-texto-3);
}

.oc-vacio-texto {
    color: var(--oc-texto-2);
    max-width: 32em;
}

/* ── 7. Aviso ──────────────────────────────────────────────────────────────── */

.oc-aviso {
    padding: 12px 14px;
    border-left: 3px solid var(--oc-texto-3);
    border-radius: var(--oc-radio-sm);
    background: var(--oc-papel);
    color: var(--oc-texto);
}

.oc-aviso-fisico  { border-left-color: var(--oc-fisico); background: var(--oc-fisico-suave); }
.oc-aviso-reserva { border-left-color: var(--oc-reserva); background: var(--oc-reserva-suave); }
.oc-aviso-erp     { border-left-color: var(--oc-erp); background: var(--oc-erp-suave); }
.oc-aviso-alerta  { border-left-color: var(--oc-alerta); background: var(--oc-alerta-suave); }

/* ── Barra de disponibilidad (elemento firma) ─────────────────────────────── */
/* No está en el vocabulario nuevo del brief, pero varias pantallas ya la usan
   (disponible = físico − reservado − comprometido en el ERP), así que se conserva
   con el mismo nombre y se actualiza al color de cada señal. */

.oc-barra {
    display: flex;
    height: 8px;
    border-radius: var(--oc-radio-pill);
    overflow: hidden;
    background: var(--oc-borde);
}

.oc-barra span { display: block; height: 100%; }
.oc-barra-disponible { background: var(--oc-fisico); }
.oc-barra-reserva    { background: var(--oc-reserva); }
.oc-barra-erp         { background: var(--oc-erp); }

.oc-barra-leyenda {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    font-size: .72rem;
    color: var(--oc-texto-2);
    font-variant-numeric: tabular-nums;
}

.oc-barra-leyenda b {
    font-family: var(--oc-fuente-datos);
    font-weight: 600;
    color: var(--oc-texto);
}

.oc-barra-leyenda i {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--oc-cobre);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── 8. Ajustes a MudBlazor que el tema no cubre ──────────────────────────── */
/* Deliberadamente corto: el tema (Theme/OConnectTheme.cs) ya cubre paleta,
   tipografía, radios y sombras. Lo de aquí es SOLO lo que MudBlazor no expone
   por tema, cada uno con su motivo. Si una pantalla se ve "a la Material", falta
   una clase del vocabulario de arriba, no una excepción más aquí. */

/* Cabecera de tabla fija y en el vocabulario de rótulos; MudTable no tiene una
   propiedad de tema para "sticky" ni para el estilo del texto de cabecera. */
.mud-table-head {
    position: sticky;
    top: 0;
    z-index: 1;
}

.mud-table-head .mud-table-cell {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--oc-texto-3);
}

/* Alto de fila: MudTable no tiene una propiedad de tema para la altura de celda. */
.mud-table-body .mud-table-cell {
    height: 44px;
}

/* Borde y foco de campo: MudBlazor tematiza el color de las líneas pero no dibuja
   un borde propio en el input ni un halo de foco. */
.mud-input {
    border: 1px solid var(--oc-borde);
    border-radius: var(--oc-radio-sm);
}

.mud-input.mud-input-focused {
    border-color: var(--oc-cobre);
    box-shadow: 0 0 0 3px var(--oc-cobre-suave);
}

/* MudPaper trae sombra por defecto; la jerarquía de esta interfaz la dan los
   bordes, no la profundidad simulada, y no hay una propiedad de tema para
   desactivar la sombra por defecto de Paper. */
.mud-paper {
    box-shadow: none;
}

/* MudDialog no toma el radio por defecto del tema en su superficie. */
.mud-dialog {
    border-radius: var(--oc-radio);
}

/* Tarjeta de marketplace elegida en Nueva conexion (ConnectionCreate.razor). Estaba en
   uso sin regla desde antes de esta identidad. */
.oc-mp-selected { border-color: var(--oc-cobre) !important; box-shadow: 0 0 0 3px var(--oc-cobre-suave); }

/* ── 9. Muestra de token (pantalla de estilo) ─────────────────────────────── */
/* Caja de la galería de tokens en /app/admin/estilo: la forma sale de acá (radio,
   borde), el color de cada muestra se fija en línea con var(--oc-...) porque es
   justamente lo que la muestra tiene que variar — no es un color suelto, es el
   token mismo puesto a la vista. */
.oc-muestra {
    width: 100%;
    height: 64px;
    border: var(--oc-borde-ancho) solid var(--oc-borde);
    border-radius: var(--oc-radio-sm);
}

/* ── 10. Barra superior ───────────────────────────────────────────────────── */
/* El cromo del panel. Desde la identidad cobre no hay barra lateral permanente: la
   navegación entera vive arriba, y la única barra lateral que queda es el cajón
   temporal de pantallas angostas.

   Se llama .oc-barra-superior y no .oc-barra porque .oc-barra ya es, desde antes,
   la barra de disponibilidad (físico / reserva / ERP) que usan varias pantallas.
   Reusar el nombre las habría repintado en silencio. */

.oc-barra-superior {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 20px;
    background: var(--oc-tinta);
    color: var(--oc-superficie);
}

.oc-barra-marca {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.oc-barra-marca img { display: block; }

.oc-barra-pestanas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.oc-barra-desplegables {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-barra-derecha {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Botón de menú: solo aparece bajo 960 px (ver la consulta de medios al final). */
.oc-barra-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--oc-radio-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--oc-superficie);
    cursor: pointer;
}

.oc-barra-menu:hover { background: rgba(255, 255, 255, .14); }

/* Pestaña: píldora. La activa va en cobre lleno; las demás en blanco al 7 %. */
.oc-pestana {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--oc-radio-sm);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .85);
    font-family: var(--oc-fuente);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.oc-pestana:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--oc-superficie);
    text-decoration: none;
}

.oc-pestana-activa,
.oc-pestana-activa:hover {
    background: var(--oc-cobre);
    color: var(--oc-superficie);
}

/* Desplegable: mismo alto que la pestaña, pero con borde en vez de relleno, para que
   se lea como "abre algo" y no como "es una sección más". */
.oc-desplegable {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: var(--oc-borde-ancho) solid rgba(255, 255, 255, .16);
    border-radius: var(--oc-radio-sm);
    color: rgba(255, 255, 255, .85);
    font-family: var(--oc-fuente);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.oc-desplegable:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .28);
    color: var(--oc-superficie);
}

/* El desplegable cuyo contenido es la página actual: no se llena de cobre (competiría
   con la pestaña activa), se marca con el borde y el texto en cobre claro. */
.oc-desplegable-activo,
.oc-desplegable-activo:hover {
    border-color: var(--oc-cobre-claro);
    color: var(--oc-cobre-claro);
}

.oc-chevron { flex: 0 0 auto; opacity: .7; }

.oc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--oc-radio-pill);
    background: var(--oc-cobre-suave);
    color: var(--oc-cobre);
    font-family: var(--oc-fuente);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
}

/* Franja secundaria: dónde estoy y qué tan fresco está el dato. */
.oc-franja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 44px;
    padding: 0 24px;
    background: var(--oc-superficie);
    border-bottom: var(--oc-borde-ancho) solid var(--oc-borde);
    font-size: 13px;
    color: var(--oc-texto-2);
}

.oc-franja-izq, .oc-franja-der {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-franja-izq { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.oc-franja-comercio { font-weight: 600; color: var(--oc-texto); }

.oc-franja-separador { color: var(--oc-texto-3); }

.oc-franja-fecha {
    font-family: var(--oc-fuente-datos);
    font-size: 12px;
    color: var(--oc-texto-3);
    white-space: nowrap;
}

.oc-punto-vivo {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--oc-radio-pill);
    background: var(--oc-vivo);
}

/* Banda de impersonación: ancho completo, imposible de pasar por alto. */
.oc-banda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    padding: 0 24px;
    background: var(--oc-cobre-suave);
    color: var(--oc-cobre);
    font-size: 13px;
}

.oc-banda b { font-weight: 700; }

.oc-banda .oc-btn { height: 28px; padding: 0 12px; font-size: 12px; }

/* El contenido: ancho completo con un tope, ya no una columna al lado del cajón. */
.oc-contenido {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 32px;
}

/* Pantallas angostas: se pliega a un botón de menú. */
@media (max-width: 959.98px) {
    .oc-barra-menu { display: inline-flex; }
    .oc-barra-pestanas, .oc-barra-desplegables { display: none; }
    .oc-franja { padding: 0 16px; }
    .oc-franja-fecha { display: none; }
    .oc-contenido { padding: 18px 16px; }
}

/* Sobre 960 px el cajón no existe: sus entradas están en la barra. */
@media (min-width: 960px) {
    .oc-cajon { display: none; }
    /* Sin MudLayout encima, MudBlazor no marca el cajon como fixed y el overlay queda vivo
       al ensanchar la ventana con el cajon abierto: un velo sobre toda la pantalla hasta hacer
       clic. Bajo 960 px el cajon existe; sobre 960 px no tiene que existir ni su velo. */
    .mud-drawer-overlay { display: none; }
}

/* El cajon movil se ancla a la VENTANA. MudDrawer fuera de MudLayout no recibe la clase
   mud-drawer-fixed y MudBlazor lo deja en position:absolute: con la pagina desplazada hacia
   abajo, abrirlo lo dejaba fuera de pantalla (arriba) mientras el velo si cubria la vista. */
.oc-cajon { position: fixed; }

/* En la pestana activa (cobre lleno) el badge contador era cobre sobre cobre: solo se leia el
   numero, sin pildora. Se invierte. */
.oc-pestana-activa .oc-badge { background: var(--oc-superficie); color: var(--oc-cobre); }

/* ── 11. Acceso ────────────────────────────────────────────────────────────── */
/* Login, cambio de contraseña temporal y acceso denegado: la primera impresión del
   panel, y hasta esta tarea la única pantalla que no pasaba por el vocabulario.
   _AuthLayout.cshtml es Razor Pages puro (no pasa por App.razor ni por MudBlazor), así
   que necesita su propia tarjeta y su propio campo — no puede apoyarse en .mud-input. */

.oc-acceso-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--oc-papel);
}

.oc-acceso {
    width: 100%;
    max-width: 420px;
    background: var(--oc-superficie);
    border: var(--oc-borde-ancho) solid var(--oc-borde);
    border-radius: var(--oc-radio);
    padding: 36px;
}

.oc-acceso-logo {
    display: block;
    height: 32px;
    margin: 0 auto 24px;
}

.oc-acceso-pie {
    margin-top: 20px;
    text-align: center;
    color: var(--oc-texto-3);
    font-size: 12px;
}

/* Campo de formulario fuera de MudBlazor: mismo alto, radio y foco que .mud-input, pero
   sobre un <input> nativo. */
.oc-campo { margin-bottom: 16px; }

.oc-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--oc-texto-2);
}

.oc-campo input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: var(--oc-borde-ancho) solid var(--oc-borde);
    border-radius: var(--oc-radio-sm);
    background: var(--oc-superficie);
    color: var(--oc-texto);
    font-family: var(--oc-fuente);
    font-size: .875rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.oc-campo input:focus {
    outline: none;
    border-color: var(--oc-cobre);
    box-shadow: 0 0 0 3px var(--oc-cobre-suave);
}

/* Título de una pantalla de acceso: mismo trazo que .oc-titulo (Archivo 800
   semiexpandida) pero a 22 px, centrado — la tarjeta es angosta y 26 px no calza. */
.oc-acceso-titulo {
    font-family: var(--oc-fuente);
    font-size: 22px;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -.02em;
    color: var(--oc-texto);
    text-align: center;
    margin: 0 0 24px;
}

.oc-acceso .oc-aviso { margin-bottom: 20px; }