/* Dream Gardens · Recibos */
:root {
  --verde: #2e7d32;
  --verde-oscuro: #1b5e20;
  --verde-claro: #e8f5e9;
  --texto: #1f2a1f;
  --gris: #5f6b5f;
  --borde: #dfe5df;
  --fondo: #f6f8f6;
  --blanco: #ffffff;
  --rojo: #c62828;
  --rojo-claro: #fdecea;
  --amarillo-claro: #fff8e1;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--verde); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.sub { color: var(--gris); margin: 0 0 1.5rem; }
.nota, .vacio { color: var(--gris); }

/* Barra superior */
.barra {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--blanco); border-bottom: 1px solid var(--borde);
  padding: .75rem 1.25rem;
}
.marca { font-weight: 700; color: var(--verde); text-decoration: none; font-size: 1.1rem; }
.marca span { color: var(--gris); font-weight: 400; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.menu a { padding: .4rem .75rem; border-radius: 6px; text-decoration: none; color: var(--texto); }
.menu a.activo, .menu a:hover { background: var(--verde-claro); color: var(--verde-oscuro); }
.cuenta { display: flex; align-items: center; gap: .75rem; color: var(--gris); font-size: .9rem; }
.cuenta form { margin: 0; }

.contenido { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.sin-menu .contenido { max-width: 440px; padding-top: 10vh; }

/* Tarjetas y formularios */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 1.5rem; max-width: 560px; }
.tarjeta-acceso { max-width: none; }
.tarjeta-acceso h1 { color: var(--verde); }
label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: var(--gris); display: block; }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem;
  border: 1px solid var(--borde); border-radius: 6px; font: inherit; background: var(--blanco);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
.boton {
  display: inline-block; background: var(--verde); color: var(--blanco); border: 0; border-radius: 6px;
  padding: .65rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--verde-oscuro); }
.boton-enlace { background: none; border: 0; color: var(--verde); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.botones { display: flex; gap: 1rem; align-items: center; }

/* Alertas */
.alerta { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid; }
.alerta-exito { background: var(--verde-claro); border-color: #a5d6a7; }
.alerta-error { background: var(--rojo-claro); border-color: #f5b5b0; color: var(--rojo); }
.alerta-aviso { background: var(--amarillo-claro); border-color: #ffe08a; }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.indicador { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem; }
.indicador span { display: block; color: var(--gris); font-size: .85rem; }
.indicador strong { font-size: 1.4rem; }

/* Tablas */
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th { background: var(--verde-claro); font-size: .85rem; color: var(--verde-oscuro); }
.tabla tr:last-child td { border-bottom: 0; }
.num { text-align: right !important; }
.acciones { display: flex; gap: 1rem; }
.acciones form { margin: 0; }
.etiqueta { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; }
.etiqueta.ok { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta.off { background: #eceff1; color: #546e7a; }

@media (max-width: 640px) {
  .barra { gap: .5rem; padding: .6rem .75rem; justify-content: space-between; }
  .cuenta { order: 2; }
  .cuenta span { display: none; }
  .menu { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; }
  .menu a { white-space: nowrap; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .indicador strong { font-size: 1.15rem; }
}

/* Etapa 2: clientes */
.tarjeta-ancha { max-width: 760px; }
.seccion { font-size: 1rem; margin: 1.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--borde); color: var(--verde-oscuro); }
.seccion:first-of-type { border-top: 0; padding-top: 0; margin-top: .5rem; }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.casilla input { width: auto; margin-top: .25rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.filtros input[type=search] { flex: 1 1 260px; margin: 0; }
.filtros select { flex: 0 1 220px; width: auto; margin: 0; }
.boton-secundario { background: var(--blanco); color: var(--verde); border: 1px solid var(--verde); }
.boton-secundario:hover { background: var(--verde-claro); }
.datos { display: grid; grid-template-columns: 180px 1fr; gap: .5rem 1rem; margin: 0; }
.datos dt { color: var(--gris); }
.datos dd { margin: 0; }
@media (max-width: 640px) {
  .columnas { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .datos dt { margin-top: .5rem; }
}

/* Etapa 3: ventas y catálogos */
.renglon { display: grid; grid-template-columns: 1.3fr 1.3fr 1.3fr .7fr .8fr .9fr .9fr auto; gap: .5rem; align-items: end;
  padding: .75rem 0; border-bottom: 1px dashed var(--borde); }
.renglon label { margin: 0; font-size: .8rem; }
.renglon .r-otro { grid-column: 1 / -1; order: 9; }
.renglon .r-importe span { display: block; font-size: .8rem; color: var(--gris); }
.renglon .r-importe strong { display: block; padding: .6rem 0; white-space: nowrap; }
.renglon .quitar { color: var(--rojo); padding-bottom: .7rem; }
#agregar-renglon { margin-top: 1rem; }
.total-venta { display: flex; justify-content: flex-end; gap: 1rem; align-items: baseline; font-size: 1.2rem; margin-top: 1rem; }
.total-venta strong { font-size: 1.5rem; color: var(--verde-oscuro); }
.casilla-centrada { align-self: center; margin-top: 1.2rem; }
.tarjeta + .tarjeta { margin-top: 1rem; }
form > .botones { margin-top: 1.25rem; }
.alta-rapida { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 1.5rem; }
.alta-rapida input, .alta-rapida select { width: auto; flex: 1 1 160px; margin: 0; }
.alta-rapida input[type=number] { flex: 0 1 100px; }
.boton-peligro { background: var(--rojo); }
.boton-peligro:hover { background: #8e1c1c; }
.etiqueta.estado-pendiente { background: var(--amarillo-claro); color: #7a5b00; }
.etiqueta.estado-parcial { background: #e3f2fd; color: #0d47a1; }
.etiqueta.estado-pagada { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta.estado-cancelada { background: #eceff1; color: #546e7a; }
.tabla tfoot th { background: var(--blanco); font-size: 1rem; color: var(--texto); }
h2 small.nota { font-weight: 400; font-size: .85rem; }
@media (max-width: 900px) {
  .renglon { grid-template-columns: 1fr 1fr; }
  .renglon .r-importe, .renglon .quitar { grid-column: auto; }
}

[hidden] { display: none !important; }

/* Etapa 4: pagos y recibos */
.recibo-previa { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 1.5rem; max-width: 900px; }
.rp-encabezado { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--verde); padding-bottom: .75rem; margin-bottom: 1rem; }
.rp-marca { color: var(--verde); font-size: 1.3rem; }
.rp-folio { text-align: right; }
.rp-totales { margin-left: auto; border-collapse: collapse; min-width: 280px; }
.rp-totales td, .rp-totales th { padding: .35rem .6rem; text-align: right; }
.rp-totales .rp-este td { background: var(--verde-claro); font-weight: 700; color: var(--verde-oscuro); }
.fila-nota td { background: #fafbfa; font-size: .85rem; color: var(--gris); padding-top: .3rem; padding-bottom: .3rem; white-space: normal; }
.fila-nota .alta-rapida { margin: .5rem 0; }
.alerta .boton { margin-left: .5rem; padding: .35rem .8rem; }
.pendiente { color: #7a5b00; }
details summary { cursor: pointer; color: var(--rojo); }