/* Stock Multicentro -- TEMA CLARO real de ingefactura (confirmado con capturas
   de webingefactura-production.up.railway.app en produccion, 24/10/2026 -- la
   version anterior de este archivo montaba la paleta de ingefactura sobre el
   fondo OSCURO de la demo PHP, lo que no es lo pedido; corregido, ver
   PROMPT_STOCK_MULTICENTRO.md seccion 7.1). La ESTRUCTURA responsive (pestanas,
   tabla->tarjetas en celular, KPIs) sigue viniendo de farmacia_singledb_htmx_dash;
   el COLOR es el de ingefactura: fondo blanco, tarjetas blancas con borde
   celeste, titulos azules, pastillas celeste/azul. */

:root {
    /* fondo claro -- real de ingefactura */
    --sm-bg: #F4FBFF;
    --sm-bg-card: #FFFFFF;
    --sm-bg-light: #D0E2FF;     /* fondo de inputs */
    --sm-bg-lighter: #E9ECEF;   /* pastillas inactivas, filas hover */
    --sm-border: #D0E2FF;
    --sm-text: #212529;
    --sm-muted: #78909C;        /* gris secundario de ingefactura */

    /* acentos -- de webIngefactura/Components/Pages/*.razor y capturas reales */
    --sm-azul-oscuro: #0F5F86;  /* titulos, pestana activa */
    --sm-azul: #0D6EFD;         /* botones, pastilla de filtro activa, foco */
    --sm-azul-tabla: #1565C0;   /* encabezado de tabla */
    --sm-celeste: #90CAF9;      /* bordes/hover */
    --sm-verde: #198754;        /* exito, stock OK, montos */
    --sm-rojo: #DC3545;         /* error, sin stock */
    --sm-ambar-bg: #FFF3CD;
    --sm-ambar-texto: #7A5B00;  /* stock bajo, avisos */
}

html, body {
    background: var(--sm-bg);
    color: var(--sm-text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.sm-app { min-height: 100vh; display: flex; flex-direction: column; }

.sm-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1.25rem; background: #fff; border-bottom: 1px solid var(--sm-border);
    flex-wrap: wrap; gap: .5rem; box-shadow: 0 1px 3px rgba(15,95,134,.06);
}
.sm-logo { display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.1rem; color: var(--sm-azul-oscuro); }
.sm-brand-logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.sm-topbar-right { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Pastillas -- igual patron que los filtros de sucursal de ingefactura (celeste
   outline, la activa azul solido con texto blanco) */
.sm-pill-link {
    background: #fff; color: var(--sm-azul-oscuro); border: 1.5px solid var(--sm-celeste);
    border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease;
}
.sm-pill-link:hover { background: var(--sm-azul); color: #fff; border-color: var(--sm-azul); transform: translateY(-1px); }
.sm-pill-danger:hover { background: var(--sm-rojo); border-color: var(--sm-rojo); }

.sm-pagehead { padding: 1.25rem 1.25rem .5rem; }
.sm-pagehead h1 { color: var(--sm-azul-oscuro); font-size: 1.6rem; font-weight: 700; margin: 0; }
.sm-userline { color: var(--sm-muted); margin: .25rem 0 0; }

.sm-tabs {
    display: flex; gap: .5rem; padding: 0 1.25rem 1rem; flex-wrap: wrap;
}
.sm-tab {
    background: #fff; color: var(--sm-azul-oscuro); border-radius: 999px;
    padding: .55rem 1.3rem; font-weight: 700; text-decoration: none;
    border: 1.5px solid var(--sm-celeste); transition: all .15s ease;
}
.sm-tab:hover { background: #F4FBFF; border-color: var(--sm-azul); }
.sm-tab.active {
    background: var(--sm-azul-oscuro); color: #fff; border-color: var(--sm-azul-oscuro);
}

.sm-content { padding: 0 1.25rem 2rem; flex: 1; }

.sm-card {
    background: var(--sm-bg-card); border: 1px solid var(--sm-border); border-radius: .75rem;
    padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(15,95,134,.05);
}

.sm-toolbar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.sm-field label { display: block; font-size: .8rem; color: var(--sm-azul-oscuro); margin-bottom: .25rem; font-weight: 600; }
.sm-field input, .sm-field select {
    background: var(--sm-bg-light); color: var(--sm-text); border: 1.5px solid var(--sm-celeste);
    border-radius: .5rem; padding: .5rem .75rem; min-width: 220px;
}
.sm-field input:focus, .sm-field select:focus { outline: none; border-color: var(--sm-azul); box-shadow: 0 0 0 2px rgba(13,110,253,.2); }
.sm-field input::placeholder { color: #8da3b5; }

.sm-btn {
    background: var(--sm-azul); color: #fff; border: none; border-radius: .5rem;
    padding: .55rem 1.1rem; font-weight: 700; cursor: pointer; transition: background .15s;
}
.sm-btn:hover { background: var(--sm-azul-oscuro); }
.sm-btn-excel { background: #198754; text-decoration: none; display: inline-flex; align-items: center; }
.sm-btn-excel:hover { background: #146c43; color: #fff; }
.sm-btn-secundario { background: #fff; color: var(--sm-azul-oscuro); border: 1.5px solid var(--sm-celeste); }
.sm-btn-secundario:hover { background: #F4FBFF; }

/* Popup de api_key recien generada (Usuarios.razor) -- antes era un texto
   perdido arriba de la pagina, dificil de encontrar; pedido de Erasmo
   25/10/2026: modal centrado + boton de copiar. */
.sm-modal-fondo {
    position: fixed; inset: 0; background: rgba(15, 30, 40, .45);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem;
}
.sm-modal {
    background: var(--sm-bg-card); border-radius: .9rem; padding: 1.5rem;
    max-width: 32rem; width: 100%; box-shadow: 0 8px 30px rgba(15,30,40,.25);
}
.sm-modal-clave {
    display: flex; gap: .5rem; align-items: center; background: var(--sm-bg-light);
    border: 1.5px solid var(--sm-celeste); border-radius: .5rem; padding: .6rem .75rem; margin: .75rem 0;
}
.sm-modal-clave code {
    flex: 1; font-size: .95rem; word-break: break-all; color: var(--sm-azul-oscuro); font-weight: 700;
}

table.sm-tabla { width: 100%; border-collapse: collapse; }
.sm-tabla thead th {
    background: var(--sm-azul-tabla); color: #fff; text-align: left; padding: .6rem .75rem;
    font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; position: sticky; top: 0;
}
.sm-tabla tbody td { padding: .55rem .75rem; border-bottom: 1px solid var(--sm-border); color: var(--sm-text); }
.sm-tabla tbody tr:nth-child(even) { background: #F8FBFF; }
.sm-tabla tbody tr:hover { background: #EAF4FF; }
.sm-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* "Cuadrito" del codigo de barra -- igual que el recuadro tipo input del PHP */
.sm-codbarra-box {
    display: inline-block; background: var(--sm-bg-light); border: 1.5px solid var(--sm-celeste);
    border-radius: .4rem; padding: .25rem .55rem; font-size: .85rem; font-variant-numeric: tabular-nums;
    margin-right: .3rem; margin-bottom: .2rem;
}

.sm-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.sm-badge-ok { background: rgba(25,135,84,.12); color: var(--sm-verde); }
.sm-badge-bajo { background: var(--sm-ambar-bg); color: var(--sm-ambar-texto); }
.sm-badge-sin { background: rgba(220,53,69,.12); color: var(--sm-rojo); }

.sm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.sm-kpi { background: #fff; border: 1px solid var(--sm-border); border-left: 4px solid var(--sm-azul); border-radius: .6rem; padding: 1rem 1.25rem; box-shadow: 0 2px 10px rgba(15,95,134,.05); }
.sm-kpi .valor { font-size: 1.8rem; font-weight: 800; color: var(--sm-azul-oscuro); }
.sm-kpi .etiqueta { color: var(--sm-muted); font-size: .85rem; }
.sm-kpi.verde { border-left-color: var(--sm-verde); }
.sm-kpi.verde .valor { color: var(--sm-verde); }
.sm-kpi.ambar { border-left-color: #eda100; }
.sm-kpi.rojo { border-left-color: var(--sm-rojo); }
.sm-kpi.rojo .valor { color: var(--sm-rojo); }

.sm-paginacion { display: flex; gap: .4rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.sm-paginacion button { background: #fff; color: var(--sm-azul-oscuro); border: 1.5px solid var(--sm-celeste); border-radius: .4rem; padding: .35rem .7rem; cursor: pointer; }
.sm-paginacion button:disabled { opacity: .4; cursor: default; }
.sm-paginacion button.activo { background: var(--sm-azul); color: #fff; border-color: var(--sm-azul); }

/* ---- Login (igual a la tarjeta real de ingefactura) ---- */
.sm-login-fondo {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--sm-bg);
    padding: 1rem;
}
.sm-login-card {
    background: #fff; border: 1px solid var(--sm-border); border-radius: 1rem;
    padding: 2rem; width: 100%; max-width: 360px; box-shadow: 0 4px 24px rgba(15,95,134,.12);
}
.sm-login-logo { color: var(--sm-azul-oscuro); font-size: 1.3rem; font-weight: 800; text-align: center; }
.sm-login-sub { color: var(--sm-muted); text-align: center; margin: .25rem 0 1.25rem; font-size: .85rem; }
.sm-login-label { display: block; color: var(--sm-azul-oscuro); font-size: .8rem; font-weight: 600; margin: .75rem 0 .25rem; }
.sm-login-input {
    width: 100%; background: var(--sm-bg-light); border: 1.5px solid var(--sm-celeste); color: var(--sm-text);
    border-radius: .5rem; padding: .6rem .75rem; box-sizing: border-box;
}
.sm-login-input:focus { outline: none; border-color: var(--sm-azul); }
.sm-login-btn {
    width: 100%; margin-top: 1.25rem; background: var(--sm-azul); color: #fff; border: none;
    border-radius: .5rem; padding: .7rem; font-weight: 700; cursor: pointer;
}
.sm-login-btn:hover { background: var(--sm-azul-oscuro); }
.sm-login-error { background: var(--sm-ambar-bg); color: var(--sm-ambar-texto); border-radius: .5rem; padding: .5rem .75rem; font-size: .85rem; margin-bottom: .5rem; }

/* ---- Responsive: mismos 3 anchos que ya prueba farmastock-theme.css ---- */
@media (max-width: 1100px) {
    .sm-kpis { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .sm-topbar { flex-direction: column; align-items: flex-start; }
    .sm-pagehead h1 { font-size: 1.3rem; }
    .sm-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .sm-tab { white-space: nowrap; }
    .sm-kpis { grid-template-columns: 1fr; }
    .sm-toolbar { flex-direction: column; align-items: stretch; }
    .sm-field input, .sm-field select { min-width: 0; width: 100%; }

    /* la tabla se convierte en tarjetas apiladas, igual idea que farmastock-theme.css */
    .sm-tabla thead { display: none; }
    .sm-tabla, .sm-tabla tbody, .sm-tabla tr, .sm-tabla td { display: block; width: 100%; }
    .sm-tabla tr { background: #fff; border: 1px solid var(--sm-border); border-radius: .6rem; margin-bottom: .6rem; padding: .5rem .75rem; box-shadow: 0 2px 8px rgba(15,95,134,.05); }
    .sm-tabla td { border: none; padding: .3rem 0; display: flex; justify-content: space-between; gap: .5rem; }
    .sm-tabla td::before { content: attr(data-etiqueta); color: var(--sm-muted); font-weight: 600; font-size: .78rem; }
    .sm-tabla .num { text-align: right; }
}