/* ============ Comandix — complementos ============ */
/* En una rejilla los paneles van alineados arriba (sin el margen de «panel seguido de panel») */
.rejilla > .panel + .panel { margin-top: 0; }
.titulo-form { margin: 0 0 10px; font-size: 24px; letter-spacing: -0.02em; }
.centro { text-align: center; }
.con-ojo { position: relative; }
.con-ojo input { padding-right: 48px; }
.ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 18px; opacity: 0.7; padding: 6px; }
.ojo:hover { opacity: 1; }

/* La marca: texto con degradado */
.marca span {
  background: linear-gradient(90deg, #ffffff, #c4b5fd 55%, #67e8f9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Al refrescar el salón cada pocos segundos no se repite la animación de entrada */
.sin-animacion .mesa, .sin-animacion .entra, .sin-animacion .cifra { animation: none; }

.cerrar-movil { display: none; }
@media (max-width: 860px) { .cerrar-movil { display: inline-flex; } }

/* Tarjeta de entrada con borde que brilla suavemente */
.tarjeta-entrada { position: relative; }
.tarjeta-entrada::before {
  content: ''; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, rgba(103, 232, 249, 0.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giro 6s linear infinite;
}
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes giro { to { --giro: 360deg; } }
@media (prefers-reduced-motion: reduce) { .tarjeta-entrada::before { animation: none; } }

.captcha { display: flex; justify-content: center; margin: 4px 0 14px; }
.captcha:empty { display: none; }
.check a { color: var(--acento-2); }
.check.recordar { align-items: flex-start; margin-top: -4px; }
.check.recordar input { margin-top: 3px; }
.check.recordar small { display: block; color: var(--tenue); font-size: 12px; margin-top: 2px; }

/* Tres pestañas en la entrada (iniciar sesión, registrar restaurante, contador) */
.pestanas.tres { grid-template-columns: repeat(3, 1fr); }
.pestanas.tres button { font-size: 13px; padding: 10px 4px; }

/* Barra lateral: botón de reportar, plan y selector de cliente del contador */
.reportar { margin: 10px 4px 0; justify-content: flex-start; color: var(--suave); background: transparent; }
.plan-chip {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.2)); color: #dfe4ff;
  border: 1px solid rgba(148, 163, 255, 0.25);
}
.solo-movil { display: none; }
@media (max-width: 860px) { .solo-movil { display: block; } }
textarea { resize: vertical; min-height: 90px; }

/* Etiquetas de estado de inventario */
.chip-estado { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.chip-estado.rojo { background: rgba(255, 93, 93, 0.15); color: #ff8a8a; }
.chip-estado.amarillo { background: rgba(255, 194, 75, 0.15); color: #ffd27a; }
.chip-estado.verde { background: rgba(52, 211, 153, 0.14); color: #5eead4; }
.chip-estado.gris { background: rgba(255, 255, 255, 0.07); color: var(--suave); }

/* Barras simples para reportes */
.barras { display: grid; gap: 8px; }
.barra { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; font-size: 14px; }
.barra .riel { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.barra .relleno { height: 100%; border-radius: 999px; background: var(--acento-grad); transform-origin: left; animation: crecer 0.7s ease both; }
@keyframes crecer { from { transform: scaleX(0); } }
.barra .valor { text-align: right; font-weight: 700; }

/* Vista del cajero: solo la cuenta de la mesa (sin carta), centrada */
.pedido.solo-cuenta { grid-template-columns: minmax(0, 620px); justify-content: center; }
.pedido.solo-cuenta .comanda { position: static; transform: none; max-height: none; background: var(--panel); border-radius: var(--radio); box-shadow: none; }
.pedido.solo-cuenta .cerrar-movil { display: none; }

/* Cobro: dinero recibido y vuelto */
.monto-grande { font-size: 26px; font-weight: 700; padding: 14px 16px; text-align: right; }
.billete { font-weight: 700; }
.vuelto {
  display: grid; justify-items: center; gap: 2px; padding: 16px; border-radius: 16px; margin-bottom: 8px;
  background: linear-gradient(150deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.06)); border: 1px solid rgba(52, 211, 153, 0.45);
}
.vuelto span { color: #6ee7b7; font-weight: 600; }
.vuelto b { font-size: 44px; font-weight: 800; color: #34d399; letter-spacing: -0.02em; line-height: 1.1; }
.vuelto small { color: var(--suave); }

/* Modo sin internet */
#sin-conexion {
  position: fixed; left: 50%; transform: translateX(-50%); top: 10px; z-index: 90; max-width: calc(100vw - 24px);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center;
  background: rgba(251, 191, 36, 0.16); color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.45); backdrop-filter: blur(12px);
}

/* Pantalla de cocina (KDS) */
.kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.ticket-kds {
  border-radius: 16px; background: var(--panel); border: 1px solid var(--borde); padding: 14px; display: grid; gap: 10px;
  border-top: 5px solid var(--ok); backdrop-filter: blur(12px);
}
.ticket-kds.amarillo { border-top-color: var(--aviso); }
.ticket-kds.rojo { border-top-color: var(--error); animation: alertaKds 1.6s ease-in-out infinite; }
.ticket-kds.listo { opacity: 0.5; border-top-color: var(--tenue); }
@keyframes alertaKds { 50% { box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.35); } }
.ticket-kds header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ticket-kds header b { font-size: 22px; display: block; line-height: 1.1; }
.ticket-kds header small { color: var(--suave); }
.ticket-kds .reloj { font-size: 26px; font-weight: 800; }
.ticket-kds.verde .reloj { color: var(--ok); }
.ticket-kds.amarillo .reloj { color: var(--aviso); }
.ticket-kds.rojo .reloj { color: var(--error); }
.ticket-kds .meta { display: flex; justify-content: space-between; color: var(--suave); font-size: 13px; }
.ticket-kds ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ticket-kds li { font-size: 18px; }
.ticket-kds li em { display: block; font-style: normal; font-size: 14px; color: #fcd34d; margin-top: 2px; }
.ticket-kds li.anulado { text-decoration: line-through; opacity: 0.6; }

/* Calculadora */
.calculadora { max-width: 340px; margin: 0 auto; }
.calc-pantalla {
  padding: 16px 18px; border-radius: 16px; margin-bottom: 12px; text-align: right;
  background: linear-gradient(160deg, rgba(99, 102, 241, 0.22), rgba(0, 0, 0, 0.35)); border: 1px solid var(--borde);
}
.calc-expr { color: var(--suave); font-size: 15px; min-height: 20px; word-break: break-all; }
.calc-valor { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; word-break: break-all; line-height: 1.15; }
.calc-teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-tecla {
  height: 58px; border-radius: 14px; border: 1px solid var(--borde); background: var(--panel-2); cursor: pointer;
  font-size: 21px; font-weight: 600; transition: transform 0.08s, background 0.15s;
}
.calc-tecla:hover { background: var(--panel-3); }
.calc-tecla:active { transform: scale(0.94); }
.calc-tecla.op { color: var(--acento-2); font-size: 24px; }
.calc-tecla.suave { color: var(--suave); }
.calc-tecla.igual { background: var(--acento-grad); border-color: transparent; color: #fff; font-size: 24px; }
.modal:has(.calculadora) { max-width: 380px; }

/* Caja: desglose del efectivo, entradas/salidas, conteo de billetes e historial */
.desglose-caja { display: grid; gap: 2px; margin-bottom: 14px; }
.desglose-caja > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.desglose-caja > div span { color: var(--suave); }
.desglose-caja .total { margin-top: 4px; background: rgba(124, 108, 255, 0.14); border: 1px solid rgba(124, 108, 255, 0.35); font-size: 16px; }
.desglose-caja .total span { color: inherit; font-weight: 600; }
.acciones-movimiento { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.acciones-movimiento .btn { min-width: 0; white-space: normal; justify-content: center; text-align: center; }
.subtitulo-caja { font-size: 14px; margin: 14px 0 8px; color: var(--suave); font-weight: 600; }
.chips-motivo { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.chips-motivo .chip { font-size: 12px; padding: 5px 10px; }
.conteo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; margin: 4px 0 12px; }
.conteo-fila { display: grid; grid-template-columns: 1fr 70px 80px; gap: 8px; align-items: center; font-size: 14px; }
.conteo-fila input { text-align: center; padding: 8px 6px; }
.conteo-fila b { text-align: right; font-size: 13px; color: var(--suave); }
.conteo-total { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conteo-total > div { padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--borde); }
.conteo-total span { display: block; color: var(--suave); font-size: 13px; }
.conteo-total b { font-size: 22px; font-weight: 800; }
.filtros-historial { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.filtros-historial .campo { margin-bottom: 10px; }
.filtros-historial .btn { margin-bottom: 10px; }
@media (max-width: 520px) { .acciones-movimiento, .conteo-total { grid-template-columns: 1fr; } }

/* Aviso de versión nueva */
.barra-actualizacion {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 95; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 10px 12px 10px 18px; border-radius: 16px;
  background: rgba(20, 24, 48, 0.92); border: 1px solid rgba(148, 163, 255, 0.35); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px); font-size: 14px; animation: entraAbajo 0.35s ease both;
}
@keyframes entraAbajo { from { opacity: 0; transform: translate(-50%, 16px); } }
.version-comandix { margin-bottom: 14px; font-size: 14px; }

/* Tarjetas de planes */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan-card { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--borde); }
.plan-card.actual { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset, 0 10px 30px rgba(124, 108, 255, 0.25); }
.plan-card h3 { margin: 0; font-size: 18px; }
.plan-card .precio { font-size: 30px; font-weight: 800; margin: 6px 0 10px; }
.plan-card .precio small { font-size: 14px; color: var(--suave); font-weight: 500; }
.plan-card ul { margin: 0; padding-left: 18px; color: var(--suave); font-size: 14px; display: grid; gap: 4px; }