/* Profesionales — la herramienta de Natalia.

   Se usa DE PIE, con una mano, entre una casa y otra, muchas veces con prisa y a veces
   con guantes. Eso manda sobre todo lo demás:

   · Primero el móvil de verdad, no «que se adapte». El ordenador es el caso raro.
   · Botones grandes y separados. Un objetivo pequeño se falla y se apunta otra cosa.
   · Pocas pantallas. Cuatro, y siempre a un dedo de distancia en la barra de abajo.
   · El dinero, grande. Es a lo que viene.

   Blanco, turquesa y amarillo, como pidió Iván. El amarillo es el acento y se usa con
   cuentagotas: si se pinta todo de amarillo, deja de llamar la atención nada. */

:root {
  --turquesa: #0e9b96;
  --turquesa-hondo: #0a6f6b;
  --turquesa-aire: #e8f6f5;
  --amarillo: #f5c518;
  --amarillo-aire: #fef6dd;

  --tinta: #10211f;
  --suave: #4a5c5a;
  --tenue: #829694;
  --linea: #e3eceb;
  --papel: #fff;
  --fondo: #f6faf9;

  --rojo: #c2342b;
  --rojo-aire: #fdf0ef;
  --verde: #18794e;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 33, 31, .04), 0 10px 24px -16px rgba(16, 33, 31, .22);
  --barra: 68px;   /* alto de la barra de abajo, para que no tape el contenido */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--suave);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;          /* nada más pequeño: se lee a pulso y con prisa */
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { color: var(--tinta); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .8rem; }
a { color: var(--turquesa-hondo); }

/* ── Armazón ──────────────────────────────────────────────────── */
.app { max-width: 720px; margin: 0 auto; padding: 14px 14px calc(var(--barra) + 24px); }

.cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.cabeza__quien { font-size: .82rem; color: var(--tenue); }
.cabeza__quien b { display: block; color: var(--tinta); font-size: .95rem; }

/* La barra de abajo, que es como se navega en un móvil. Fija, con área de toque
   generosa y respetando el hueco de los teléfonos con barra inferior. */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--papel); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px 4px; min-height: var(--barra);
  color: var(--tenue); text-decoration: none; font-size: .72rem; font-weight: 500;
}
.nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav a.activo { color: var(--turquesa); }
.nav a.activo svg { stroke-width: 2.2; }
.nav a:active { background: var(--turquesa-aire); }

/* ── Tarjetas y cajas ─────────────────────────────────────────── */
.caja {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px; margin-bottom: 14px;
}
.caja > h2 { margin-bottom: 12px; }
.caja__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.caja__cabeza h2 { margin: 0; }

/* El número gordo: lo que debe el cliente, lo que hay que pagarle a alguien. Es a lo
   que se entra, así que se ve antes que nada y no compite con ningún otro número. */
.cifra { display: block; font-size: 2.1rem; font-weight: 650; color: var(--tinta); letter-spacing: -.02em; line-height: 1.1; }
.cifra--debe { color: var(--rojo); }
.cifra--cobrado { color: var(--verde); }
.cifra small { display: block; font-size: .78rem; font-weight: 400; color: var(--tenue); letter-spacing: 0; margin-top: 2px; }

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.cifras > div { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; }
.cifras > div.ojo { border-color: var(--amarillo); background: var(--amarillo-aire); }

/* ── Botones ──────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 18px;
  background: var(--turquesa); color: #fff; border: 0; border-radius: 11px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.boton:active { transform: scale(.97); background: var(--turquesa-hondo); }
.boton--ancho { width: 100%; }
.boton--grande { min-height: 56px; font-size: 1.05rem; }
.boton--flojo { background: var(--papel); color: var(--turquesa-hondo); border: 1px solid var(--linea); }
.boton--flojo:active { background: var(--turquesa-aire); }
.boton--peligro { background: var(--papel); color: var(--rojo); border: 1px solid var(--linea); }
.boton--amarillo { background: var(--amarillo); color: #3d2f00; }
.boton--sm { min-height: 38px; padding: 8px 13px; font-size: .88rem; }

/* El botón de apuntar: flota sobre el contenido porque es lo que se hace veinte veces
   al día, y buscarlo al final de una lista larga es perder tiempo cada vez. */
.flotante {
  position: fixed; right: 14px; bottom: calc(var(--barra) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 21; box-shadow: 0 6px 20px -6px rgba(14, 155, 150, .55);
  border-radius: 999px; padding: 14px 20px;
}

/* ── Listas ───────────────────────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--linea);
}
.lista > li:last-child { border-bottom: 0; }
.lista .crece { flex: 1; min-width: 0; }
.lista .crece b { display: block; color: var(--tinta); font-weight: 600; }
.lista .crece > span { display: block; font-size: .84rem; color: var(--tenue); }
.lista a.crece { text-decoration: none; }

/* El importe de cada línea, alineado a la derecha y con cifras de igual ancho para que
   la columna se lea de un vistazo. */
.importe { font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.importe--debe { color: var(--rojo); }

/* ── Trabajo de la agenda ─────────────────────────────────────── */
.trabajo {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--linea);
}
.trabajo:last-child { border-bottom: 0; }
.trabajo__hora {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--turquesa-hondo);
  background: var(--turquesa-aire); border-radius: 8px; padding: 4px 8px; font-size: .85rem;
}
.trabajo__hora--sin { background: var(--fondo); color: var(--tenue); font-weight: 400; }
.trabajo__que { min-width: 0; }
.trabajo__que b { display: block; color: var(--tinta); }
.trabajo__que > span { display: block; font-size: .83rem; color: var(--tenue); }
.trabajo__hecho { grid-column: 1 / -1; }

.etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--fondo); color: var(--suave); border: 1px solid var(--linea);
}
/* Los subtítulos de las listas son HIJOS DIRECTOS, con `>`. Sin el `>`, la regla también
   alcanzaba a la pastilla que va dentro del <b> del título, le ganaba a `.etiqueta` por
   especificidad y la pastilla se estiraba de lado a lado. */
.etiqueta--gasto { background: var(--amarillo-aire); color: #7a5c00; border-color: #f0dca0; }
.etiqueta--debe { background: var(--rojo-aire); color: var(--rojo); border-color: #f3cfcc; }
.etiqueta--ok { background: #e9f5ee; color: var(--verde); border-color: #c4e3d2; }

/* ── Formularios ──────────────────────────────────────────────── */
.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: .85rem; font-weight: 600; color: var(--tinta); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 13px; font: inherit;
  /* 16px exactos: con menos, Safari en iPhone hace zoom al tocar el campo y descoloca
     la pantalla entera. */
  font-size: 16px;
  border: 1px solid var(--linea); border-radius: 11px; background: var(--papel); color: var(--tinta);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--turquesa); outline-offset: 1px; border-color: var(--turquesa);
}
.campo .ayuda { display: block; font-size: .78rem; font-weight: 400; color: var(--tenue); margin-top: 4px; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Un campo que se copia. El texto va en un input de solo lectura y no en un <p> para que
   el que no tenga portapapeles pueda seleccionarlo con dos toques, como cualquier campo. */
.copiar { display: flex; gap: 8px; align-items: stretch; }
.copiar input { flex: 1; min-width: 0; }
.copiar .boton { flex: 0 0 auto; white-space: nowrap; }

/* `hidden` tiene que ganar siempre. La regla del navegador es `[hidden]{display:none}`,
   que pierde contra cualquier selector con clase: `.campo .ayuda{display:block}` la
   tumbaba y los avisos escondidos salían todos a la vez. */
[hidden] { display: none !important; }

/* ── Avisos ───────────────────────────────────────────────────── */
.aviso { padding: 11px 14px; border-radius: 11px; font-size: .9rem; margin-bottom: 13px; }
.aviso--mal { background: var(--rojo-aire); color: var(--rojo); }
.aviso--bien { background: #e9f5ee; color: var(--verde); }
.aviso--ojo { background: var(--amarillo-aire); color: #7a5c00; }

.guia { color: var(--tenue); font-size: .88rem; }
.vacio { text-align: center; padding: 28px 14px; color: var(--tenue); }
.vacio b { display: block; color: var(--tinta); margin-bottom: 4px; }

/* ── El mensaje del mes ───────────────────────────────────────── */
.mensaje {
  background: var(--tinta); color: #e8f1f0; border-radius: var(--radio);
  padding: 15px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .85rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  margin-bottom: 11px;
}

/* ── Fotos ────────────────────────────────────────────────────── */
.medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.medios a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.medios img, .medios video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--fondo); }

/* ── Entrar ───────────────────────────────────────────────────── */
.entrar { max-width: 380px; margin: 0 auto; padding: 48px 20px; }
.entrar__marca { text-align: center; margin-bottom: 28px; }
.entrar__marca b { display: block; font-size: 1.6rem; color: var(--tinta); letter-spacing: -.02em; }
.entrar__marca span { color: var(--tenue); font-size: .9rem; }

/* ── Tabla del resumen del cliente ────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); padding: 0 8px 8px 0; font-weight: 600; }
.tabla td { padding: 9px 8px 9px 0; border-top: 1px solid var(--linea); color: var(--suave); vertical-align: top; }
.tabla td:last-child, .tabla th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.tabla tr:last-child td { font-weight: 650; color: var(--tinta); border-top-width: 2px; }
/* En el móvil una tabla de cinco columnas no cabe: se deja rodar en horizontal en vez
   de aplastar el texto hasta hacerlo ilegible. */
.tabla-rueda { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 640px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .app { padding-bottom: 32px; }
  .nav { position: static; border-top: 0; border-bottom: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 16px; }
  .nav a { flex-direction: row; gap: 7px; font-size: .9rem; min-height: 50px; }
  .flotante { bottom: 20px; }
}

/* ── Cobros ───────────────────────────────────────────────────── */

/* Pasar de mes. Las flechas son grandes a propósito: se usan con el pulgar y en pie, no
   sentado delante de un ratón. */
.meses { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.meses b { font-size: 1.05rem; text-transform: capitalize; }
.meses .boton { min-width: 56px; }

.importe--ok { color: var(--verde); }

/* Cada cliente, plegado. Se abre el que toca y los demás no estorban: con veinte
   clientes, verlo todo desplegado a la vez no es información, es un muro. */
.cobro { border-top: 1px solid var(--linea); }
.cobro:first-of-type { border-top: 0; }
.cobro__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px; cursor: pointer; list-style: none;
}
.cobro__cabeza::-webkit-details-marker { display: none; }
.cobro__cabeza::after {
  content: '⌄'; color: var(--tenue); font-size: 1.1rem; line-height: 1; transition: transform .15s;
}
.cobro[open] .cobro__cabeza::after { transform: rotate(180deg); }
.cobro__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cobro__quien b { font-weight: 600; }
.cobro__quien span { font-size: .82rem; color: var(--tenue); }
.cobro__cabeza:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; border-radius: 8px; }
.cobro__dentro { padding: 2px 0 16px; display: flex; flex-direction: column; gap: 10px; }
.cobro__forma { margin: 0; }
.cobro__forma .campo { margin-bottom: 10px; }

/* El desglose. Los importes a la derecha y con cifras de ancho fijo para que se puedan
   sumar con la vista, que es lo que se hace con una cuenta. */
.cuenta { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cuenta td { padding: 7px 0; border-bottom: 1px solid var(--linea); }
.cuenta__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.cuenta tfoot td { border-bottom: 0; padding-top: 10px; }

.caja--cobrada { background: #f7faf8; }

/* El día de hoy en la semana, marcado sin gritar. */
.caja--hoy { border-color: var(--turquesa); box-shadow: 0 0 0 1px var(--turquesa); }

/* La barra del dueño: desde dónde está mirando. Sale siempre arriba y en un tono distinto
   porque ver los datos de otro negocio no puede parecer lo mismo que ver los tuyos. */
.negocio {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--amarillo-aire); border: 1px solid #f0dca0; border-radius: 11px;
  padding: 8px 12px; margin-bottom: 13px;
}
.negocio label { font-size: .8rem; font-weight: 600; color: #7a5c00; }
.negocio select { flex: 1; min-width: 120px; padding: 8px 10px; font: inherit; font-size: 16px;
  border: 1px solid #f0dca0; border-radius: 9px; background: var(--papel); color: var(--tinta); }

/* La previsión del mes. En turquesa flojo y no en rojo ni verde: no es dinero que te
   deban ni dinero que hayas cobrado, y confundirla con lo primero llevaría a reclamarle
   a alguien un trabajo que todavía no has hecho. */
.prevision {
  background: #eaf6f5; border: 1px solid #bfe3e1; border-radius: var(--radio);
  padding: 13px 15px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 3px;
}
.prevision b { color: var(--turquesa-hondo); font-size: 1.02rem; }
.prevision span { font-size: .84rem; color: var(--tenue); }
.prevision__ojo { color: #7a5c00; }

/* Elegir entre dos cosas. Enlaces y no botones: la dirección dice en cuál estás, así el
   botón de atrás del móvil hace lo que se espera. */
.pestanas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 13px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 4px;
}
.pestanas a {
  text-align: center; padding: 10px 8px; border-radius: 9px; text-decoration: none;
  font-weight: 600; font-size: .92rem; color: var(--suave);
}
.pestanas a.activa { background: var(--papel); color: var(--turquesa-hondo); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pestanas a:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 1px; }

/* El visor de fotos del cliente. Se abre con `:target` y se cierra volviendo a «#», así
   que para ver una foto no hace falta que se ejecute nada. */
.camara {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--turquesa-aire, #eaf6f5); color: var(--turquesa-hondo);
  font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.visor { display: none; }
.visor:target {
  display: flex; position: fixed; inset: 0; z-index: 60;
  align-items: center; justify-content: center; padding: 16px;
}
.visor__fuera { position: absolute; inset: 0; background: rgba(15, 32, 31, .62); }
.visor__caja {
  position: relative; background: var(--papel); border-radius: var(--radio);
  padding: 16px; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.45);
}
.visor__cabeza { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.visor__cerrar {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; background: var(--fondo); color: var(--suave); text-decoration: none; font-size: 1rem;
}
.visor__cerrar:focus-visible, .camara:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

/* Las miniaturas de lo ya subido: pequeñas a propósito. Están para reconocer la foto de
   un vistazo y no volver a subirla, no para mirarla. */
.medios--peque { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pestanas--tres { grid-template-columns: repeat(3, 1fr); }
.pestanas--tres a { font-size: .86rem; padding: 10px 4px; }

/* La lupa: la foto grande, encima de todo. Se cierra tocando donde sea, también encima de
   la propia foto —por eso la imagen no recibe toques— o con la ✕. */
.lupa { display: none; }
.lupa:target {
  display: flex; position: fixed; inset: 0; z-index: 80;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 22, 21, .92);
}
.lupa__fuera { position: absolute; inset: 0; }
.lupa__media {
  position: relative; max-width: 100%; max-height: 88vh; border-radius: 10px;
  object-fit: contain; pointer-events: none;
}
/* El vídeo sí tiene que poder tocarse: si no, no hay forma de darle al play. */
.lupa video.lupa__media { pointer-events: auto; }
.lupa__cerrar {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--tinta); text-decoration: none; font-size: 1.1rem;
}
.lupa__cerrar:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; }
.caja--ojo { border-color: var(--amarillo); background: var(--amarillo-aire); }

/* El pie de la página del cliente. Discreto y lejos de los importes: es un crédito de
   quién ha hecho la herramienta, no el membrete de quien cobra. */
.pie {
  margin: 18px 2px 4px; padding-top: 16px; border-top: 1px solid var(--linea);
  font-size: .82rem; color: var(--tenue); text-align: center; line-height: 1.55;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pie b { color: var(--suave); font-weight: 600; margin-bottom: 2px; }
.pie a { color: var(--turquesa-hondo); }
.pie__wa { margin-top: 10px; text-decoration: none; }
.pie__aviso { display: block; margin-bottom: 12px; font-size: .75rem; color: var(--suave); opacity: .85; }