/* Portal EbuyPlace - hoja de estilos unica. Sin recursos externos. Sin atributos style en las plantillas (CSP estricta).
   La marca del club viene de variables CSS (--club-*), definidas en css/clubes/<club>.css o inyectadas por la vista. */

:root {
  /* respaldo si no llega ningun tema del club */
  --club-primario: #FFD100;
  --club-sobre-primario: #111827;
  --club-primario-hover: #E6BC00;
  --club-acento: #F5B800;
  --club-acento-suave: #FFF6CC;
  --club-fondo: #111827;
  --club-fondo-2: #1F2937;
  --club-sobre-fondo: #FFFFFF;

  --texto: #0F172A;
  --texto-suave: #64748B;
  --fondo-pagina: #F8FAFC;
  --tarjeta: #FFFFFF;
  --borde: #E2E8F0;
  --borde-suave: #F1F5F9;
  --enlace: #2563EB;
  --foco: #3B82F6;

  --azul-fondo: #EFF6FF; --azul-texto: #1D4ED8;
  --azul-osc-fondo: #1E3A8A; --azul-osc-texto: #FFFFFF;
  --ambar-fondo: #FFFBEB; --ambar-texto: #B45309; --ambar-borde: #F59E0B;
  --verde-fondo: #F0FDF4; --verde-texto: #15803D; --verde-borde: #22C55E;
  --rojo-fondo: #FEF2F2; --rojo-texto: #B91C1C; --rojo-borde: #EF4444; --rojo-boton: #DC2626;
  --gris-fondo: #F1F5F9; --gris-texto: #475569;
  --gris-osc-fondo: #334155; --gris-osc-texto: #FFFFFF;
  --morado-fondo: #F5F3FF; --morado-texto: #6D28D9;

  --radio: 12px;
  --radio-sm: 8px;
  --radio-lg: 16px;
  --sombra-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --sombra: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --sombra-fuerte: 0 12px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--fuente); color: var(--texto); background: var(--fondo-pagina); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
a { color: var(--enlace); }
a:hover { text-decoration: none; }
img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* Foco visible siempre (AA) */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.sobre-oscuro :focus-visible, .barra-sup :focus-visible, .barra-lateral :focus-visible { outline-color: #FFFFFF; }

.solo-lectores { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: .75rem 1rem; z-index: 1000; }
.saltar:focus { left: 8px; top: 8px; }
.texto-suave { color: var(--texto-suave); }
.texto-chico { font-size: .875rem; }
.texto-centro { text-align: center; }
.texto-der { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }

.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* ---------- Botones (minimo 40 px de alto) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .5rem 1.15rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: #fff; color: var(--texto); line-height: 1.25; box-shadow: var(--sombra-sm); transition: all .15s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover { background: #F8FAFC; border-color: #CBD5E1; transform: translateY(-1px); box-shadow: var(--sombra); }
.btn:active { transform: scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--primario { background: var(--club-primario); color: var(--club-sobre-primario); border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn--primario:hover { background: var(--club-primario-hover); border-color: rgba(0,0,0,0.12); box-shadow: var(--sombra-md); }
.btn--secundario { background: #fff; color: var(--texto); border-color: #CBD5E1; }
.btn--secundario:hover { background: #F1F5F9; border-color: #94A3B8; }
.btn--peligro { background: var(--rojo-boton); color: #fff; border-color: var(--rojo-boton); }
.btn--peligro:hover { background: #B91C1C; }
.btn--texto { background: transparent; border-color: transparent; color: var(--enlace); padding-inline: .5rem; min-height: 40px; text-decoration: none; box-shadow: none; }
.btn--texto:hover { background: rgba(37, 99, 235, 0.06); text-decoration: underline; transform: none; }
.btn--texto-rojo { color: var(--rojo-boton); }
.btn--grande { min-height: 52px; font-size: 1.125rem; font-weight: 700; padding-inline: 1.75rem; border-radius: var(--radio); }
.btn--bloque { display: flex; width: 100%; }
.btn kbd, .kbd { font: inherit; font-size: .8em; font-weight: 600; padding: .1em .45em; border: 1px solid currentColor; border-radius: 5px; opacity: .85; background: rgba(0,0,0,0.04); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.acciones--fin { justify-content: flex-end; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 1.1rem; }
.campo label, .campo .etiqueta-campo { display: block; font-weight: 600; font-size: .925rem; margin-bottom: .35rem; color: var(--texto); }
.campo .ayuda, .ayuda { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: .3rem; }
.campo .error, .error-texto { display: block; font-size: .875rem; color: var(--rojo-texto); font-weight: 600; margin-top: .3rem; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo-borde); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], input[type="file"], select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .85rem; font: inherit; color: var(--texto); background: #fff; border: 1px solid #CBD5E1; border-radius: 9px; box-shadow: var(--sombra-sm); transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
textarea { min-height: 96px; resize: vertical; }
input[readonly] { background: var(--fondo-pagina); color: var(--texto-suave); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--club-fondo); flex: none; cursor: pointer; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .75rem; }
.casilla label { font-weight: 400; margin: 0; cursor: pointer; }
.campo-clave { position: relative; }
.campo-clave input { padding-right: 5.5rem; }
.campo-clave button { position: absolute; right: 4px; top: 4px; min-height: 34px; }
.contador { font-size: .85rem; color: var(--texto-suave); font-weight: 500; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: .5rem; }

/* ---------- Tarjetas y estructura ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.35rem; }
.tarjeta--compacta { padding: 1rem 1.15rem; }
.tarjeta__titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: .85rem; }
.encabezado-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.35rem; }
.encabezado-pagina p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.cols-60-40 { display: grid; grid-template-columns: 3fr 2fr; gap: 1.35rem; align-items: start; }
.cols-65-35 { display: grid; grid-template-columns: 13fr 7fr; gap: 1.35rem; align-items: start; }
.cols-55-45 { display: grid; grid-template-columns: 11fr 9fr; gap: 1.35rem; align-items: start; }
.pila > * + * { margin-top: 1.1rem; }

/* ---------- Alertas ---------- */
.alerta { display: flex; gap: .85rem; padding: .95rem 1.15rem; border-radius: 10px; border-left: 5px solid; margin-bottom: 1.1rem; box-shadow: var(--sombra-sm); }
.alerta__cuerpo { flex: 1; }
.alerta__cuerpo > :last-child { margin-bottom: 0; }
.alerta__titulo { font-weight: 700; margin: 0 0 .2rem; }
.alerta--ambar { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: var(--ambar-borde); }
.alerta--verde { background: var(--verde-fondo); color: var(--verde-texto); border-color: var(--verde-borde); }
.alerta--rojo { background: var(--rojo-fondo); color: var(--rojo-texto); border-color: var(--rojo-borde); }
.alerta--azul { background: var(--azul-fondo); color: var(--azul-texto); border-color: #3B82F6; }
.alerta--gris { background: var(--gris-fondo); color: var(--gris-texto); border-color: #94A3B8; }
.alerta a { color: inherit; font-weight: 700; }
.alerta .btn { align-self: center; }

/* ---------- Etiquetas de estado ---------- */
.etiqueta { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.etiqueta--azul { background: var(--azul-fondo); color: var(--azul-texto); }
.etiqueta--azul-oscuro { background: var(--azul-osc-fondo); color: var(--azul-osc-texto); }
.etiqueta--ambar { background: var(--ambar-fondo); color: var(--ambar-texto); }
.etiqueta--verde { background: var(--verde-fondo); color: var(--verde-texto); }
.etiqueta--rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.etiqueta--gris { background: var(--gris-fondo); color: var(--gris-texto); }
.etiqueta--gris-oscuro { background: var(--gris-osc-fondo); color: var(--gris-osc-texto); }
.etiqueta--morado { background: var(--morado-fondo); color: var(--morado-texto); }
.etiqueta--extra { margin-left: .25rem; }
.motivo-linea { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: .2rem; white-space: normal; }

/* ---------- Tablas ---------- */
.tabla-envoltorio { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-sm); }
.tabla th, .tabla td { padding: .75rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borde-suave); }
.tabla thead th { background: #F8FAFC; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #64748B; font-weight: 700; white-space: nowrap; position: sticky; top: 0; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: #F8FAFC; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.fila-propia { background: var(--club-acento-suave); }
.tabla tr.fila-propia:hover { background: var(--club-acento-suave); }
.tabla tr.fila-activa { outline: 3px solid var(--foco); outline-offset: -3px; }
.tabla a.fila-enlace { color: var(--texto); font-weight: 600; text-decoration: none; }
.tabla a.fila-enlace:hover { text-decoration: underline; color: var(--enlace); }
.tabla caption { text-align: left; padding: .75rem 1rem; font-weight: 700; }
.celda-sub { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: .15rem; }
.tabla-resumen th { width: 40%; color: var(--texto-suave); font-weight: 600; }

/* ---------- Pestanas ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--borde); margin-bottom: 1.15rem; padding: 0; list-style: none; }
.pestanas a { display: block; padding: .65rem 1.1rem; text-decoration: none; color: var(--texto-suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; min-height: 40px; transition: color .15s ease, border-color .15s ease; }
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current="page"], .pestanas a[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--club-primario); font-weight: 700; }
.pestanas .contador-pestana { font-size: .78rem; font-weight: 700; background: var(--gris-fondo); color: var(--gris-texto); border-radius: 999px; padding: .1rem .5rem; margin-left: .35rem; }

.resumen-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .75rem 1.15rem; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 1.25rem; font-size: .95rem; box-shadow: var(--sombra-sm); }
.resumen-barra strong { color: var(--texto); }
.resumen-barra .destaque-verde { color: var(--verde-texto); font-weight: 700; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin-bottom: 1.25rem; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros .campo--ancho { flex: 1 1 280px; }

/* ---------- Indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.15rem; margin-bottom: 1.35rem; }
.indicador { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.15rem 1.35rem; position: relative; overflow: hidden; transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease; }
.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.indicador::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--club-primario); }
.indicador__titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--texto-suave); margin: 0; }
.indicador__valor { font-size: 2.15rem; font-weight: 800; line-height: 1.15; margin: .25rem 0 .15rem; font-variant-numeric: tabular-nums; color: var(--texto); }
.indicador__detalle { font-size: .875rem; color: var(--texto-suave); margin: 0 0 .25rem; font-weight: 500; }
.indicador--ambar::before { background: var(--ambar-borde); }
.indicador--verde::before { background: var(--verde-borde); }
.indicador--rojo::before { background: var(--rojo-borde); }
.indicador--morado::before { background: #7C3AED; }
.indicador--enlace { padding: 0; }
.indicador--enlace > a.indicador__enlace-total { display: block; padding: 1.15rem 1.35rem; color: inherit; text-decoration: none; }
.indicador--enlace > a:hover { background: #F8FAFC; }

/* ---------- Barra de avance (progress nativo, sin estilos en linea) ---------- */
.avance { display: flex; align-items: center; gap: .6rem; min-width: 150px; }
.avance progress { flex: 1; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--gris-fondo); overflow: hidden; }
.avance progress::-webkit-progress-bar { background: var(--gris-fondo); border-radius: 999px; }
.avance progress::-webkit-progress-value { background: #4B5563; border-radius: 999px; }
.avance progress::-moz-progress-bar { background: #4B5563; border-radius: 999px; }
.avance--lider progress::-webkit-progress-value { background: var(--club-acento); }
.avance--lider progress::-moz-progress-bar { background: var(--club-acento); }
.avance__texto { font-size: .85rem; color: var(--texto-suave); white-space: nowrap; min-width: 6.5em; font-weight: 600; }

/* ---------- Medallas ---------- */
.medalla { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 800; font-size: .95rem; background: var(--gris-fondo); color: var(--gris-texto); box-shadow: var(--sombra-sm); }
.medalla--1 { background: #FEF08A; color: #854D0E; }
.medalla--2 { background: #E2E8F0; color: #334155; }
.medalla--3 { background: #FFEDD5; color: #9A3412; }

/* ---------- Paginacion ---------- */
.paginacion { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center; padding: 1rem 0 0; }
.paginacion a, .paginacion span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .6rem; border: 2px solid var(--borde); border-radius: 8px; text-decoration: none; color: var(--texto); background: #fff; font-weight: 600; }
.paginacion a:hover { background: #F9FAFB; }
.paginacion [aria-current="page"] { background: var(--club-primario); color: var(--club-sobre-primario); border-color: var(--club-primario); }
.paginacion .inactivo { opacity: .45; }

/* ---------- Estado vacio ---------- */
.vacio { text-align: center; padding: 2.5rem 1.25rem; background: var(--tarjeta); border: 2px dashed var(--borde); border-radius: var(--radio); }
.vacio h2, .vacio h3 { margin-bottom: .35rem; }
.vacio p { color: var(--texto-suave); max-width: 46ch; margin-inline: auto; }

/* ---------- Modales (dialog nativo) ---------- */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: var(--sombra-fuerte); color: var(--texto); }
dialog.modal--ancho { width: min(760px, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgba(17, 24, 39, .6); }
.modal__cuerpo { padding: 1.5rem; }
.modal__cuerpo h2 { margin-bottom: .6rem; }
.modal__pie { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem; }

/* ---------- Barra superior del portal (mostrador) ---------- */
.sobre-oscuro { background: var(--club-fondo); color: var(--club-sobre-fondo); }
.barra-sup { background: var(--club-fondo); color: var(--club-sobre-fondo); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); }
.barra-sup__fila { max-width: 1400px; margin: 0 auto; padding: .6rem 1.25rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.marca__logo { height: 32px; width: auto; max-width: 132px; border-radius: 6px; object-fit: contain; flex: none; } /* logotipo horizontal del club */
.marca__sigla { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--club-primario); color: var(--club-sobre-primario); font-weight: 800; flex: none; }
.marca__texto { line-height: 1.15; }
.marca__texto strong { display: block; }
.marca__texto span { font-size: .8rem; opacity: .85; }
.barra-sup__centro { font-weight: 700; text-align: center; }
.barra-sup__der { display: flex; justify-content: flex-end; }
.menu-mostrador { position: relative; }
.menu-mostrador summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-weight: 600; transition: all .15s ease; }
.menu-mostrador summary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.menu-mostrador summary::-webkit-details-marker { display: none; }
.menu-mostrador__lista { position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; background: #fff; color: var(--texto); border-radius: 12px; box-shadow: var(--sombra-fuerte); padding: .45rem; z-index: 60; border: 1px solid var(--borde); }
.menu-mostrador__lista a, .menu-mostrador__lista button { display: block; width: 100%; text-align: left; padding: .65rem .85rem; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: .9rem; font-weight: 500; color: var(--texto); text-decoration: none; cursor: pointer; min-height: 40px; transition: background .12s ease; }
.menu-mostrador__lista a:hover, .menu-mostrador__lista button:hover { background: var(--fondo-pagina); }
.nav-pestanas { background: var(--club-fondo-2); border-bottom: 1px solid rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.nav-pestanas ul { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .35rem; list-style: none; overflow-x: auto; }
.nav-pestanas a { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1.15rem; color: var(--club-sobre-fondo); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 4px solid transparent; white-space: nowrap; transition: all .15s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-pestanas a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-pestanas a[aria-current="page"] { border-bottom-color: var(--club-primario); color: #fff; }
.nav-pestanas a.destacado { background: var(--club-primario); color: var(--club-sobre-primario); border-radius: 8px 8px 0 0; margin-top: 4px; min-height: 44px; font-weight: 700; box-shadow: 0 -2px 6px rgba(0,0,0,0.1); }
.nav-pestanas a.destacado:hover { background: var(--club-primario-hover); }
.nav-pestanas a.destacado[aria-current="page"] { border-bottom-color: var(--club-sobre-primario); }
.franja-offline { background: #7C2D12; color: #fff; padding: .6rem 1.25rem; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 600; }
.franja-offline .btn { min-height: 36px; }
.contenedor { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; }
.pie-marca { text-align: center; font-size: .85rem; color: var(--texto-suave); padding: 1rem 1.25rem 2rem; }

/* ---------- Mensajes (django messages) ---------- */
.mensajes { margin-bottom: 1rem; }

/* ---------- Auth ---------- */
.pagina-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--club-fondo); }
.auth-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-caja { width: min(460px, 100%); background: #fff; border-radius: 16px; padding: 2rem; box-shadow: var(--sombra-fuerte); }
.auth-caja .marca { color: var(--texto); margin-bottom: 1.25rem; }
.auth-caja .marca__texto span { color: var(--texto-suave); }
/* Con logotipo, la marca va sobre una franja del color de fondo del club (el logo trae su fondo). */
.auth-caja .marca:has(.marca__logo) { display: flex; align-items: center; gap: .75rem; background: var(--club-fondo); color: var(--club-sobre-fondo); padding: .7rem 1rem; border-radius: 10px; }
.auth-caja .marca:has(.marca__logo) .marca__texto span { color: var(--club-sobre-fondo); opacity: .85; }
.pagina-auth .pie-marca { color: rgba(255,255,255,.8); }
.lista-valor { padding-left: 1.2rem; margin: 0 0 1rem; }
.lista-valor li { margin-bottom: .35rem; }

/* ---------- Selector de dependiente ---------- */
.selector-dep { border: 2px solid transparent; border-radius: var(--radio); padding: .25rem; }
.selector-dep--resaltado { border-color: var(--ambar-borde); background: var(--ambar-fondo); padding: .85rem; }
.selector-dep__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.selector-dep__op { position: relative; }
.selector-dep__op input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.selector-dep__op label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: .5rem .85rem; border: 1.5px solid #CBD5E1; border-radius: 10px; font-size: 1.05rem; font-weight: 600; background: #fff; cursor: pointer; margin: 0; box-shadow: var(--sombra-sm); transition: all .15s cubic-bezier(0.16, 1, 0.3, 1); }
.selector-dep__op input:hover + label { background: #F8FAFC; border-color: #94A3B8; transform: translateY(-1px); }
.selector-dep__op input:checked + label { background: var(--club-primario); color: var(--club-sobre-primario); border-color: #0F172A; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.selector-dep__op input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }
.selector-dep__op input:checked + label::before { content: "\2713"; margin-right: .45rem; font-weight: 800; }
.selector-dep--lista .selector-dep__lista { grid-template-columns: 1fr; max-height: 260px; overflow-y: auto; padding: .35rem; border: 1.5px solid var(--borde); border-radius: 10px; }
.selector-dep--lista .selector-dep__op label { justify-content: flex-start; min-height: 46px; }
.selector-dep__buscar { margin-bottom: .75rem; }
.selector-dep__sin-resultados { padding: .75rem; color: var(--texto-suave); font-weight: 500; }

/* ---------- Registrar venta: pasos ---------- */
.paso { background: var(--tarjeta); border: 1.5px solid var(--borde); border-radius: var(--radio-lg); margin-bottom: 1.25rem; box-shadow: var(--sombra-sm); transition: border-color .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease; overflow: hidden; }
.paso__cabecera { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; background: #FFFFFF; }
.paso__num { width: 2.35rem; height: 2.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; background: var(--gris-fondo); color: var(--gris-texto); flex: none; transition: all .2s ease; }
.paso__titulo { margin: 0; font-size: 1.15rem; font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.paso__resumen { color: var(--texto-suave); font-size: .925rem; flex: 2; font-weight: 500; }
.paso__cuerpo { padding: 0 1.35rem 1.35rem; }
.paso[data-estado="activo"] { border-color: #0F172A; box-shadow: var(--sombra-md); }
.paso[data-estado="activo"] .paso__num { background: var(--club-primario); color: var(--club-sobre-primario); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.paso[data-estado="listo"] .paso__num { background: #DCFCE7; color: #15803D; border: 1.5px solid #86EFAC; }
.paso[data-estado="listo"] .paso__cuerpo { display: none; }
.paso[data-estado="futuro"] { opacity: .65; }
.paso[data-estado="futuro"] .paso__cuerpo { display: none; }
.paso:not([data-estado="listo"]) .paso__resumen, .paso:not([data-estado="listo"]) .paso__cambiar { display: none; }
.bloque-paso + .bloque-paso { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--borde-suave); }
.campo-lectura { display: flex; gap: .75rem; flex-wrap: wrap; }
.campo-lectura input { flex: 1 1 260px; font-size: 1.15rem; min-height: 48px; }
.tarjeta-instalador { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; border: 1.5px solid #86EFAC; border-radius: var(--radio); background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); box-shadow: var(--sombra-sm); }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #E2E8F0; color: #334155; display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; font-weight: 800; flex: none; border: 3px solid #FFFFFF; box-shadow: var(--sombra); }
.tarjeta-instalador__nombre { font-size: 1.25rem; font-weight: 800; margin: 0; color: #064E3B; letter-spacing: -0.01em; }
.visor-camara { position: relative; background: #0F172A; border-radius: var(--radio); overflow: hidden; max-width: 520px; box-shadow: var(--sombra-md); }
.visor-camara video { display: block; width: 100%; max-height: 320px; background: #000; }
.visor-camara__guia { position: absolute; inset: 15% 20%; border: 2.5px dashed rgba(255,255,255,.85); border-radius: 12px; pointer-events: none; }
.zona-archivo { border: 2px dashed #CBD5E1; border-radius: var(--radio); padding: 2rem 1.25rem; text-align: center; background: #F8FAFC; transition: all .2s ease; }
.zona-archivo.arrastrando { border-color: #0F172A; background: var(--club-acento-suave); transform: scale(1.005); }
.zona-archivo p { margin-bottom: .5rem; }
.sello { display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.sello--ok { background: var(--verde-fondo); color: var(--verde-texto); }
.sello--manual { background: var(--ambar-fondo); color: var(--ambar-texto); }

/* ---------- Panel lateral de resumen (registrar venta) ---------- */
.panel-resumen { position: sticky; top: 120px; border: 1.5px solid var(--borde); border-radius: var(--radio-lg); background: #FFFFFF; box-shadow: var(--sombra-md); padding: 1.35rem; }
.panel-resumen .tarjeta__titulo { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: .85rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde-suave); }
.resumen-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.resumen-lista li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .15rem .75rem; padding: .65rem 0; border-bottom: 1px solid var(--borde-suave); }
.resumen-lista li:last-child { border-bottom: 0; }
.resumen-lista li .rotulo { color: var(--texto-suave); font-size: .85rem; font-weight: 500; }
.resumen-lista li .valor { font-weight: 700; grid-column: 1 / -1; font-size: .95rem; color: var(--texto); }
.resumen-lista li .valor.mono { font-size: 1.1rem; }
.resumen-lista li .valor + .cambiar { grid-row: 1; grid-column: 2; }
.resumen-lista li .cambiar { font-size: .85rem; }
.resumen-lista li#res-cashback-fila { background: #F0FDF4; padding: .75rem .9rem; border-radius: 10px; border: 1px solid #BBF7D0; margin-top: .6rem; }
.resumen-lista li#res-cashback-fila .rotulo { color: #166534; font-weight: 600; }
.resumen-lista li#res-cashback-fila .valor { color: #15803D; font-size: 1.35rem; font-weight: 800; }
.visor-factura__lienzo--xml { height: auto; padding: 1rem; background: #fff; }
.franja-gris { background: var(--gris-fondo); color: var(--gris-texto); padding: .75rem 1rem; border-radius: 8px; font-weight: 500; }
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0; }
.ficha { min-height: 36px; padding: .3rem .95rem; border-radius: 999px; border: 1px solid #CBD5E1; background: #fff; font: inherit; font-size: .875rem; font-weight: 600; color: var(--texto); cursor: pointer; transition: all .15s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--sombra-sm); }
.ficha:hover { background: #F8FAFC; border-color: #94A3B8; transform: translateY(-1px); }
.ficha[aria-pressed="true"] { background: #0F172A; color: #fff; border-color: #0F172A; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); }

/* ---------- Controles de cantidad e inputs numéricos en tabla ---------- */
.cantidad { display: inline-flex; align-items: stretch; border: 1px solid #CBD5E1; border-radius: 8px; background: #FFFFFF; overflow: hidden; box-shadow: var(--sombra-sm); }
.cantidad button { width: 34px; min-height: 34px; border: 0; background: #F8FAFC; color: #0F172A; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background .12s ease, color .12s ease; display: flex; align-items: center; justify-content: center; padding: 0; }
.cantidad button:hover { background: #E2E8F0; }
.cantidad button:active { background: #CBD5E1; }
.cantidad input { width: 3.2rem; min-height: 34px; border: 0; border-left: 1px solid #E2E8F0; border-right: 1px solid #E2E8F0; text-align: center; font-weight: 700; padding: 0; border-radius: 0; box-shadow: none; font-variant-numeric: tabular-nums; }
.input-precio-unitario { max-width: 105px; min-height: 34px; padding: .25rem .55rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; border: 1px solid #CBD5E1; border-radius: 8px; box-shadow: var(--sombra-sm); }
.input-precio-unitario:focus { border-color: var(--foco); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); outline: none; }
.valor-subtotal { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.valor-cashback { font-weight: 700; font-variant-numeric: tabular-nums; color: #15803D; }

/* ---------- Éxito de registro ---------- */
.exito-icono { width: 80px; height: 80px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.15rem; box-shadow: 0 4px 16px rgba(34, 197, 94, 0.22); }
.exito-icono .icono { width: 44px; height: 44px; }
.caja-frase { border: 1.5px solid var(--club-acento); background: #FFFDF0; border-radius: 12px; padding: 1.25rem 1.5rem; font-size: 1.15rem; font-weight: 600; line-height: 1.5; margin: 1.5rem 0; box-shadow: var(--sombra-sm); text-align: left; }

/* ---------- Panel lateral de detalle (ventas del mostrador) ---------- */
.con-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; align-items: start; }
.con-panel--abierto { grid-template-columns: minmax(0, 1fr) 460px; }
.panel-lateral { position: sticky; top: 120px; background: #fff; border: 1.5px solid #0F172A; border-radius: var(--radio-lg); box-shadow: var(--sombra-fuerte); padding: 1.35rem; max-height: calc(100vh - 140px); overflow-y: auto; }
.panel-lateral__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .85rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde-suave); }
.panel-lateral h2 { margin: 0; font-size: 1.2rem; }
.panel-lateral section { margin-top: 1.15rem; }
.panel-lateral h3 { font-size: .95rem; text-transform: none; color: var(--texto-suave); }
.historial { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--borde); }
.historial li { padding: .35rem 0 .35rem .85rem; position: relative; }
.historial li time { display: block; font-size: .8rem; color: var(--texto-suave); font-weight: 500; }

/* ---------- Empresa: barra lateral ---------- */
.layout-empresa { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { background: var(--club-fondo, #0B1120); color: #F8FAFC; display: flex; flex-direction: column; padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.08); }
.barra-lateral .marca { padding: 0 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .85rem; }
.barra-lateral nav ul { list-style: none; margin: 0; padding: 0 .75rem; }
.barra-lateral nav a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .55rem .95rem; border-radius: 9px; color: #CBD5E1; text-decoration: none; font-weight: 600; margin-bottom: 3px; transition: all .15s ease; }
.barra-lateral nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.barra-lateral nav a[aria-current="page"] { background: var(--club-primario); color: var(--club-sobre-primario); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.barra-lateral .contador-menu { margin-left: auto; background: #fff; color: #111827; border-radius: 999px; font-size: .8rem; font-weight: 800; padding: 0 .55rem; min-width: 1.6rem; text-align: center; }
.barra-lateral .pronto { margin-left: auto; font-size: .72rem; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 0 .45rem; opacity: .85; }
.barra-lateral__pie { margin-top: auto; padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; }
.barra-lateral__pie .rol { opacity: .85; font-size: .8rem; }
.barra-lateral__pie .btn { margin-top: .75rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.barra-lateral__pie .btn:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.contenido-empresa { padding: 1.75rem 2rem 2rem; min-width: 0; }
.visor-factura { background: #1E293B; border-radius: var(--radio-lg); padding: .85rem; position: sticky; top: 1rem; box-shadow: var(--sombra-md); }
.visor-factura__barra { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.visor-factura__barra .btn { min-height: 38px; }
.visor-factura__lienzo { background: #fff; border-radius: 8px; overflow: auto; height: 70vh; display: flex; align-items: flex-start; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.visor-factura__lienzo img { transform-origin: top center; transition: transform .15s; max-width: 100%; }
.visor-factura__lienzo iframe, .visor-factura__lienzo object { width: 100%; height: 100%; border: 0; }
.tabla-lineas td, .tabla-lineas th { padding: .6rem .75rem; }
.pie-calculo { background: #F8FAFC; border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.15rem; margin-top: .85rem; }
.pie-calculo p { margin: 0 0 .25rem; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.pie-calculo p.total { font-weight: 800; font-size: 1.15rem; color: var(--texto); padding-top: .4rem; border-top: 1px solid var(--borde); }
.sello-factura { display: inline-block; padding: .2rem .75rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.sello-factura--ok { background: var(--verde-fondo); color: var(--verde-texto); }
.sello-factura--dudoso { background: var(--ambar-fondo); color: var(--ambar-texto); }
.sello-factura--manual { background: var(--gris-fondo); color: var(--gris-texto); }
.reservado { background: var(--gris-fondo); border: 2px dashed #9CA3AF; border-radius: var(--radio); padding: 1.5rem; text-align: center; color: var(--gris-texto); font-weight: 500; }
.fila-edicion td { background: #FFFBEB; }
.fila-edicion input { min-height: 38px; }
.pasos-asistente { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.pasos-asistente li { flex: 1; padding: .5rem .75rem; border-bottom: 3px solid var(--borde); font-weight: 600; color: var(--texto-suave); font-size: .9rem; transition: all .15s ease; }
.pasos-asistente li[aria-current="step"] { border-bottom-color: var(--club-primario); color: var(--texto); font-weight: 700; }
.desglose { background: #F8FAFC; }

/* ---------- Muestras ---------- */
.nota-muestra { background: #1E3A8A; color: #fff; padding: .45rem 1rem; font-size: .85rem; text-align: center; font-weight: 500; }
.nota-muestra a { color: #fff; text-decoration: underline; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .con-panel--abierto { grid-template-columns: minmax(0, 1fr); }
  .panel-lateral { position: static; max-height: none; }
  .layout-empresa { grid-template-columns: 220px minmax(0, 1fr); }
  .contenido-empresa { padding: 1.25rem; }
}
@media (max-width: 900px) {
  .cols-60-40, .cols-65-35, .cols-55-45 { grid-template-columns: minmax(0, 1fr); }
  .panel-resumen { position: static; }
  .barra-sup__fila { grid-template-columns: 1fr auto; }
  .barra-sup__centro { grid-column: 1 / -1; order: 3; text-align: left; font-size: .95rem; }
  .visor-factura { position: static; }
  .visor-factura__lienzo { height: 50vh; }
}
@media (max-width: 700px) {
  h1 { font-size: 1.45rem; }
  .contenedor { padding: 1rem .85rem 1.5rem; }
  .layout-empresa { grid-template-columns: minmax(0, 1fr); }
  .barra-lateral { position: static; height: auto; }
  .paso__cabecera { flex-wrap: wrap; }
  .btn--grande { width: 100%; }
  .auth-caja { padding: 1.5rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .barra-sup, .nav-pestanas, .barra-lateral, .btn { display: none !important; } }

/* ---------- Complementos ---------- */
.marca-enlace { color: inherit; text-decoration: none; display: inline-block; }
.alerta--success { background: var(--verde-fondo); color: var(--verde-texto); border-color: var(--verde-borde); }
.alerta--error { background: var(--rojo-fondo); color: var(--rojo-texto); border-color: var(--rojo-borde); }
.alerta--warning { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: var(--ambar-borde); }
.alerta--info { background: var(--azul-fondo); color: var(--azul-texto); border-color: #3B82F6; }
.acciones--centro { justify-content: center; }

.en-linea { display: inline; }
.lista-errores { margin: 0; padding-left: 1.1rem; color: var(--rojo-texto); font-weight: 600; }

/* ---------- Selector de modo de factura (Paso 2) ---------- */
.selector-modo-factura {
  display: flex;
  gap: .5rem;
  background: #F1F5F9;
  padding: .35rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.btn-modo-factura {
  flex: 1 1 auto;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: calc(var(--radio) - 2px);
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all .15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.btn-modo-factura:hover {
  color: var(--texto);
  background: rgba(255, 255, 255, .6);
}
.btn-modo-factura.activo {
  background: #FFFFFF;
  color: var(--texto);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--borde);
}
.pie-modo-factura {
  border-top: 1px solid var(--borde-suave);
  padding-top: .85rem;
  margin-top: 1.25rem;
}
.enlace-config-lector {
  background: none;
  border: 0;
  color: var(--texto-suave);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color .15s ease;
}
.enlace-config-lector:hover {
  color: var(--texto);
}

/* ---------- Switch de configuración en modal ---------- */
.tarjeta-opcion-config {
  padding: 1.15rem 1.25rem;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: #F8FAFC;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.tarjeta-opcion-config:hover {
  border-color: #94A3B8;
}
.tarjeta-opcion-config input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .2rem;
  flex: none;
  cursor: pointer;
}
.tarjeta-opcion-config label {
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
}
.d-block { display: block; }
.mt-05 { margin-top: .35rem; }

/* Resaltado del botón de registrar venta */
@keyframes pulso-exito {
  0% { transform: scale(1); box-shadow: var(--sombra-md); }
  50% { transform: scale(1.025); box-shadow: 0 0 0 6px rgba(234, 179, 8, .35); }
  100% { transform: scale(1); box-shadow: var(--sombra-md); }
}
.resaltar-registro {
  animation: pulso-exito .6s ease-in-out;
}
.caja-manual {
  background: #F8FAFC;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.15rem;
}