/* estilos.css - Cobros por link (panel y página del cliente) */
:root {
    color-scheme: light;
    --fondo: #eef2f7;
    --papel: #ffffff;
    --texto: #1e293b;
    --suave: #64748b;
    --linea: #dbe2ec;
    --marino: #002050;      /* colores del logo (cd.png) */
    --azul: #0078f8;
    --acento: #0066d6;      /* el azul del logo, un poco más oscuro para que el texto blanco se lea bien */
    --mp: #009ee3;
    --wa: #1fa855;
    --ok: #15803d;
    --error: #b91c1c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 system-ui, "Segoe UI", Arial, sans-serif; }
a { color: var(--acento); }
h1 { font-size: 24px; margin: 4px 0 12px; }
h2 { font-size: 19px; margin: 0 0 12px; }
small { color: var(--suave); font-weight: 400; }

main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 50px; }
main.angosto { max-width: 480px; padding-top: 28px; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.centro { text-align: center; }
.suave { color: var(--suave); }
.chico { font-size: 13px; }
.grande { font-size: 52px; margin: 0; line-height: 1.1; }
.logo { display: inline-block; max-width: 100%; height: auto; }
.cabecera-logo { margin: 0 0 14px; }

.barra { background: #fff; border-bottom: 3px solid var(--azul); box-shadow: 0 2px 8px rgb(0 32 80 / 8%); }
.barra .dentro { max-width: 1000px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; }
.marca-barra { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-barra img { display: block; height: 40px; width: auto; }
.marca-barra b { display: block; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.marca-barra .m1 { color: var(--marino); }
.marca-barra .m2 { color: var(--azul); }
.marca-barra small { display: block; font-size: 12px; color: var(--suave); }
.salir { color: var(--marino); font-size: 14px; font-weight: 600; }

label { display: block; font-size: 14px; font-weight: 600; color: #334155; }
input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-weight: 400; color: inherit; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
input:focus { outline: 2px solid #93c5fd; border-color: var(--acento); }
input[readonly] { background: #f8fafc; }
/* fcs envuelve los campos con ícono en un <span>: que ocupe todo el ancho */
label .fsc-wrap { display: block; margin-top: 4px; }
label .fsc-wrap > input { margin-top: 0; }
.ayudita { display: block; min-height: 1.2em; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--suave); }
.ayudita.bien { color: var(--ok); }
.ayudita.mal { color: var(--error); }

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.grilla .ancho { grid-column: 1 / -1; }
form.tarjeta label, form.pagar label { margin-bottom: 14px; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--texto); background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; cursor: pointer; text-decoration: none; }
.boton:hover { background: #f1f5f9; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.primario:hover { background: var(--marino); }

.boton.amarillo { background: #f9da49; border-color: var(--acento); color: #000; }
.boton.amarillo:hover { background: #ffff00; }


.boton.whatsapp { background: var(--wa); border-color: var(--wa); color: #fff; }
.boton.whatsapp:hover { background: #178a45; }
.boton.mp { width: 100%; padding: 14px; font-size: 17px; background: var(--mp); border-color: var(--mp); color: #fff; }
.boton.mp:hover { background: #0086c3; }
.boton.chico { padding: 6px 12px; font-size: 14px; }
.boton.peligro { color: var(--error); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.botones form { margin: 0; }

.error { background: #fee2e2; color: var(--error); border-radius: 8px; padding: 10px 12px; }
.ok { background: #dcfce7; color: var(--ok); border-radius: 8px; padding: 10px 12px; }
.nota { background: #fef9c3; color: #713f12; border-radius: 8px; padding: 10px 12px; font-size: 14px; }

/* Cobro elegido: datos a la izquierda, QR a la derecha */
.cobro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; border-color: #8cc2ff; }
.cobro-datos p { margin: 4px 0; }
.cobro .turno { font-size: 17px; }
.precio { font-size: 26px; font-weight: 750; }
.link-campo { margin-top: 14px; }
.cobro-qr { text-align: center; }
#qr { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; min-width: 246px; min-height: 246px; }
#qr img, #qr canvas { display: block; }
.cobro-qr p { margin: 6px 0; font-size: 13px; }
.mensaje-wa { white-space: pre-wrap; font: 15px/1.5 system-ui, sans-serif; background: #e7fbe9; border-radius: 10px; padding: 12px; margin: 0; word-break: break-word; }

.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #f1f5f9; white-space: nowrap; }
.estado-aprobado { background: #dcfce7; color: var(--ok); }
.estado-pendiente { background: #fef9c3; color: #854d0e; }
.estado-rechazado, .estado-revisar { background: #fee2e2; color: var(--error); }
.estado-anulado, .estado-devuelto { background: #e2e8f0; color: #475569; }

.titulo-lista { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.filtros a { padding: 3px 10px; border-radius: 999px; text-decoration: none; color: var(--suave); background: #f1f5f9; }
.filtros a.activo { background: var(--marino); color: #fff; }
.tabla { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: 13px; color: var(--suave); }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.actual { background: #eff6ff; }

/* Página del cliente */
.detalle { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; padding: 14px; background: #f8fafc; border-radius: 10px; }
.detalle dt { color: var(--suave); font-size: 14px; }
.detalle dd { margin: 0; font-weight: 600; }
.detalle .precio { font-size: 22px; }

@media (max-width: 700px) {
    .marca-barra b { font-size: 16px; }
    .cobro { grid-template-columns: 1fr; }
    .cobro-qr { order: -1; }
    .botones .boton { flex: 1 1 auto; }
}
@media print {
    body { background: #fff; }
    .no-imprimir { display: none; }
    .tarjeta { border: 0; }
}

/* ---------- Página del negocio (index.php) ---------- */
.landing { background: #fff; }
.l-dentro { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.l-barra { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 94%); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); }
.l-barra .l-dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.l-menu { display: flex; gap: 18px; }
.l-menu a { color: var(--marino); text-decoration: none; font-weight: 600; font-size: 15px; }
.l-menu a:hover { color: var(--azul); }

.l-hero { background: linear-gradient(160deg, #f2f7ff 0%, #e3eeff 55%, #ffffff 100%); padding: 56px 0 64px; }
.l-hero-grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center; }
.l-etiqueta { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: #dbeaff; color: var(--acento); font-weight: 700; font-size: 13px; }
.l-hero h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 50px); line-height: 1.08; letter-spacing: -.02em; color: var(--marino); }
.l-hero h1 span { color: var(--azul); }
.l-bajada { margin: 0 0 26px; font-size: 18px; color: #334155; max-width: 540px; }
.l-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.l-acciones.centro { justify-content: center; }
.boton.grande { padding: 14px 22px; font-size: 16px; border-radius: 11px; }

/* El teléfono de muestra */
.l-telefono { position: relative; justify-self: center; width: 250px; padding: 14px; background: var(--marino); border-radius: 34px; box-shadow: 0 24px 50px rgb(0 32 80 / 25%); }
.l-pantalla { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 16px 22px; background: #eef2f7; border-radius: 22px; }
.l-pantalla img { width: 96px; height: auto; }
.l-pantalla b { font-size: 17px; color: var(--texto); }
.l-pantalla dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; width: 100%; margin: 0; padding: 10px 12px; background: #fff; border-radius: 10px; font-size: 13px; }
.l-pantalla dt { color: var(--suave); }
.l-pantalla dd { margin: 0; font-weight: 700; }
.l-monto { font-size: 15px; }
.l-falso-campo { width: 100%; padding: 8px 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; color: #94a3b8; }
.l-falso-boton { width: 100%; padding: 10px; background: var(--mp); color: #fff; border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center; }
.l-burbuja { position: absolute; right: -26px; bottom: -18px; padding: 8px 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgb(0 32 80 / 18%); font-weight: 700; font-size: 14px; color: var(--ok); }

.l-seccion { padding: 60px 0; }
.l-claro { background: #f4f7fb; }
.l-seccion h2, .l-contacto h2 { margin: 0 0 26px; font-size: clamp(24px, 3.4vw, 32px); color: var(--marino); text-align: center; letter-spacing: -.01em; }
.l-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.l-tarjetas article { padding: 24px 22px; background: #fff; border: 1px solid var(--linea); border-radius: 16px; border-top: 4px solid var(--azul); }
.l-tarjetas h3 { margin: 10px 0 8px; font-size: 18px; color: var(--marino); }
.l-tarjetas p { margin: 0; color: #475569; font-size: 15px; }
.l-icono { font-size: 30px; }

.l-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.l-pasos li { padding: 24px 22px; background: #fff; border-radius: 16px; border: 1px solid var(--linea); }
.l-pasos span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--marino); color: #fff; font-weight: 800; }
.l-pasos h3 { margin: 12px 0 6px; font-size: 18px; color: var(--marino); }
.l-pasos p { margin: 0; color: #475569; font-size: 15px; }
.l-medios { margin: 26px auto 0; max-width: 680px; text-align: center; color: #334155; }

.l-rubros { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.l-rubros li { padding: 10px 18px; background: #eef5ff; border-radius: 999px; font-weight: 600; color: var(--marino); }

.l-contacto { padding: 60px 0 70px; background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%); border-top: 1px solid var(--linea); }
.l-contacto h2 { margin: 14px 0 8px; }
.l-contacto p { margin: 0 0 22px; color: #334155; font-size: 17px; }
.l-pie { padding: 18px 20px; background: var(--marino); color: #c7d4ea; text-align: center; font-size: 14px; }

@media (max-width: 820px) {
    .l-hero { padding: 36px 0 46px; }
    .l-hero-grilla { grid-template-columns: 1fr; }
    .l-telefono { margin-top: 10px; }
    .l-burbuja { right: -6px; }
}
@media (max-width: 560px) {
    .l-menu { display: none; }
    .l-acciones .boton { flex: 1 1 100%; }
    .l-seccion { padding: 44px 0; }
}

/* Panel: menú de la barra e integraciones */
.barra-menu { display: flex; align-items: center; gap: 18px; }
.barra-menu a { color: var(--marino); font-size: 14px; font-weight: 600; }
code { font: 0.9em Consolas, "Cascadia Mono", monospace; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.clave-nueva { margin: 12px 0 16px; padding: 14px 16px; background: #fef9c3; border: 1px solid #fde047; border-radius: 10px; }
.clave-nueva p { margin: 0 0 8px; }
.clave-nueva input { font-family: Consolas, "Cascadia Mono", monospace; }
tr.inactiva td { color: var(--suave); text-decoration: line-through; }
tr.inactiva td:last-child { text-decoration: none; }
.nueva-integracion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; }
.nueva-integracion label { flex: 1 1 260px; margin: 0; }
.clave-nueva .fsc-wrap { display: block; }
.acciones-integracion { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.acciones-integracion form { margin: 0; }