/* ================================================================
   ARM EMPRENDEDORES — COMPONENTS.CSS
   Piezas reutilizables. Regla de oro del proyecto: nada táctil mide
   menos de 48px, porque esto se usa de pie, en la feria, con una
   mano y a veces con las manos frías.
   ================================================================ */

/* ================================================================
   BOTONES
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--touch);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    font-size: var(--f-base);
    font-weight: var(--fw-sb);
    line-height: 1.2;
    border: 1.5px solid transparent;
    transition: transform var(--t), background var(--t), box-shadow var(--t);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primario {
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: var(--sh-brand);
}
.btn-primario:hover:not(:disabled) { background: var(--brand-hover); }

.btn-acento {
    background: var(--accent);
    color: #ffffff;
    box-shadow: var(--sh-accent);
}
.btn-acento:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secundario {
    background: var(--bg-card);
    color: var(--tx-1);
    border-color: var(--bd);
    box-shadow: var(--sh-xs);
}
.btn-secundario:hover:not(:disabled) { background: var(--bg-hover); }

.btn-fantasma { background: transparent; color: var(--brand); }
.btn-fantasma:hover:not(:disabled) { background: var(--brand-bg); }

.btn-peligro { background: var(--alert); color: #ffffff; }
.btn-peligro:hover:not(:disabled) { filter: brightness(1.08); }

.btn-bloque { width: 100%; }
.btn-lg { min-height: 56px; font-size: var(--f-lg); border-radius: var(--r-lg); }
.btn-sm { min-height: 38px; padding: var(--s-2) var(--s-3); font-size: var(--f-sm); }

/* Botón cuadrado de solo ícono. Mantiene el área táctil completa. */
.btn-icono {
    width: var(--touch);
    height: var(--touch);
    min-height: var(--touch);
    padding: 0;
    border-radius: var(--r-md);
    font-size: var(--f-xl);
    color: var(--tx-2);
    flex-shrink: 0;
}
.btn-icono:hover { background: var(--bg-hover); }

/* Estado "cargando": el texto se apaga y aparece un anillo girando.
   El ancho no cambia, así el botón no salta bajo el dedo. */
.btn.cargando { color: transparent !important; position: relative; pointer-events: none; }
.btn.cargando::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 2.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    color: var(--brand-contrast);
}
.btn-secundario.cargando::after, .btn-fantasma.cargando::after { color: var(--brand); }

/* Botón flotante de acción principal (Venta Express). */
.fab {
    position: fixed;
    right: var(--s-4);
    bottom: calc(var(--nav-h) + var(--safe-b) + var(--s-4));
    width: 60px; height: 60px;
    border-radius: var(--r-full);
    background: var(--accent);
    color: #ffffff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-accent), var(--sh-lg);
    z-index: 40;
    transition: transform var(--t);
}
.fab:active { transform: scale(0.92); }

/* ================================================================
   TARJETAS
   ================================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
}
.card-pad { padding: var(--s-4); }

.card-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-4) var(--s-3);
    font-size: var(--f-base);
    font-weight: var(--fw-b);
}

/* Fila táctil: el patrón de lista de toda la app. */
.fila {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 60px;
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--bd-light);
    background: transparent;
    transition: background var(--t);
}
.fila:last-child { border-bottom: none; }
.fila:hover { background: var(--bg-hover); }
.fila:active { background: var(--bg-soft); }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-titulo { font-weight: var(--fw-sb); font-size: var(--f-base); }
.fila-sub { font-size: var(--f-sm); color: var(--tx-3); }
.fila-valor { text-align: right; font-weight: var(--fw-b); flex-shrink: 0; }

/* ================================================================
   AVATAR / MINIATURA DE PRODUCTO
   Cuando no hay foto se muestra la inicial sobre un fondo de marca:
   nunca un cuadro roto ni un hueco gris.
   ================================================================ */
.thumb {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    background: var(--brand-bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-b);
    font-size: var(--f-base);
    flex-shrink: 0;
    overflow: hidden;
    text-transform: uppercase;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-lg { width: 64px; height: 64px; font-size: var(--f-xl); }
.thumb-xl { width: 88px; height: 88px; font-size: var(--f-2xl); border-radius: var(--r-md); }

/* ================================================================
   FORMULARIOS
   ================================================================ */
.campo { margin-bottom: var(--s-4); }

.campo label,
.label {
    display: block;
    font-size: var(--f-sm);
    font-weight: var(--fw-sb);
    color: var(--tx-2);
    margin-bottom: var(--s-2);
}
.label-req::after { content: ' *'; color: var(--alert); }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--touch);
    padding: var(--s-3);
    background: var(--bg-input);
    border: 1.5px solid var(--bd);
    border-radius: var(--r-md);
    /* 16px exactos: con menos, Safari en iOS hace zoom al enfocar. */
    font-size: var(--f-base);
    color: var(--tx-1);
    transition: border-color var(--t), box-shadow var(--t);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--bd-focus);
    box-shadow: 0 0 0 3px var(--brand-bg);
}
.input::placeholder, .textarea::placeholder { color: var(--tx-4); }
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    padding-right: var(--s-10);
}

/* Campo con prefijo de moneda pegado al borde izquierdo. */
.input-money { position: relative; }
.input-money .prefijo {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tx-3);
    font-weight: var(--fw-sb);
    pointer-events: none;
}
.input-money .input { padding-left: var(--s-8); font-weight: var(--fw-sb); }

/* Validación en línea. `aria-invalid` es la fuente de verdad: el
   color rojo es refuerzo visual, no la única señal. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--alert);
    background: var(--alert-bg);
}
.error-campo {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--f-sm);
    color: var(--alert);
    margin-top: var(--s-2);
    font-weight: var(--fw-m);
}
.ayuda-campo { font-size: var(--f-sm); color: var(--tx-3); margin-top: var(--s-2); }

/* Switch accesible: es un <input type="checkbox"> real. */
.switch { display: flex; align-items: center; gap: var(--s-3); min-height: var(--touch); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-pista {
    width: 50px; height: 30px;
    border-radius: var(--r-full);
    background: var(--bd-strong);
    position: relative;
    transition: background var(--t);
    flex-shrink: 0;
    cursor: pointer;
}
.switch-pista::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--sh-sm);
    transition: transform var(--t);
}
.switch input:checked + .switch-pista { background: var(--brand); }
.switch input:checked + .switch-pista::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-pista {
    outline: 3px solid var(--bd-focus);
    outline-offset: 2px;
}

/* Buscador con lupa. */
.buscador { position: relative; }
.buscador .input { padding-left: var(--s-10); }
.buscador::before {
    content: '🔍';
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--f-base);
    opacity: 0.6;
    pointer-events: none;
}

/* ================================================================
   BADGES Y SEMÁFORO DE INVENTARIO
   Verde: hay stock. Amarillo: se está acabando. Rojo: crítico.
   El texto acompaña siempre al color — un daltónico tiene que poder
   leer el estado sin distinguir el matiz.
   ================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 3px var(--s-2);
    border-radius: var(--r-full);
    font-size: var(--f-xs);
    font-weight: var(--fw-sb);
    white-space: nowrap;
}
.badge-ok      { background: var(--ok-bg);      color: var(--ok-tx); }
.badge-warn    { background: var(--warn-bg);    color: var(--warn-tx); }
.badge-alert   { background: var(--alert-bg);   color: var(--alert-tx); }
.badge-info    { background: var(--info-bg);    color: var(--info-tx); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-tx); }
.badge-purple  { background: var(--purple-bg);  color: var(--purple-tx); }
.badge-brand   { background: var(--brand-bg);   color: var(--brand); }

/* Punto de color a la izquierda de una fila de inventario. */
.semaforo {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.semaforo-ok    { background: var(--ok); }
.semaforo-warn  { background: var(--warn); }
.semaforo-alert { background: var(--alert); animation: pulse-soft 2s ease-in-out infinite; }

/* Barra lateral de color en la tarjeta de producto. */
.borde-ok    { box-shadow: inset 4px 0 0 var(--ok); }
.borde-warn  { box-shadow: inset 4px 0 0 var(--warn); }
.borde-alert { box-shadow: inset 4px 0 0 var(--alert); }

/* ================================================================
   CHIPS (filtros y categorías)
   ================================================================ */
.chips {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding: var(--s-1) 0 var(--s-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    padding: var(--s-2) var(--s-4);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    border-radius: var(--r-full);
    background: var(--bg-card);
    border: 1.5px solid var(--bd);
    font-size: var(--f-sm);
    font-weight: var(--fw-m);
    color: var(--tx-2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--t);
}
.chip:hover { background: var(--bg-hover); }
.chip[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}

/* ================================================================
   MODAL Y HOJA INFERIOR
   En celular todo modal entra como hoja desde abajo: queda al
   alcance del pulgar. En pantalla ancha se centra como diálogo.
   ================================================================ */
.overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-dim);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fade-in var(--t-md);
}

.modal {
    width: 100%;
    max-height: 92dvh;
    background: var(--bg-card);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex;
    flex-direction: column;
    animation: sheet-up var(--t-lg);
    padding-bottom: var(--safe-b);
}

/* Manija de arrastre: señal visual de "esto se cierra tirando". */
.modal::before {
    content: '';
    width: 40px; height: 4px;
    border-radius: var(--r-full);
    background: var(--bd-strong);
    margin: var(--s-3) auto var(--s-1);
    flex-shrink: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--bd-light);
    flex-shrink: 0;
}
.modal-header h2 { font-size: var(--f-lg); }
.modal-cuerpo { padding: var(--s-4); overflow-y: auto; flex: 1; }
.modal-pie {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4);
    border-top: 1px solid var(--bd-light);
    flex-shrink: 0;
    background: var(--bg-card);
}
.modal-pie .btn { flex: 1; }

@media (min-width: 768px) {
    .overlay { align-items: center; padding: var(--s-4); }
    .modal {
        max-width: 520px;
        border-radius: var(--r-xl);
        animation: pop var(--t-md);
        max-height: 86dvh;
    }
    .modal::before { display: none; }
    .modal-ancho { max-width: 780px; }
}

/* ================================================================
   TOASTS
   ================================================================ */
.toasts {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--safe-t) + var(--s-3));
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: min(440px, calc(100vw - var(--s-6)));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-left: 4px solid var(--neutral);
    box-shadow: var(--sh-lg);
    font-size: var(--f-sm);
    font-weight: var(--fw-m);
    animation: slide-up var(--t-lg);
    pointer-events: auto;
}
.toast-ok    { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--alert); }
.toast-warn  { border-left-color: var(--warn); }
.toast-info  { border-left-color: var(--info); }
.toast-icono { font-size: var(--f-lg); flex-shrink: 0; }
.toast-texto { flex: 1; }

/* ================================================================
   ESTADOS VACÍOS Y CARGA
   ================================================================ */
.vacio {
    text-align: center;
    padding: var(--s-10) var(--s-5);
    color: var(--tx-3);
}
.vacio-icono { font-size: 48px; margin-bottom: var(--s-3); opacity: 0.75; }
.vacio h3 { font-size: var(--f-lg); color: var(--tx-2); margin-bottom: var(--s-2); }
.vacio p { font-size: var(--f-sm); max-width: 30ch; margin: 0 auto var(--s-5); line-height: 1.6; }

/* Esqueleto de carga: ocupa el mismo espacio que el contenido real
   para que la pantalla no salte cuando llegan los datos. */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--bg-hover), transparent);
    animation: shimmer 1.4s infinite;
}
.sk-linea { height: 14px; margin-bottom: var(--s-2); }
.sk-fila  { height: 60px; margin-bottom: var(--s-2); border-radius: var(--r-md); }
.sk-card  { height: 96px; border-radius: var(--r-lg); }

.spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--bd);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: var(--s-8) auto;
}

/* ================================================================
   TABS
   ================================================================ */
.tabs {
    display: flex;
    gap: var(--s-1);
    border-bottom: 1px solid var(--bd);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: var(--s-3) var(--s-4);
    min-height: var(--touch);
    font-size: var(--f-sm);
    font-weight: var(--fw-sb);
    color: var(--tx-3);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color var(--t), border-color var(--t);
}
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

/* ================================================================
   TABLA RESPONSIVA
   Nunca desborda el ancho de la página: se desplaza dentro de su
   propio contenedor.
   ================================================================ */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { min-width: 480px; font-size: var(--f-sm); }
.tabla th {
    text-align: left;
    padding: var(--s-3);
    font-size: var(--f-xs);
    font-weight: var(--fw-sb);
    color: var(--tx-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--bd);
    white-space: nowrap;
}
.tabla td { padding: var(--s-3); border-bottom: 1px solid var(--bd-light); }
.tabla tr:last-child td { border-bottom: none; }

/* ================================================================
   BANNER DE ESTADO SIN CONEXIÓN
   ================================================================ */
.banner-offline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--warn-bg);
    color: var(--warn-tx);
    font-size: var(--f-sm);
    font-weight: var(--fw-sb);
    text-align: center;
}
.banner-sync { background: var(--info-bg); color: var(--info-tx); }

/* ================================================================
   GRÁFICOS (SVG generados en components/charts.js)
   ================================================================ */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-barra { fill: var(--brand); transition: fill var(--t); }
.grafico-barra:hover { fill: var(--brand-hover); }
.grafico-barra-suave { fill: var(--brand-light); }
.grafico-linea { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico-area { fill: var(--brand); opacity: 0.12; }
.grafico-eje { stroke: var(--bd); stroke-width: 1; }
.grafico-texto { fill: var(--tx-3); font-size: 11px; font-family: var(--font); }
.grafico-valor { fill: var(--tx-2); font-size: 11px; font-weight: 600; font-family: var(--font); }
.grafico-punto { fill: var(--brand); }