/* Vidriera · panel. Marca ProgramAAR: oscuro, acento violeta y ámbar, Inter. */

@font-face { font-family: "Inter"; src: url("fonts/inter_400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter_500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter_600.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Playfair"; src: url("fonts/playfair_600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair"; src: url("fonts/playfair_400_italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --fondo: #08080a;
    --fondo-2: #0e0e12;
    --superficie: #131318;
    --superficie-2: #1a1a21;
    --borde: #26262f;
    --borde-fuerte: #34343f;
    --texto: #eeeef3;
    --texto-2: #a6a6b4;
    --texto-3: #6e6e7c;
    --violeta: #8a5cff;
    --violeta-2: #a585ff;
    --violeta-suave: rgba(138, 92, 255, .14);
    --ambar: #ffc857;
    --verde: #3ecf8e;
    --rojo: #ff6b6b;
    --radio: 14px;
    --radio-chico: 10px;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--violeta-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h1:focus { outline: none; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }

/* ===== Estructura ===== */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 20px;
    padding: 22px 16px;
    background: var(--fondo-2);
    border-right: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.marca-signo {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--violeta), #5b34d6); color: #fff;
    font-family: "Playfair", serif; font-size: 21px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(138, 92, 255, .35);
}
.marca-nombre { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.marca-sub { font-size: 11px; color: var(--texto-3); letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--radio-chico);
    color: var(--texto-2); font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--superficie); color: var(--texto); }
.nav a.active { background: var(--violeta-suave); color: #fff; }
.nav a.active svg { color: var(--violeta-2); }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav-titulo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); padding: 14px 12px 6px; }
.lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.usuario-tarjeta { padding: 12px; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--borde); }
.usuario-nombre { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-rol { font-size: 12px; color: var(--texto-3); }
.usuario-acciones { display: flex; gap: 8px; margin-top: 10px; }
.usuario-acciones form { margin: 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
    padding: 16px 32px; border-bottom: 1px solid var(--borde);
    background: rgba(8, 8, 10, .82); backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 5;
}
.barra-negocio { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 13.5px; min-width: 0; }
.barra-negocio strong { color: var(--texto); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-negocio form { margin: 0; }
.barra-negocio select { width: auto; min-width: 220px; padding: 7px 10px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(62, 207, 142, .15); flex: none; }
.contenido { padding: 28px 32px 60px; max-width: 1280px; width: 100%; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.encabezado p { color: var(--texto-2); margin-top: 6px; max-width: 680px; }

/* ===== Piezas ===== */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.tarjeta + .tarjeta { margin-top: 16px; }
.grilla > .tarjeta + .tarjeta, .catalogo > .tarjeta + .tarjeta { margin-top: 0; }
.tarjeta h2 { margin-bottom: 4px; }
.tarjeta .ayuda { margin-bottom: 14px; }
.ayuda { color: var(--texto-2); font-size: 13.5px; }
.tenue { color: var(--texto-3); }
.grilla { display: grid; gap: 16px; }
.grilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifra { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.cifra-titulo { color: var(--texto-2); font-size: 13px; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.separador { height: 1px; background: var(--borde); margin: 18px 0; border: 0; }

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--radio-chico);
    background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde-fuerte);
    font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.boton:hover { border-color: var(--texto-3); text-decoration: none; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton svg { width: 16px; height: 16px; }
.boton-primario { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.boton-primario:hover { background: #7a4af2; border-color: #7a4af2; }
.boton-peligro { color: var(--rojo); border-color: rgba(255, 107, 107, .35); background: transparent; }
.boton-peligro:hover { border-color: var(--rojo); }
.boton-chico { padding: 6px 11px; font-size: 13px; }
.boton-icono { padding: 7px; min-width: 34px; }
.boton-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.boton-fantasma:hover { color: var(--texto); background: var(--superficie-2); border-color: transparent; }
.boton-ancho { width: 100%; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .etiqueta-campo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--texto-3); font-size: 12.5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%; padding: 10px 12px; border-radius: var(--radio-chico);
    background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde-fuerte);
    font: inherit; font-size: 14.5px;
}
textarea { resize: vertical; min-height: 78px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px var(--violeta-suave); }
input[type=color] { width: 54px; height: 40px; padding: 3px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--borde-fuerte); cursor: pointer; }
.casilla { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.casilla input { width: 17px; height: 17px; accent-color: var(--violeta); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.campos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }

/* Clave con «ojito» */
.clave { position: relative; }
.clave input { padding-right: 46px; }
.ojito {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--texto-3);
    display: grid; place-items: center; cursor: pointer;
}
.ojito:hover { color: var(--texto); background: var(--superficie-2); }
.ojito svg { width: 19px; height: 19px; }
.ojito .ojo-cerrado { display: none; }
.ojito[aria-pressed=true] .ojo-abierto { display: none; }
.ojito[aria-pressed=true] .ojo-cerrado { display: block; }

.aviso { padding: 11px 14px; border-radius: var(--radio-chico); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.aviso-error { color: #ffb4b4; background: rgba(255, 107, 107, .08); border-color: rgba(255, 107, 107, .3); }
.aviso-ok { color: #a8f0cf; background: rgba(62, 207, 142, .08); border-color: rgba(62, 207, 142, .3); }
.aviso-info { color: #d9ccff; background: var(--violeta-suave); border-color: rgba(138, 92, 255, .35); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--borde-fuerte); color: var(--texto-2); }
.chip-ok { color: var(--verde); border-color: rgba(62, 207, 142, .35); background: rgba(62, 207, 142, .08); }
.chip-apagado { color: var(--texto-3); }
.chip-ambar { color: var(--ambar); border-color: rgba(255, 200, 87, .35); background: rgba(255, 200, 87, .07); }
.chip-violeta { color: var(--violeta-2); border-color: rgba(138, 92, 255, .4); background: var(--violeta-suave); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla-envoltorio { overflow-x: auto; }

/* Catálogo */
.catalogo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.lista-categorias { display: flex; flex-direction: column; gap: 4px; }
.categoria {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radio-chico);
    border: 1px solid transparent; cursor: pointer; color: var(--texto-2); background: transparent;
    font: inherit; text-align: left; width: 100%;
}
.categoria:hover { background: var(--superficie-2); color: var(--texto); }
.categoria.elegida { background: var(--violeta-suave); border-color: rgba(138, 92, 255, .4); color: #fff; }
.categoria-nombre { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.categoria .cantidad { font-size: 12px; color: var(--texto-3); }
.items { display: flex; flex-direction: column; gap: 10px; }
.item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 10px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--borde);
}
.item.apagado { opacity: .55; }
.miniatura { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--superficie-2); }
.miniatura-vacia { width: 72px; height: 72px; border-radius: 10px; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-3); }
.miniatura-vacia svg { width: 26px; height: 26px; }
.item-nombre { font-weight: 600; }
.item-detalle { color: var(--texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-precio { color: var(--ambar); font-weight: 700; white-space: nowrap; }
.item-acciones { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
.item .chip { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.vacio { text-align: center; padding: 36px 16px; color: var(--texto-2); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); }
.vacio svg { width: 34px; height: 34px; color: var(--texto-3); margin: 0 auto 10px; }

/* Anuncios */
.anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.anuncio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; }
.anuncio.apagado { opacity: .6; }
.anuncio-foto { aspect-ratio: 16 / 9; background: var(--superficie-2); position: relative; }
.anuncio-foto img { width: 100%; height: 100%; object-fit: cover; }
.anuncio-foto .chip { position: absolute; top: 10px; left: 10px; background: rgba(8, 8, 10, .75); }
.anuncio-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.anuncio-pie { padding: 10px 14px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Subir foto */
.subir { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; }
.subir-vista { width: 132px; height: 132px; border-radius: 12px; object-fit: cover; background: var(--superficie-2); border: 1px solid var(--borde); }
.subir-vista.logo { object-fit: contain; padding: 10px; }
.subir-vacia { width: 132px; height: 132px; border-radius: 12px; border: 1px dashed var(--borde-fuerte); display: grid; place-items: center; color: var(--texto-3); text-align: center; font-size: 12px; padding: 8px; }
.subir input[type=file] { font-size: 13px; color: var(--texto-2); max-width: 100%; }
.subir input[type=file]::file-selector-button { font: inherit; font-weight: 600; padding: 7px 12px; margin-right: 10px; border-radius: 9px; border: 1px solid var(--borde-fuerte); background: var(--superficie-2); color: var(--texto); cursor: pointer; }

/* Opciones (copa/botella) */
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; }

/* Ventana */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; z-index: 50; }
.ventana { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 18px; box-shadow: var(--sombra); }
.ventana-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.ventana-cuerpo { padding: 20px 22px; }
.ventana-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--borde); position: sticky; bottom: 0; background: var(--superficie); }

/* Pantallas */
.codigo-vincular { font-size: 24px !important; letter-spacing: .35em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pasos { counter-reset: paso; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: var(--texto-2); }
.pasos li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta-suave); color: var(--violeta-2); font-weight: 700; font-size: 13px; }
.pasos strong { color: var(--texto); }
code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; background: var(--fondo-2); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--borde); }

/* Vista previa de la marca */
.vista-marca { border-radius: 14px; padding: 22px; border: 1px solid var(--borde); }
.vista-marca .titulo { font-family: "Playfair", serif; font-size: 26px; font-weight: 600; }
.vista-marca .lema { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.vista-marca .renglon { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.vista-marca .renglon .puntos { flex: 1; border-bottom: 2px dotted currentColor; opacity: .35; transform: translateY(-4px); }
.vista-marca .renglon .nombre { font-family: "Playfair", serif; font-size: 18px; font-weight: 600; }
.vista-marca .renglon .precio { font-weight: 700; font-size: 17px; }
.vista-marca img { max-height: 56px; width: auto; }

/* Ingresar */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(1200px 600px at 10% -10%, rgba(138, 92, 255, .18), transparent 60%),
                radial-gradient(900px 500px at 110% 110%, rgba(255, 200, 87, .08), transparent 60%), var(--fondo); }
.ingreso-caja { width: min(420px, 100%); }
.ingreso .tarjeta { padding: 28px; }
.ingreso h1 { font-size: 22px; margin: 22px 0 4px; }

/* Errores de Blazor */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: #2a1215; color: #ffd0d0; z-index: 100; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ===== Celular ===== */
@media (max-width: 980px) {
    .grilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grilla-3 { grid-template-columns: 1fr; }
    .catalogo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .lateral { position: static; height: auto; padding: 14px 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--borde); }
    .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .nav a { white-space: nowrap; padding: 8px 11px; }
    .nav-titulo { display: none; }
    .lateral-pie { margin-top: 0; }
    .usuario-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .usuario-acciones { margin-top: 0; }
    .barra { padding: 12px 16px; position: static; flex-wrap: wrap; }
    .barra-negocio select { min-width: 0; width: 100%; }
    .contenido { padding: 20px 16px 48px; }
    .grilla-2, .campos-2, .campos-3 { grid-template-columns: 1fr; }
    .item { grid-template-columns: 56px minmax(0, 1fr); }
    .item .item-acciones { grid-column: 1 / -1; justify-content: flex-end; max-width: none; }
    .miniatura, .miniatura-vacia { width: 56px; height: 56px; }
    .subir { grid-template-columns: 1fr; }
    .opcion { grid-template-columns: 1fr 110px auto; }
    h1 { font-size: 22px; }
}