/* =========================================================
   Estilos de la aplicación. Negro + dorado, limpio y claro.
   Cambiar colores: editar las variables de :root.
   ========================================================= */
:root {
  --fondo: #f5f4f0;
  --tarjeta: #ffffff;
  --tinta: #18171c;
  --suave: #67645c;
  --linea: #e6e2d8;
  --oro: #b98f2c;
  --oro-claro: #f6edd6;
  --ok: #1d7a4b;
  --ok-claro: #e3f3ea;
  --alerta: #a35c00;
  --alerta-claro: #fdf0dc;
  --mal: #b3261e;
  --mal-claro: #fbe6e4;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
  --lateral: 232px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
.num, .monto { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }
.oculto { display: none !important; }
.derecha { text-align: right; }
.fila { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.pila > * + * { margin-top: 1rem; }
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* ---------- Estructura ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); background: var(--tinta); color: #eae7df;
  padding: 1.1rem .75rem; display: flex; flex-direction: column; gap: .15rem; overflow-y: auto; z-index: 20;
}
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; padding: .25rem .6rem 1rem; color: #fff; text-decoration: none; }
.marca .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--oro); color: var(--tinta); display: grid; place-items: center; font-weight: 800; }
.lateral a.item { display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; border-radius: 10px; text-decoration: none; color: #cfcbc0; font-size: .95rem; }
.lateral a.item:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral a.item.activo { background: rgba(185,143,44,.18); color: #f3d998; }
.lateral .pie { margin-top: auto; padding: .75rem .6rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #a9a59a; }
.lateral .pie a { color: #d8d4c8; }
.contenido { margin-left: var(--lateral); min-height: 100vh; }
.barra {
  position: sticky; top: 0; z-index: 10; background: rgba(245,244,240,.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; border-bottom: 1px solid var(--linea);
}
.buscador { flex: 1; max-width: 520px; position: relative; }
.buscador input[type=search] { width: 100%; padding: .6rem .9rem .6rem 2.4rem; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font-size: .95rem; }
.buscador .icono { position: absolute; left: .8rem; top: .62rem; color: var(--suave); }
.barra .usuario { margin-left: auto; font-size: .9rem; color: var(--suave); white-space: nowrap; }
.campana { position: relative; display: inline-flex; padding: .35rem; border-radius: 10px; text-decoration: none; }
.campana .globo { position: absolute; top: -2px; right: -4px; background: var(--mal); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 0 .38rem; }
main { padding: 1.5rem; max-width: 1180px; }
.inferior { display: none; }

/* ---------- Tarjetas y bloques ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.15rem 1.25rem; box-shadow: var(--sombra); }
.tarjeta + .tarjeta, .seccion { margin-top: 1.25rem; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.encabezado p { margin: .15rem 0 0; color: var(--suave); }
.titulo-seccion { display: flex; justify-content: space-between; align-items: baseline; margin: 1.6rem 0 .6rem; }
.titulo-seccion h2 { margin: 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.titulo-seccion a { font-size: .9rem; color: var(--oro); font-weight: 600; text-decoration: none; }

/* ---------- Números grandes (resumen) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.kpi { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); text-decoration: none; display: block; }
.kpi .etiqueta { font-size: .82rem; color: var(--suave); }
.kpi .valor { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .15rem; letter-spacing: -.01em; }
.kpi.principal { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.kpi.principal .etiqueta { color: #cfc9b8; }
.kpi.oro .valor { color: var(--oro); }
.kpi.ok .valor { color: var(--ok); }
.kpi.mal .valor { color: var(--mal); }
.progreso { height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; margin-top: .6rem; }
.progreso > span { display: block; height: 100%; background: var(--oro); border-radius: 99px; }
.kpi.principal .progreso { background: rgba(255,255,255,.15); }

/* ---------- Listas ---------- */
.lista { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.lista > .renglon, .lista > a.renglon { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; text-decoration: none; border-top: 1px solid var(--linea); }
.lista > :first-child { border-top: 0; }
.lista > a.renglon:hover { background: #faf9f6; }
.renglon .principal { flex: 1; min-width: 0; }
.renglon .nombre { font-weight: 600; }
.renglon .detalle { font-size: .85rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renglon .monto { font-weight: 700; text-align: right; white-space: nowrap; }
.renglon .chevron { color: #b8b3a6; }
.vacio { padding: 1.4rem; text-align: center; color: var(--suave); }

/* ---------- Estados ---------- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #efede7; color: var(--suave); white-space: nowrap; }
.chip.ok { background: var(--ok-claro); color: var(--ok); }
.chip.alerta { background: var(--alerta-claro); color: var(--alerta); }
.chip.mal { background: var(--mal-claro); color: var(--mal); }
.chip.oro { background: var(--oro-claro); color: #7a5c12; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: #cfcabd; display: inline-block; flex: none; }
.punto.ok { background: var(--ok); } .punto.mal { background: var(--mal); } .punto.alerta { background: #e0a030; }

/* ---------- Atención ---------- */
.atencion { display: grid; gap: .5rem; }
.aviso { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; border-radius: 12px; text-decoration: none; background: var(--tarjeta); border: 1px solid var(--linea); }
.aviso .n { min-width: 2rem; height: 2rem; border-radius: 9px; display: grid; place-items: center; font-weight: 700; background: var(--alerta-claro); color: var(--alerta); padding: 0 .4rem; }
.aviso.alto .n { background: var(--mal-claro); color: var(--mal); }
.aviso.bajo .n { background: var(--ok-claro); color: var(--ok); }
.todo-bien { padding: .9rem 1rem; border-radius: 12px; background: var(--ok-claro); color: var(--ok); font-weight: 600; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.05rem; border-radius: 11px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: #cfc9ba; }
.btn.primario { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn.oro { background: var(--oro); color: #1b1608; border-color: var(--oro); }
.btn.peligro { color: var(--mal); }
.btn.peligro.lleno { background: var(--mal); color: #fff; border-color: var(--mal); }
.btn.exito { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn.chico { padding: .35rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn.bloque { width: 100%; }
.acciones-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.acciones-rapidas .btn { justify-content: flex-start; padding: .85rem 1rem; }

/* ---------- Formularios ---------- */
form.formulario { max-width: 640px; }
.campo { margin-bottom: 1rem; }
.campo label, .etiqueta-campo { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.campo .ayuda { font-size: .82rem; color: var(--suave); margin-top: .3rem; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d9d4c8; border-radius: 11px; background: #fff; font: inherit; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(185,143,44,.28); border-color: var(--oro); }
input.grande { font-size: 1.6rem; font-weight: 700; padding: .8rem 1rem; font-variant-numeric: tabular-nums; }
textarea { min-height: 84px; resize: vertical; }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones label { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid #d9d4c8; border-radius: 10px; cursor: pointer; font-weight: 500; background: #fff; }
.opciones input { accent-color: var(--oro); }
.opciones label:has(input:checked) { border-color: var(--oro); background: var(--oro-claro); }
.mensajes { margin-bottom: 1rem; display: grid; gap: .5rem; }
.mensaje { padding: .8rem 1rem; border-radius: 12px; background: var(--ok-claro); color: var(--ok); font-weight: 500; }
.mensaje.error { background: var(--mal-claro); color: var(--mal); }
.mensaje.info { background: var(--oro-claro); color: #6b5010; }

/* Filtros plegables */
details.filtro { margin-bottom: 1rem; }
details.filtro > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 10px; border: 1px solid var(--linea); background: #fff; font-weight: 600; font-size: .9rem; }
details.filtro > summary::-webkit-details-marker { display: none; }
details.filtro[open] > summary { border-color: var(--oro); }
.filtro .panel { margin-top: .6rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; align-items: end; }
.filtro .panel label { font-size: .82rem; font-weight: 600; display: block; margin-bottom: .25rem; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 700; padding: .7rem .9rem; border-bottom: 1px solid var(--linea); background: #fbfaf7; white-space: nowrap; }
td { padding: .65rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.monto, th.monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.anulado td { color: #a8a397; text-decoration: line-through; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linea); margin: 1.25rem 0 1rem; overflow-x: auto; }
.pestanas a { padding: .65rem .95rem; text-decoration: none; color: var(--suave); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activo { color: var(--tinta); border-color: var(--oro); }

/* Ficha */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; }
.ficha .dato .etq { font-size: .8rem; color: var(--suave); }
.ficha .dato .val { font-weight: 600; margin-top: .1rem; }
.desglose { display: grid; gap: .35rem; }
.desglose .linea { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.desglose .linea.total { border-top: 1px solid var(--linea); padding-top: .6rem; font-weight: 700; }

/* Barras simples del reporte */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: .5rem; }
.barras .b { flex: 1; background: var(--oro); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.barras .b:hover { background: var(--tinta); }

/* Ruta: arrastrar y soltar */
.arrastrable .renglon { cursor: grab; background: #fff; }
.arrastrable .renglon.arrastrando { opacity: .4; }
.asa { color: #b8b3a6; cursor: grab; }
.mover { display: flex; flex-direction: column; gap: 2px; }
.mover button { border: 1px solid var(--linea); background: #fff; border-radius: 6px; width: 30px; height: 22px; cursor: pointer; line-height: 1; }

/* =========================================================
   MODO COBRADOR (celular primero)
   ========================================================= */
.cobro { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 6rem; }
.cobro .hoy { background: var(--tinta); color: #fff; border-radius: 18px; padding: 1.1rem 1.2rem; }
.cobro .hoy .dia { font-size: .85rem; color: #d7cfb8; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cobro .hoy .grande { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: .15rem 0 .6rem; }
.cobro .hoy .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cobro .hoy .tres .etq { font-size: .75rem; color: #bfb8a5; }
.cobro .hoy .tres .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta-cliente { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--linea); border-radius: 16px; text-decoration: none; margin-top: .6rem; min-height: 72px; }
.tarjeta-cliente .nombre { font-weight: 700; font-size: 1.05rem; }
.tarjeta-cliente .monto { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tarjeta-cliente.hecho { opacity: .78; }
.botones-cobro { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.botones-cobro .btn { min-height: 64px; font-size: 1.05rem; border-radius: 14px; flex-direction: column; gap: .2rem; }
.panel-accion { margin-top: 1rem; }
.cobro-inferior { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(4, 1fr); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); z-index: 30; }
.cobro-inferior a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .72rem; font-weight: 600; color: var(--suave); text-decoration: none; padding: .35rem 0; }
.cobro-inferior a.activo { color: var(--tinta); }
.cobro-inferior a.activo .icono { color: var(--oro); }
.cola-offline { background: var(--alerta-claro); color: var(--alerta); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .75rem; font-weight: 600; }

/* Pantalla de entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--tinta); }
.entrada .caja { background: #fff; border-radius: 20px; padding: 2rem 1.6rem; width: 100%; max-width: 380px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .lateral { display: none; }
  .contenido { margin-left: 0; }
  main { padding: 1rem 1rem 6rem; }
  .barra { padding: .6rem 1rem; }
  .barra .usuario { display: none; }
  .inferior { display: grid; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--linea); grid-template-columns: repeat(5, 1fr); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); z-index: 30; }
  .inferior a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .7rem; font-weight: 600; color: var(--suave); text-decoration: none; padding: .3rem 0; }
  .inferior a.activo { color: var(--tinta); }
  .inferior a.activo .icono { color: var(--oro); }
  .columnas { grid-template-columns: 1fr; }
  .kpi .valor { font-size: 1.35rem; }
  h1 { font-size: 1.3rem; }
  .ocultar-movil { display: none; }
  /* tablas como tarjetas */
  table.responsiva thead { display: none; }
  table.responsiva tr { display: block; border-bottom: 1px solid var(--linea); padding: .5rem .25rem; }
  table.responsiva td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem .75rem; text-align: right; }
  table.responsiva td::before { content: attr(data-t); color: var(--suave); font-size: .82rem; text-align: left; }
}
@media (min-width: 901px) { .solo-movil { display: none !important; } }

/* Menú lateral ordenable */
#menu-lateral { display: flex; flex-direction: column; gap: .15rem; }
#menu-lateral .item.arrastrando { opacity: .35; }
#menu-lateral .item.sobre { box-shadow: inset 0 2px 0 var(--oro); }

/* =========================================================
   TEMA PROFESIONAL (v2) — se aplica encima de lo anterior.
   Para volver al diseño anterior basta con borrar este bloque.
   ========================================================= */
:root {
  --fondo: #f3f4f7;
  --tinta: #12141a;
  --suave: #6b7080;
  --linea: #e7e8ee;
  --oro: #c9a14a;
  --oro-osc: #a47f2c;
  --oro-claro: #f7efdc;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
  --sombra-alta: 0 10px 30px rgba(16,24,40,.10);
}
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em; }
h1 { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; }
h2 { font-weight: 700; letter-spacing: -.01em; }

/* Barra lateral */
.lateral { background: linear-gradient(180deg, #14161d 0%, #0d0f14 100%); padding: 1.25rem .85rem; border-right: 1px solid rgba(255,255,255,.04); }
.marca { padding: .35rem .55rem 1.35rem; font-size: 1.02rem; letter-spacing: -.01em; }
.marca .logo { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #e4c06d, #a47f2c); color: #14110a; box-shadow: 0 4px 14px rgba(201,161,74,.35); font-size: 1.05rem; }
.lateral a.item { padding: .66rem .75rem; border-radius: 12px; color: #a9adbb; font-weight: 550; transition: background .15s, color .15s; }
.lateral a.item .icono { width: 19px; height: 19px; opacity: .85; }
.lateral a.item:hover { background: rgba(255,255,255,.05); color: #fff; }
.lateral a.item.activo { background: linear-gradient(90deg, rgba(201,161,74,.22), rgba(201,161,74,.06)); color: #f4dc9f; box-shadow: inset 3px 0 0 var(--oro); }
.lateral a.item.activo .icono { opacity: 1; color: var(--oro); }
.lateral .pie { border-top-color: rgba(255,255,255,.06); color: #8a8f9c; line-height: 1.7; }
#menu-estado { color: #5d6270 !important; font-size: .75rem; }

/* Barra superior */
.barra { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--linea); padding: .75rem 1.75rem; }
.buscador input[type=search] { background: #f3f4f7; border-color: transparent; padding-top: .62rem; padding-bottom: .62rem; transition: background .15s, border-color .15s, box-shadow .15s; }
.buscador input[type=search]:focus { background: #fff; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(201,161,74,.15); outline: none; }
.campana { background: #f3f4f7; border-radius: 12px; padding: .5rem; }
main { padding: 1.75rem; }

/* Tarjetas y números */
.tarjeta, .lista, .tabla-envoltura, .kpi { border-color: var(--linea); box-shadow: var(--sombra); }
.kpi { padding: 1.15rem 1.2rem; transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.kpi .etiqueta { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); display: flex; align-items: center; gap: .5rem; }
.kpi .valor { font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
.kpi .ico { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--oro-claro); color: var(--oro-osc); flex: none; }
.kpi .ico .icono { width: 18px; height: 18px; }
.kpi.ok .ico { background: var(--ok-claro); color: var(--ok); }
.kpi.mal .ico { background: var(--mal-claro); color: var(--mal); }
.kpi.principal { background: radial-gradient(120% 140% at 100% 0%, #3a3120 0%, #16181f 45%, #101217 100%); border: 0; box-shadow: 0 12px 30px rgba(16,18,23,.28); }
.kpi.principal .etiqueta { color: #d9c79c; }
.kpi.principal .ico { background: rgba(201,161,74,.18); color: #f0d48e; }
.kpi.principal .valor { color: #fff; }
.kpi.oro .valor { color: var(--oro-osc); }
.progreso { height: 6px; background: #eceef2; }
.progreso > span { background: linear-gradient(90deg, #e4c06d, var(--oro-osc)); }
.titulo-seccion h2 { font-size: .74rem; letter-spacing: .12em; color: #8a8f9c; }
.titulo-seccion a { color: var(--oro-osc); }

/* Encabezado de bienvenida */
.bienvenida { display: flex; align-items: center; gap: 1rem; }
.bienvenida .avatar { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #e4c06d, #a47f2c); color: #14110a; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; box-shadow: 0 6px 18px rgba(201,161,74,.35); }

/* Botones */
.btn { border-radius: 12px; font-weight: 650; transition: transform .1s, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn.oro { background: linear-gradient(135deg, #e0bb63, #b48a32); border-color: #b48a32; color: #17120a; box-shadow: 0 6px 16px rgba(180,138,50,.28); }
.btn.oro:hover { box-shadow: 0 8px 22px rgba(180,138,50,.38); }
.btn.primario { background: #14161d; box-shadow: 0 6px 16px rgba(20,22,29,.18); }
.acciones-rapidas .btn { background: #fff; border-color: var(--linea); box-shadow: var(--sombra); padding: 1rem 1.1rem; }
.acciones-rapidas .btn .icono { color: var(--oro-osc); }
.acciones-rapidas .btn:hover { box-shadow: var(--sombra-alta); border-color: #dcdee6; }

/* Avisos */
.aviso { border-color: var(--linea); box-shadow: var(--sombra); transition: box-shadow .15s; }
.aviso:hover { box-shadow: var(--sombra-alta); }
.todo-bien { background: linear-gradient(90deg, #e6f4ec, #f1f9f4); border: 1px solid #cfe9da; }

/* Campos */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea { border-color: #dcdee6; border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(201,161,74,.15); }

/* Pantalla de entrada */
.entrada { background: radial-gradient(900px 500px at 15% 10%, rgba(201,161,74,.22), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(201,161,74,.12), transparent 60%), linear-gradient(160deg, #171a22, #0b0d12); }
.entrada .caja { border-radius: 24px; padding: 2.4rem 2rem; box-shadow: 0 30px 80px rgba(0,0,0,.45); max-width: 400px; }
.entrada .logo-grande { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #e4c06d, #a47f2c); color: #14110a; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; box-shadow: 0 10px 26px rgba(201,161,74,.4); margin-bottom: 1.1rem; }
.entrada h1 { font-size: 1.5rem; margin: 0; }
.entrada .sub { color: var(--suave); margin: .25rem 0 1.6rem; }
.entrada .pie-entrada { text-align: center; color: #9a9ea9; font-size: .78rem; margin-top: 1.4rem; display: flex; align-items: center; justify-content: center; gap: .35rem; }

/* Celular del cobrador */
.cobro .hoy { background: radial-gradient(120% 140% at 100% 0%, #3a3120 0%, #16181f 45%, #101217 100%); border-radius: 22px; box-shadow: 0 14px 34px rgba(16,18,23,.28); }
.tarjeta-cliente { border-radius: 18px; box-shadow: var(--sombra); border-color: var(--linea); }
.botones-cobro .btn { border-radius: 16px; box-shadow: var(--sombra); }
.cobro-inferior, .inferior { box-shadow: 0 -6px 20px rgba(16,24,40,.06); }
@media (max-width: 900px) { main { padding: 1.1rem 1rem 6rem; } .barra { padding: .6rem 1rem; } .kpi .valor { font-size: 1.4rem; } }

/* Logo Ibiza Group */
.marca .logo-img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(201,161,74,.35)); }
.marca-movil { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #14161d; }
.marca-movil img { width: 28px; height: 28px; object-fit: contain; }
.logo-oscuro { width: 38px; height: 38px; border-radius: 11px; background: #14161d; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(16,18,23,.25); }
.logo-oscuro img { width: 26px; height: 26px; object-fit: contain; }
.logo-entrada { text-align: center; margin: -.4rem 0 .4rem; }
.logo-entrada img { width: 230px; max-width: 80%; height: auto; }
.entrada .caja { background: linear-gradient(180deg, #181b23, #12141a); color: #e9e6dd; border: 1px solid rgba(201,161,74,.18); }
.entrada .caja label { color: #d8cfb8; }
.entrada .caja input { background: #0f1116; border-color: #2a2e39; color: #fff; }
.entrada .caja input:focus { border-color: var(--oro); }
.entrada .sub { color: #9a9ea9; }