/* =====================================================================
   El Centro Eléctrico — Diseño. Para cambiar colores, edita :root.
   ===================================================================== */
:root {
  --tablero: #14181f;
  --tablero-2: #1f2530;
  --primario: #ffc400;
  --primario-texto: #1a1500;
  --fondo: #f1f2ee;
  --tarjeta: #ffffff;
  --texto: #1b1f27;
  --suave: #5e6673;
  --borde: #dcdfd8;
  --bien: #14804a;
  --mal: #c62f2f;
  --radio: 10px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.45 "Segoe UI", system-ui, Roboto, sans-serif; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 22px; }
h3 { font-size: 15px; }
button, input, select { font: inherit; color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.suave { color: var(--suave); font-size: 13px; }
.oculto { display: none !important; }

/* Marco general */
.marco { display: grid; grid-template-columns: 208px 1fr; height: 100dvh; }
.lateral { background: var(--tablero); color: #dfe3ea; display: flex; flex-direction: column; padding: 16px 10px; gap: 3px; }
.marca { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; }
.marca img { width: 34px; height: 34px; }
.marca b { display: block; color: #fff; font-size: 15px; line-height: 1.15; }
.nav { background: none; border: 0; border-left: 3px solid transparent; color: inherit; text-align: left; padding: 10px 12px; border-radius: 0 8px 8px 0; cursor: pointer; }
.nav:hover { background: var(--tablero-2); }
.nav.activo { background: var(--tablero-2); color: #fff; border-left-color: var(--primario); font-weight: 600; }
.pie-lateral { margin-top: auto; padding: 12px; font-size: 13px; border-top: 1px solid #333b48; }
.pie-lateral button { background: none; border: 0; color: var(--primario); padding: 4px 0 0; cursor: pointer; }
.contenido { overflow: auto; padding: 22px; min-width: 0; }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Controles */
.btn { background: var(--tarjeta); border: 1px solid var(--borde); padding: 9px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; min-height: 40px; }
.btn:hover { border-color: #aab0a6; }
.btn.prim { background: var(--primario); color: var(--primario-texto); border-color: #d9a700; }
.btn.prim:hover { background: #ffd23f; }
.btn.peligro { color: var(--mal); }
.btn.mini { padding: 3px 9px; min-height: 32px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input, select { width: 100%; padding: 9px 11px; border: 1px solid #c4c8c0; border-radius: 8px; background: #fff; min-height: 40px; }
input[type=checkbox] { width: 20px; min-height: 20px; }
:focus-visible { outline: 3px solid #e0a800; outline-offset: 1px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); }
label input, label select { margin-top: 3px; color: var(--texto); font-weight: 400; font-size: 15px; }
label.marcar { display: flex; align-items: center; gap: 8px; color: var(--texto); }
label.marcar input { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.todo { grid-column: 1 / -1; }

/* Tarjetas y tablas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.tabla-caja { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; background: #f8f8f5; }
th, td { padding: 9px 12px; border-bottom: 1px solid #ebede7; }
tr:last-child td { border-bottom: 0; }
td.der, th.der { text-align: right; }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #eceee8; }
.etiqueta.mal { background: #fbe5e5; color: var(--mal); }
.etiqueta.bien { background: #dff3e8; color: var(--bien); }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metrica b { display: block; font: 700 24px var(--mono); margin-top: 2px; }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.dos > div { min-width: 0; }
.dos h3 { margin-bottom: 8px; }

/* Vender */
.venta { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; height: calc(100dvh - 44px); }
.catalogo { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.buscador { font-size: 18px; min-height: 52px; border: 2px solid var(--tablero); }
.filtros { display: flex; gap: 6px; overflow-x: auto; flex: none; padding-bottom: 2px; }
.chip { border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 99px; padding: 5px 13px; cursor: pointer; white-space: nowrap; }
.chip.activo { background: var(--tablero); color: #fff; border-color: var(--tablero); }
.productos { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; align-content: start; }
.producto { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 11px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 5px; min-height: 112px; }
.producto:hover { border-color: var(--tablero); }
.producto:disabled { opacity: .55; cursor: not-allowed; }
.producto .nombre { font-weight: 600; line-height: 1.25; }
.producto .abajo { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 6px; }
.producto .precio { font: 700 16px var(--mono); }
.orden { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.orden-cab { padding: 12px; border-bottom: 1px solid var(--borde); }
.orden-lista { flex: 1; overflow: auto; }
.vacio { padding: 36px 16px; text-align: center; color: var(--suave); }
.renglon { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto 30px; gap: 7px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #ebede7; }
.renglon input { padding: 5px; min-height: 36px; text-align: right; font-family: var(--mono); }
.quitar { background: none; border: 0; color: var(--mal); font-size: 20px; cursor: pointer; min-height: 36px; }
.total-caja { background: var(--tablero); color: #fff; padding: 14px; }
.total-caja .fila { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.total-caja .grande { font: 700 31px var(--mono); color: var(--primario); }
.total-caja .acciones { display: grid; grid-template-columns: 1fr 2fr; }
.total-caja .btn { background: var(--tablero-2); color: #fff; border-color: #3a4351; }
.total-caja .btn.prim { background: var(--primario); color: var(--primario-texto); font-size: 17px; }
.barra-orden, #volverCatalogo, .nav.solo-tel { display: none; }
#volverCatalogo { margin-top: 8px; }
.tabla-caja { margin-top: 10px; }

/* Entrada */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--tablero); }
.acceso .tarjeta { width: min(400px, 100%); display: grid; gap: 13px; padding: 26px; border-top: 5px solid var(--primario); }
.acceso img { width: 52px; }

/* Ventanas y avisos */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(540px, calc(100vw - 24px)); max-height: 90dvh; color: inherit; }
dialog::backdrop { background: rgba(10, 13, 18, .6); }
.ventana { padding: 20px; display: grid; gap: 13px; }
.ventana-pie { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pagos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pagos .btn.activo { background: var(--tablero); color: #fff; }
.cifra { text-align: center; font: 700 36px var(--mono); }
#avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: calc(100vw - 32px); }
.aviso { background: var(--tablero); color: #fff; padding: 11px 15px; border-radius: 9px; border-left: 4px solid var(--primario); }
.aviso.mal { border-left-color: #ff6a6a; }
#impresion { display: none; }
#estadoNube { position: fixed; top: 8px; right: 12px; z-index: 40; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #fbe5e5; color: var(--mal); }
#estadoNube.bien { background: #dff3e8; color: var(--bien); }

/* Teléfono */
@media (max-width: 820px) {
  .marco { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lateral { order: 2; flex-direction: row; padding: 4px; overflow-x: auto; }
  .marca, .pie-lateral { display: none; }
  .nav { border-left: 0; border-top: 3px solid transparent; border-radius: 0; flex: 1 0 auto; text-align: center; padding: 10px; }
  .nav.activo { border-top-color: var(--primario); }
  .nav.solo-tel { display: block; color: var(--primario); }
  .contenido { padding: 14px 16px; }
  .venta { grid-template-columns: minmax(0, 1fr); height: auto; min-height: calc(100dvh - 90px); position: relative; }
  .orden { display: none; }
  .venta.ver-orden .orden { display: flex; min-height: calc(100dvh - 100px); }
  .venta.ver-orden .catalogo { display: none; }
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 66px; overflow: visible; }
  .barra-orden { display: flex; position: fixed; left: 16px; right: 16px; bottom: 66px; z-index: 5; justify-content: space-between; }
  .venta.ver-orden .barra-orden { display: none; }
  .venta.ver-orden #volverCatalogo { display: inline-block; }
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .pagos { grid-template-columns: repeat(2, 1fr); }
}

/* Ticket impreso */
@media print {
  @page { margin: 0; }
  body { background: #fff; }
  #app, #avisos, dialog { display: none !important; }
  #impresion { display: block; width: 72mm; padding: 2mm; font: 11px/1.3 var(--mono); color: #000; }
  #impresion.carta { width: auto; padding: 15mm; font-size: 13px; }
  #impresion h1 { font-size: 16px; text-align: center; }
  #impresion .centro { text-align: center; }
  #impresion .fila { display: flex; justify-content: space-between; gap: 8px; }
  #impresion hr { border: 0; border-top: 1px dashed #000; }
}

/* =====================================================================
   Acabado visual (v2). Va al final para ganarle a lo de arriba.
   ===================================================================== */
:root {
  --fondo: #eef0ec;
  --sombra: 0 1px 2px rgba(20, 24, 31, .06), 0 4px 14px rgba(20, 24, 31, .05);
  --radio: 12px;
}
body { -webkit-font-smoothing: antialiased; }
h2 { font-size: 24px; letter-spacing: -.01em; }
.tarjeta, .tabla-caja, .producto, .orden { box-shadow: var(--sombra); border-color: #e2e5df; }
.btn { transition: background .15s, border-color .15s, transform .05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* Menú lateral con íconos */
.lateral { background: linear-gradient(180deg, #151a22 0%, #10141a 100%); }
.marca span { display: block; font-size: 12px; color: #8f98a6; }
.nav { display: flex; align-items: center; gap: 11px; transition: background .15s; }
.nav::before {
  content: ''; width: 19px; height: 19px; flex: none; background: currentColor; opacity: .85;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.nav.activo::before { background: var(--primario); opacity: 1; }
.i-vender { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a1 1 0 0 0 1 .8h9.5a1 1 0 0 0 1-.8L21 7H6'/%3E%3C/svg%3E"); }
.i-caja { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12.5' r='2.5'/%3E%3Cpath d='M6 10h.01M18 15h.01'/%3E%3C/svg%3E"); }
.i-productos { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.i-clientes { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14a6 6 0 0 1 3 6'/%3E%3C/svg%3E"); }
.i-cotizaciones { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.i-reportes { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 6-7'/%3E%3C/svg%3E"); }
.i-ajustes { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.i-salir { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }

/* Productos: franja del color de su categoría */
.producto { position: relative; overflow: hidden; padding-top: 14px; transition: border-color .15s, transform .1s, box-shadow .15s; }
.producto::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--cat, var(--primario)); }
.producto:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 24, 31, .10); }
.producto .categoria { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cat, var(--suave)); }
.buscador { border-radius: 12px; box-shadow: var(--sombra); }
.chip { transition: background .15s; }

/* Métricas con acento */
.metrica { border-left: 4px solid var(--primario); }
.metrica b { font-size: 26px; }

/* Entrada: lema y formulario lado a lado */
.acceso {
  grid-template-columns: minmax(0, 420px) minmax(0, 400px); gap: 56px; justify-content: center; align-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 196, 0, .16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 196, 0, .08), transparent 45%), var(--tablero);
}
.acceso-lema { color: #e6e9ee; }
.acceso-lema img { width: 64px; margin-bottom: 18px; }
.acceso-lema h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.acceso-lema p { color: #a7b0bd; font-size: 17px; margin-top: 12px; }
.acceso .tarjeta { border-top: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }

@media (max-width: 820px) {
  .nav { flex-direction: column; gap: 3px; font-size: 11px; padding: 7px 8px; }
  .nav::before { width: 21px; height: 21px; }
  .acceso { grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; padding-top: 40px; }
  .acceso-lema h1 { font-size: 30px; }
  .acceso-lema img { width: 48px; margin-bottom: 10px; }
}
@media (max-width: 820px) {
  /* En celular el aviso de la nube va arriba, en su propio renglón */
  .contenido { padding-top: 36px; }
  #estadoNube { top: 8px; right: 16px; }
}