:root {
  --acero: #2E3A46; --galvanizado: #D7DCE0; --papel: #FBFAF6; --fondo: #EEF0F2;
  --amarillo: #F2C230; --rojo: #B3261E; --verde: #2F7D4F; --gris: #5B6772;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--acero); font-family: "Barlow", system-ui, sans-serif; font-size: 16px; }

/* Encabezado y menú */
header {
  background: var(--acero); color: #fff; padding: 0 24px; border-bottom: 6px solid var(--amarillo);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
}
header h1 { margin: 0; padding: 14px 0; font-family: "Barlow Condensed", sans-serif; font-size: 28px; letter-spacing: .5px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: #C9D1D8; text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 4px 4px 0 0; }
nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
nav a.activo { color: var(--acero); background: var(--amarillo); }
nav a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* Distribución */
main { display: grid; grid-template-columns: 1fr 440px; gap: 24px; max-width: 1240px; margin: 24px auto; padding: 0 24px; }
main.una-columna { grid-template-columns: 1fr; max-width: 1000px; }
@media (max-width: 950px) { main { grid-template-columns: 1fr; } }

section.panel { background: #fff; border: 1px solid var(--galvanizado); border-radius: 6px; padding: 20px; }
section.panel + section.panel { margin-top: 0; }
h2 { font-family: "Barlow Condensed", sans-serif; font-size: 22px; margin: 0 0 14px; }
p { line-height: 1.5; }

/* Formularios */
label { display: block; font-weight: 600; margin-bottom: 6px; }
select, input { width: 100%; padding: 10px 12px; font: inherit; color: inherit; border: 1px solid #B9C1C8; border-radius: 4px; background: #fff; }
select:focus, input:focus, button:focus-visible, a.boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.fila { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 600px) { .fila { grid-template-columns: 1fr; } }
.filtro { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

button, a.boton { font: inherit; font-weight: 600; cursor: pointer; border: none; border-radius: 4px; padding: 10px 18px; text-decoration: none; display: inline-block; }
.btn-oscuro { background: var(--acero); color: #fff; }
.btn-oscuro:hover { background: #1F2830; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--acero); padding: 8px 6px; white-space: nowrap; }
td { padding: 9px 6px; border-bottom: 1px solid #E3E7EA; vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
td small { color: var(--gris); }
tfoot td { border-bottom: none; border-top: 2px solid var(--acero); font-weight: 600; }
.tabla-scroll { overflow-x: auto; }
a.ver { color: var(--acero); font-weight: 600; }
.vacio { text-align: center; color: #7A8690; padding: 24px 0; }

/* Resumen del historial */
.resumen { display: flex; gap: 40px; flex-wrap: wrap; margin: 4px 0 20px; }
.resumen div { font-size: 15px; color: var(--gris); }
.resumen strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 34px; color: var(--acero); line-height: 1.1; }

/* Datos de una venta */
.datos-venta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; margin-bottom: 20px; }
@media (max-width: 700px) { .datos-venta { grid-template-columns: 1fr 1fr; } }
.datos-venta div { font-size: 14px; color: var(--gris); }
.datos-venta strong { display: block; font-size: 17px; color: var(--acero); }

/* Buscador de productos */
.resultados { list-style: none; margin: 8px 0 0; padding: 0; max-height: 340px; overflow-y: auto; border: 1px solid var(--galvanizado); border-radius: 4px; }
.resultados li { border-bottom: 1px solid #E6E9EC; }
.resultados li:last-child { border-bottom: none; }
.resultados button { width: 100%; text-align: left; background: #fff; padding: 10px 12px; border-radius: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-weight: 400; }
.resultados button:hover { background: #F5F6F7; }
.resultados button.elegido { background: #FDF3D0; box-shadow: inset 4px 0 0 var(--amarillo); }
.resultados button:disabled { color: #9AA3AB; cursor: not-allowed; }
.r-nombre, .r-precio { font-weight: 600; }
.r-precio, .r-stock { text-align: right; }
.r-meta, .r-stock { font-size: 14px; color: var(--gris); }
.sin-resultados { padding: 16px 12px; color: var(--gris); }
.agregar { display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; align-items: end; margin-top: 16px; }
.seleccionado { padding: 10px 12px; border: 1px dashed #B9C1C8; border-radius: 4px; min-height: 44px; color: var(--gris); }
.seleccionado.listo { color: var(--acero); border-style: solid; font-weight: 600; }

/* Nota de venta */
.nota { background: var(--papel); border: 1px solid var(--galvanizado); border-top: 6px dashed var(--galvanizado); border-radius: 6px; padding: 20px; position: sticky; top: 24px; align-self: start; }
.nota .partes { font-size: 14px; margin-bottom: 12px; line-height: 1.6; }
.nota td { border-bottom: 1px dashed #C9CFD4; }
.quitar { background: none; color: var(--rojo); padding: 0 4px; font-size: 20px; line-height: 1; }
.desglose { margin: 16px 0 0; font-size: 15px; }
.desglose div { display: flex; justify-content: space-between; padding: 3px 0; }
.desglose dt { color: var(--gris); }
.desglose dd { margin: 0; font-weight: 600; }
.nota .total { border-top: 2px solid var(--acero); padding-top: 8px; margin-top: 8px; }
tfoot tr.sub td { border-top: none; font-weight: 400; color: var(--gris); padding-top: 4px; padding-bottom: 4px; }
tfoot tr.sub:first-child td { border-top: 2px solid var(--acero); padding-top: 10px; }
tfoot tr.sub td.num { color: var(--acero); font-weight: 600; }
tfoot tr.gran-total td { border-top: 1px solid var(--acero); font-size: 18px; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; font-family: "Barlow Condensed", sans-serif; }
.total span:first-child { font-size: 22px; }
.total span:last-child { font-size: 38px; font-weight: 700; }
.btn-registrar { width: 100%; margin-top: 16px; background: var(--amarillo); color: var(--acero); font-size: 18px; padding: 14px; }
.btn-registrar:hover { background: #E0B11F; }
.btn-registrar:disabled { opacity: .5; cursor: not-allowed; }
.mensaje { margin-top: 12px; padding: 10px 12px; border-radius: 4px; display: none; }
.mensaje.ok { display: block; background: #E3F2E8; color: var(--verde); }
.mensaje.ok a { color: var(--verde); font-weight: 600; }
.mensaje.error { display: block; background: #F9E3E1; color: var(--rojo); }
.aviso { border-left: 6px solid var(--amarillo); }

/* ============ Administración ============ */
header.admin { border-bottom-color: var(--rojo); }
main.ancha { max-width: 1240px; }
main.una-columna { display: flex; flex-direction: column; gap: 24px; }
main.una-columna > .mensaje { margin: 0; }

.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.campos .ancho { grid-column: 1 / -1; }
@media (max-width: 700px) { .campos { grid-template-columns: 1fr; } }
.ayuda { display: block; margin-top: 4px; color: var(--gris); font-size: 14px; min-height: 18px; }


.titulo-inventario { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.titulo-inventario h2 { margin: 0; }
.titulo-inventario h2 small { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 400; color: var(--gris); margin-left: 6px; }
.titulo-inventario input { max-width: 380px; }

table.inventario thead th { background: var(--acero); color: #fff; border-bottom: none; }
table.inventario thead th:first-child { border-radius: 4px 0 0 0; }
table.inventario thead th:last-child { border-radius: 0 4px 0 0; }
table.inventario td { vertical-align: middle; }
td.alerta, span.alerta { color: var(--rojo); font-weight: 600; }
td.poco { color: #9A6A00; font-weight: 600; }
td.acciones { white-space: nowrap; }
td.acciones form { display: inline; }
.btn-chico { padding: 6px 12px; font-size: 14px; background: #E6E9EC; color: var(--acero); }
.btn-chico:hover { background: #D7DCE0; }
.btn-peligro { background: #F9E3E1; color: var(--rojo); }
.btn-peligro:hover { background: #F2CBC7; }
.btn-secundario { background: #E6E9EC; color: var(--acero); text-align: center; padding: 14px; font-size: 18px; margin-top: 16px; }
.botones { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }

/* Login */
body.pantalla-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--acero) repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.03) 22px 44px); }
form.login { width: 100%; max-width: 400px; background: #fff; border-radius: 8px; padding: 32px; border-top: 8px solid var(--amarillo); }
.login-marca { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); text-align: center; }
form.login h1 { font-family: "Barlow Condensed", sans-serif; font-size: 32px; text-align: center; margin: 4px 0 20px; }
form.login label { margin-top: 14px; }
form.login .mensaje { margin-bottom: 8px; }
.volver { display: block; text-align: center; margin-top: 16px; color: var(--gris); }

/* ============ Proveedor, costo y ganancia ============ */
.subtitulo { font-family: "Barlow Condensed", sans-serif; font-size: 18px; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid #E3E7EA; color: var(--gris); text-transform: uppercase; letter-spacing: .5px; }
form > .subtitulo:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.campos .doble { grid-column: span 2; }
@media (max-width: 700px) { .campos .doble { grid-column: auto; } }
.nota-costo { background: #FDF3D0; border-left: 4px solid var(--amarillo); padding: 10px 12px; border-radius: 4px; margin: 0 0 14px; font-size: 15px; }

input[type="range"] { padding: 0; border: none; accent-color: var(--acero); height: 44px; }
input[type="range"]:focus { outline-offset: 4px; }
label output { color: var(--acero); font-weight: 700; }
.escala { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris); margin-top: -8px; }

.proveedor-nuevo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; background: #F5F6F7; border: 1px dashed #B9C1C8; border-radius: 6px; padding: 14px; }
.proveedor-nuevo[hidden] { display: none; }
@media (max-width: 700px) { .proveedor-nuevo { grid-template-columns: 1fr; } }

.calculado { background: #F5F6F7; border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.calculado span { font-size: 14px; color: var(--gris); font-weight: 600; }
.calculado strong { font-family: "Barlow Condensed", sans-serif; font-size: 28px; line-height: 1.1; }
.calculado small { font-size: 13px; color: var(--gris); }
.calculado.destacado { background: var(--acero); color: #fff; }
.calculado.destacado span, .calculado.destacado small { color: #C9D1D8; }
.calculado.destacado strong { color: var(--amarillo); }
.tenue { color: #9AA3AB; }

/* ============ Catálogos, descripción, unidad y ganancia 10–100% ============ */
textarea { width: 100%; padding: 10px 12px; font: inherit; color: inherit; border: 1px solid #B9C1C8; border-radius: 4px; background: #fff; resize: vertical; }
textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.opcional { font-weight: 400; color: var(--gris); font-size: 14px; }

.con-boton { display: flex; gap: 8px; }
.con-boton select { flex: 1; min-width: 0; }
.btn-agregar-cat { flex: none; padding: 10px 12px; background: #FDF3D0; color: var(--acero); border: 1px solid #E8C860; font-size: 14px; white-space: nowrap; }
.btn-agregar-cat:hover { background: var(--amarillo); }

.con-unidad { display: flex; flex-direction: column; gap: 8px; }
.selector-unidad { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #B9C1C8; border-radius: 4px; overflow: hidden; }
.selector-unidad label { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-weight: 500; font-size: 14px; cursor: pointer; background: #fff; }
.selector-unidad label + label { border-left: 1px solid #B9C1C8; }
.selector-unidad input { width: auto; accent-color: var(--acero); }
.selector-unidad label:has(input:checked) { background: var(--acero); color: #fff; }
.selector-unidad label:focus-within { outline: 3px solid var(--amarillo); outline-offset: -3px; }

.ganancia { display: flex; align-items: center; gap: 10px; }
.ganancia input[type="range"] { flex: 1; min-width: 0; }
.porcentaje { display: flex; align-items: center; gap: 4px; flex: none; }
.porcentaje input { width: 78px; text-align: right; }
.porcentaje span { font-weight: 700; }

.info { display: inline-block; margin-left: 6px; color: var(--gris); cursor: help; font-size: 14px; }

dialog.dialogo { border: none; border-radius: 8px; padding: 24px; width: min(420px, calc(100vw - 32px)); border-top: 6px solid var(--amarillo); color: var(--acero); }
dialog.dialogo::backdrop { background: rgba(46, 58, 70, .55); }
dialog.dialogo h3 { font-family: "Barlow Condensed", sans-serif; font-size: 24px; margin: 0 0 14px; }
dialog.dialogo .mensaje { margin: 10px 0 0; }
.botones-dialogo { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ============ Costo final con IVA incluido ============ */
.calculado-final { display: grid; grid-template-columns: 2fr 1fr; gap: 4px 24px; align-items: end; background: var(--acero); color: #fff; border-radius: 6px; padding: 16px 18px; }
.calculado-final span { display: block; font-size: 14px; color: #C9D1D8; font-weight: 600; }
.calculado-final span small { font-weight: 400; }
.calculado-final strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 38px; line-height: 1.05; color: var(--amarillo); }
.calculado-final .sin-iva { text-align: right; border-left: 1px solid rgba(255,255,255,.18); padding-left: 18px; }
.calculado-final .sin-iva strong { font-size: 26px; color: #fff; }
.calculado-final .formula { grid-column: 1 / -1; color: #9FAAB4; font-size: 13px; margin-top: 6px; }
@media (max-width: 600px) { .calculado-final { grid-template-columns: 1fr; } .calculado-final .sin-iva { text-align: left; border-left: none; padding-left: 0; } }
.nota td small, table td.num small { font-weight: 400; color: var(--gris); }

/* Cantidad editable en la nota de venta */
.cant-linea { width: 76px; padding: 4px 6px; text-align: right; font-size: 15px; }
.nota td.num small { display: block; }

/* ============ Unidad, ganancia con decimales y costo final a mano ============ */
.porcentaje input.fuera { border-color: var(--rojo); color: var(--rojo); }
.porcentaje input[readonly] { background: #F1F3F4; }
input[type="range"]:disabled { opacity: .4; }
.precio-manual { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.precio-manual .signo { font-family: "Barlow Condensed", sans-serif; font-size: 34px; color: var(--amarillo); font-weight: 700; }
.precio-manual input { max-width: 200px; font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 700; padding: 4px 10px; color: var(--acero); }
.calculado-final .interruptor { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; }
.calculado-final .interruptor input { width: 18px; height: 18px; accent-color: var(--amarillo); }
.casilla-dialogo { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 12px; }
.casilla-dialogo input { width: auto; }
#dlgExtraUnidad label:first-child { margin-top: 12px; }

/* ============ Venta por partes ============ */
.fraccion { border: 1px dashed #B9C1C8; border-radius: 6px; padding: 12px 14px; background: #FAFBFB; }
.interruptor-claro { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; flex-wrap: wrap; }
.interruptor-claro input { width: 18px; height: 18px; accent-color: var(--acero); }
.fraccion-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
.fraccion-campos[hidden] { display: none; }
@media (max-width: 800px) { .fraccion-campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .fraccion-campos { grid-template-columns: 1fr; } }
.fraccion-resumen { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--gris); }
.fraccion-resumen:empty { display: none; }
.etiqueta-partes { display: inline-block; font-size: 12px; font-weight: 600; background: #FDF3D0; color: #7A5A00; border-radius: 3px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.modo-venta { display: flex; gap: 0; border: 1px solid #B9C1C8; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.modo-venta[hidden] { display: none; }
.modo-venta label { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; font-weight: 500; font-size: 15px; cursor: pointer; background: #fff; text-align: center; }
.modo-venta label + label { border-left: 1px solid #B9C1C8; }
.modo-venta input { width: auto; accent-color: var(--acero); }
.modo-venta label:has(input:checked) { background: var(--acero); color: #fff; }
.modo-venta label:focus-within { outline: 3px solid var(--amarillo); outline-offset: -3px; }
.por-partes { color: #7A5A00 !important; }

/* ============ Sesión, roles y catálogos ============ */
header .sesion { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 8px 0; }
header .sesion span { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
header .sesion small { color: #C9D1D8; font-size: 13px; }
header .sesion a { color: #fff; font-weight: 600; text-decoration: none; padding: 7px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; }
header .sesion a:hover { background: rgba(255,255,255,.1); }
header .sesion a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
header nav { flex-wrap: wrap; }
@media (max-width: 900px) { header .sesion { margin-left: 0; width: 100%; justify-content: space-between; } header .sesion span { text-align: left; } }

.dato-fijo { padding: 10px 12px; border: 1px solid var(--galvanizado); border-radius: 4px; background: #F5F6F7; font-weight: 600; min-height: 44px; }

.form-linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; }
.form-linea .doble { grid-column: span 2; }
.botones-linea { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 760px) { .form-linea { grid-template-columns: 1fr; } .form-linea .doble { grid-column: auto; } .botones-linea { justify-content: stretch; } .botones-linea > * { flex: 1; text-align: center; } }
.permisos { margin-top: 14px; line-height: 1.5; }
.filtro-tabla { max-width: 300px; }

tr.inactivo td { color: #8A949C; background: #FAFAFA; }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; background: #E6E9EC; color: var(--acero); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.etiqueta.baja { background: #F9E3E1; color: var(--rojo); }

.filtro-fechas { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filtro-fechas > div:not(.atajos) { min-width: 160px; }
.atajos { display: flex; gap: 6px; margin-left: auto; }
.atajos a { padding: 8px 12px; border-radius: 4px; border: 1px solid #B9C1C8; color: var(--acero); text-decoration: none; font-weight: 600; font-size: 14px; }
.atajos a:hover { background: #F1F3F4; }
.atajos a.activo { background: var(--acero); color: #fff; border-color: var(--acero); }
@media (max-width: 700px) { .atajos { margin-left: 0; } }
tr.fila-elegida td { background: #FDF3D0; }

/* ============ Cotizaciones ============ */
.fila .doble-fila { grid-column: span 2; }
@media (max-width: 600px) { .fila .doble-fila { grid-column: auto; } }
.lista-cotizaciones { grid-column: 1 / -1; }
.nota .mensaje a { font-weight: 600; }

/* ============ Cotización de mayoreo ============ */
.caja-mayoreo { grid-column: auto; }
#rfc { letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.caja-mayoreo .porcentaje { justify-content: flex-start; }
.caja-mayoreo .porcentaje input { width: 110px; text-align: right; font-weight: 600; }
@media (max-width: 600px) { .caja-mayoreo { grid-column: auto; } }
.precios-mayoreo { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 13px; color: var(--gris); }
.precios-mayoreo b { color: var(--acero); font-weight: 600; }
.interno { color: #8A5A00 !important; }
.nota .gan-linea { width: 76px; padding: 4px 6px; text-align: right; font-size: 14px; margin-top: 6px; }
.comparacion { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #C9CFD4; font-size: 14px; }
.porcentaje input.fuera { border-color: var(--rojo); color: var(--rojo); }

/* ---------- Filtros: inventario (categoría / sin costo) y categoría en cotizaciones */
.filtros-inventario { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtros-inventario input[type="search"] { width: 260px; }
.filtros-inventario select { width: auto; min-width: 190px; }
.check-filtro { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; white-space: nowrap; cursor: pointer; }
.check-filtro input { width: auto; margin: 0; }
.check-filtro .contador { background: #c0392b; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.buscador-categoria { display: grid; grid-template-columns: 1fr 220px; gap: 12px; align-items: end; }
@media (max-width: 640px) { .buscador-categoria { grid-template-columns: 1fr; } .filtros-inventario input[type="search"] { width: 100%; } }

/* Botón Eliminar (borra el producto para siempre) */
.btn-eliminar { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-eliminar:hover { background: #a93226; }

/* ---------- Venta libre */
.check-libre { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: #fff8e1; border: 1px dashed #e0b84a; border-radius: 8px; font-weight: 600; cursor: pointer; }
.check-libre input { width: auto; margin: 0; transform: scale(1.25); }
.check-libre small { font-weight: 400; color: var(--gris); }
.agregar.libre { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.agregar.libre > div { flex: 0 0 auto; width: 120px; }
.agregar.libre > .campo-ancho { flex: 1 1 260px; width: auto; }
.agregar.libre .dato-fijo { margin: 0; }
.etiqueta-libre { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #fdebb0; color: #7a5b00; font-size: 11px; font-weight: 700; letter-spacing: .3px; }

.agregar.libre[hidden], #bloqueNormal[hidden] { display: none; }
.devuelto { color: #c0392b; font-weight: 600; }
.acciones-venta { margin: 0 0 12px; }

/* ---------- Devoluciones */
.panel.exito { border-left: 6px solid var(--verde); background: #F1F9F4; }
.panel.exito .botones { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.tabla-devolucion td, .tabla-devolucion th { vertical-align: middle; }
.tabla-devolucion tr.ya-devuelto td { color: #8a949c; background: #fafbfb; }
.celda-devolver { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.celda-devolver input { width: 92px; text-align: right; }
.celda-devolver input.mal { border-color: #c0392b; background: #fdecea; }
.check-danado { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; white-space: nowrap; cursor: pointer; }
.check-danado input { width: auto; margin: 0; }
.importe-dev { min-width: 100px; }
.fila-devolucion { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; margin-top: 16px; }
.fila-devolucion .btn-registrar { margin: 0; }
@media (max-width: 760px) { .fila-devolucion { grid-template-columns: 1fr; } }

/* ---------- Exportar / Importar productos ---------- */
.botones-excel { display: flex; gap: 8px; flex-wrap: wrap; }
main.una-columna.ancha { max-width: 1100px; }
.resumen .verde { color: var(--verde); }
.resumen .rojo { color: var(--rojo); }
.lista-resumen { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }
.lista-resumen .alerta { color: var(--rojo); font-weight: 600; }
.botones-resumen { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
input[type=file] { padding: 8px; background: #fff; border: 1px solid #c9c9c9; border-radius: 4px; max-width: 100%; }

/* ---------- Ganancia e inversión ---------- */
td .verde { color: var(--verde); }
td .rojo { color: var(--rojo); }
.resumen small { font-size: 12px; color: #9AA3AB; }

/* ---------- Recuperar contraseña ---------- */
.login-olvide { text-align: center; margin: 16px 0 0; font-size: 15px; }
.login-olvide a { color: var(--gris); text-decoration: underline; }
.login-olvide a:hover { color: var(--acero); }
form.login .ayuda { margin: 0 0 8px; font-size: 14px; color: var(--gris); line-height: 1.5; }
input.codigo { font-family: "Barlow Condensed", sans-serif; font-size: 34px; letter-spacing: 10px; text-align: center; }
.aviso-prueba { background: #FFF4D1; border: 2px dashed #C99700; border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #5a4500; }
.aviso-prueba strong.codigo-prueba { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 34px; letter-spacing: 8px; text-align: center; color: var(--acero); margin-top: 4px; }
.enlace-suave { background: none; border: 0; color: var(--gris); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; padding: 0; }
.sin-correo { color: var(--rojo); font-weight: 600; }
header .sesion a.mi-correo { border-color: transparent; font-weight: 500; text-decoration: underline; padding: 7px 6px; }

/* Botón de imprimir ticket (debajo de «Registrar venta») */
.btn-imprimir { width: 100%; margin-top: 10px; padding: 12px; font-size: 16px; }

/* ===== Planes, acceso y pagos ===== */
.caja { width: 100%; max-width: 440px; background: #fff; border-radius: 8px; padding: 32px; border-top: 8px solid var(--amarillo); }
.caja.ancha { max-width: 860px; }
.caja h1 { font-family: "Barlow Condensed", sans-serif; font-size: 32px; text-align: center; margin: 4px 0 6px; }
.caja label { margin-top: 14px; }
.caja-sub { text-align: center; color: var(--gris); margin: 0 0 20px; }
.atras { display: inline-block; color: var(--gris); font-size: 15px; text-decoration: none; margin-bottom: 8px; }
.atras:hover { color: var(--acero); text-decoration: underline; }
.ayuda-campo { display: block; color: var(--gris); font-size: 14px; margin-top: 4px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dos-columnas { grid-template-columns: 1fr; } .caja { padding: 24px 18px; } }
.plan-elegido { background: #FDF3D0; border-left: 4px solid var(--amarillo); padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; font-size: 15px; }
.plan-elegido a { margin-left: 8px; color: var(--acero); }

.opcion { display: flex; align-items: center; gap: 16px; padding: 16px; margin-top: 12px; border: 2px solid var(--galvanizado); border-radius: 8px; text-decoration: none; color: var(--acero); background: #fff; }
.opcion:hover, .opcion:focus-visible { border-color: var(--acero); outline: none; background: var(--papel); }
.opcion-icono { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.opcion-icono.oscuro { background: var(--acero); color: #fff; }
.opcion-icono.amarillo { background: var(--amarillo); color: var(--acero); }
.opcion-texto { flex: 1; }
.opcion-texto strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 22px; }
.opcion-texto span { color: var(--gris); font-size: 15px; }
.opcion-flecha { font-size: 24px; color: var(--gris); }
.soporte { text-align: center; margin: 20px 0 0; font-size: 15px; color: var(--gris); }
.soporte a, .wa-soporte { color: var(--verde); font-weight: 600; }

.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .planes { grid-template-columns: 1fr; } }
.plan { border: 2px solid var(--galvanizado); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; position: relative; }
.plan.destacado { border-color: var(--amarillo); box-shadow: 0 0 0 2px var(--amarillo); }
.plan-cabeza { display: flex; justify-content: space-between; align-items: center; }
.plan h2 { font-family: "Barlow Condensed", sans-serif; font-size: 28px; margin: 0; }
.etiqueta-plan { background: var(--amarillo); color: var(--acero); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.plan-precio { color: var(--gris); margin: 4px 0 8px; }
.plan-precio span { font-family: "Barlow Condensed", sans-serif; font-size: 40px; font-weight: 700; color: var(--acero); }
.plan-desc { color: var(--gris); margin: 0 0 12px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan li { padding: 5px 0 5px 26px; position: relative; }
.plan li.si::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.plan li.no { color: var(--gris); }
.plan li.no::before { content: "✕"; position: absolute; left: 0; color: var(--rojo); }
.btn-plan { text-align: center; background: var(--acero); color: #fff; }
.btn-plan.amarillo { background: var(--amarillo); color: var(--acero); }
.btn-plan.inactivo { background: var(--galvanizado); color: var(--gris); cursor: default; }

.btn-amarillo { background: var(--amarillo); color: var(--acero); }
.btn-amarillo:hover { background: #E0B11F; }
.btn-secundario-linea { background: none; border: 2px solid var(--acero); color: var(--acero); }
.tag-pro { background: var(--amarillo); color: var(--acero); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 4px; text-transform: uppercase; }

.banner-plan { background: #FDF3D0; border-bottom: 1px solid var(--amarillo); padding: 8px 24px; font-size: 15px; text-align: center; }
.banner-plan.alerta { background: #F9E3E1; border-color: var(--rojo); color: var(--rojo); }
.banner-plan a { color: inherit; font-weight: 600; }

.plan-estado { font-size: 18px; padding: 10px 14px; border-radius: 4px; margin: 0 0 12px; }
.plan-estado.pro { background: #E3F2E8; color: var(--verde); }
.plan-estado.gratis { background: var(--papel); border: 1px solid var(--galvanizado); }
.cobro { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.cobro .precio { font-family: "Barlow Condensed", sans-serif; font-size: 44px; font-weight: 700; }
.cobro .de { color: var(--gris); }
.metodos { list-style: none; margin: 0; padding: 0; color: var(--gris); }
.metodos li::before { content: "• "; color: var(--amarillo); font-weight: 700; }
.nota-pago { color: var(--gris); font-size: 14px; line-height: 1.5; }
.resultado-pago { text-align: center; }
.resultado-pago .icono { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--galvanizado); }
.resultado-pago .icono.ok { background: var(--verde); color: #fff; }
.resultado-pago .icono.espera { background: var(--amarillo); }