/* Estilo «Verde y natural» (natural), el mismo que pintó la
   muestra que eligió. Generado por el hub; no editar a mano. */
:root{--fondo:#f4f7f0;--sup:#fff;--texto:#23331f;--tenue:#7d9276;--acento:#3f7c3a;--sobre-acento:#fff;--borde:#dfe8da;--radio:12px;}

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { min-height: 100vh; }
  .hoja { width: 100%; min-height: 100vh; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; }
  header { display: flex; align-items: center; justify-content: space-between; }
  nav { display: flex; }
  main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .lista { list-style: none; }
  .lista li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; }
  /* 🔴 `flex:1` + `min-height:0` + `overflow:hidden`: el cuerpo absorbe el aire
     que sobra Y cede el que falta. Sin lo segundo, un estilo de letra grande
     empuja el total y los botones fuera del marco — y un botón cortado no se
     lee como un estilo, se lee como algo roto. Se vio en «papel». */
  .lista, .calendario, .barras, .campos, .ticket, .renglones, .ficha, .historial, .mosaico, .parrilla { flex: 1; min-height: 0; overflow: hidden; }
  .total { display: flex; align-items: center; justify-content: space-between; }
  .acciones { display: flex; }
  button { border: 0; font: inherit; cursor: pointer; }

  /* ── lo propio de cada pantalla, contra los tokens del estilo ──────────── */

  /* Las filas se reparten el alto en vez de apilarse arriba: si no, el
     calendario deja un tercio en blanco bajo la última semana — el mismo
     desperdicio de foto que ya se corrigió en la lista, otra vez. */
  .calendario { display: grid; grid-template-columns: repeat(7, 1fr);
                grid-template-rows: auto repeat(6, 1fr);
                gap: 6px; margin-top: 20px; }
  .dow { text-align: center; font-size: 12px; color: var(--tenue); padding-bottom: 4px; }
  .dia { position: relative; display: flex; align-items: center; justify-content: center;
         min-height: 0; font-size: 17px; background: var(--sup);
         border: 1px solid var(--borde); border-radius: var(--radio); }
  .dia.fuera { opacity: .25; }
  .dia.hoy { border: 2px solid var(--acento); font-weight: 700; }
  .dia.marcado { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
  .dia i { position: absolute; bottom: 7px; width: 6px; height: 6px;
           border-radius: 50%; background: var(--sobre-acento); }

  .lista.fichas li { grid-template-columns: 56px 1fr auto; }
  .ini { display: flex; align-items: center; justify-content: center;
         width: 40px; height: 40px; border-radius: 50%; font-size: 14px;
         background: var(--acento); color: var(--sobre-acento); }
  .n em { display: block; font-size: 12px; font-style: normal;
          color: var(--tenue); margin-top: 2px; }
  .lista.horas li.libre { opacity: .45; }

  .cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .cifra { padding: 18px; background: var(--sup);
           border: 1px solid var(--borde); border-radius: var(--radio); }
  .cifra span { display: block; font-size: 13px; color: var(--tenue); }
  .cifra b { display: block; font-size: 28px; margin: 6px 0 2px; }
  .cifra i { font-size: 12px; font-style: normal; color: var(--acento); }
  .barras { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; }
  .barras span { flex: 1; background: var(--acento); min-height: 4px;
                 border-radius: var(--radio) var(--radio) 0 0; }

  /* El formulario reparte el aire sobrante entre las filas en vez de dejarlo
     todo abajo, por lo mismo que el calendario: media foto vacía no se lee como
     una pantalla de verdad. Y al revés, cuando la letra es grande las filas se
     juntan hasta el hueco mínimo antes de empujar nada fuera del marco. */
  .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
            align-content: space-between; margin-top: 24px; }
  .et { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 7px; }
  .campo { display: block; padding: 15px 14px; font-size: 16px; background: var(--sup);
           border: 1px solid var(--borde); border-radius: var(--radio); }
  .campo.pendiente { color: var(--tenue); }
  .campo.area { min-height: 92px; }
  .ancho { grid-column: 1 / -1; }
  .opcion { display: flex; align-items: center; font-size: 15px; }
  /* La palomita se dibuja con dos bordes girados y no con un carácter: escrita
     como glifo sale de otro tamaño en «papel» o en «retro», que son los estilos
     con fuente propia — y ahí una casilla marcada deja de parecerlo. */
  .casilla { position: relative; flex: none; width: 20px; height: 20px;
             margin-right: 11px; background: var(--acento);
             border: 1px solid var(--acento); border-radius: 4px; }
  .casilla::after { content: ''; position: absolute; left: 6px; top: 2px;
                    width: 5px; height: 10px; transform: rotate(45deg);
                    border: solid var(--sobre-acento); border-width: 0 2px 2px 0; }

  /* El comprobante es un documento dentro de la pantalla, no una lista más: por
     eso tiene marco propio y sus renglones NO reusan `.lista`. En los estilos
     que pintan la lista como tarjetas sueltas, un ticket de tarjetas apiladas
     deja de parecer un ticket. */
  .ticket { display: flex; flex-direction: column; margin-top: 22px; padding: 22px 24px;
            background: var(--sup); border: 1px solid var(--borde);
            border-radius: var(--radio); }
  .ticket-cab { display: flex; align-items: baseline; justify-content: space-between;
                padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
  .ticket-cab em { font-style: normal; font-size: 13px; color: var(--tenue); }
  .renglones { list-style: none; padding-top: 6px; }
  .renglones li { display: grid; grid-template-columns: 34px 1fr auto;
                  align-items: center; padding: 11px 0; font-size: 15px; }
  .sumas { padding-top: 12px; border-top: 1px solid var(--borde); }
  .sumas div { display: flex; justify-content: space-between;
               padding: 5px 0; font-size: 15px; color: var(--tenue); }
  .sumas .cobrado { margin-top: 8px; padding-top: 12px; color: var(--texto);
                    border-top: 1px solid var(--borde); }
  .sumas .cobrado b { font-size: 24px; }
  .sello { margin-top: 14px; padding-top: 14px; text-align: center; font-size: 13px;
           color: var(--tenue); border-top: 1px dashed var(--borde); }

  .ficha { display: flex; flex-direction: column; margin-top: 22px; }
  .ficha-cab { display: flex; gap: 20px; padding: 20px; background: var(--sup);
               border: 1px solid var(--borde); border-radius: var(--radio); }
  .ini.grande { width: 72px; height: 72px; font-size: 26px; flex: none; }
  .datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; flex: 1; }
  .datos span { display: block; font-size: 12px; color: var(--tenue); }
  .datos b { font-size: 15px; }
  .apartado { font-size: 15px; margin: 24px 0 2px; }
  .historial { list-style: none; }
  .historial li { display: grid; grid-template-columns: 78px 1fr auto; align-items: center;
                  padding: 16px 2px; font-size: 15px; border-bottom: 1px solid var(--borde); }

  .mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
             gap: 12px; margin-top: 22px; }
  /* La tarjeta va del color del lienzo y el hueco de la foto del de las
     superficies, y no al revés: con las dos del mismo tono la cuadrícula se ve
     como una pantalla a medio cargar en vez de como un catálogo. */
  .pieza { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
           padding: 14px; background: var(--fondo); border: 1px solid var(--borde);
           border-radius: var(--radio); }
  /* El hueco de la foto va marcado con la inicial y un trazo discontinuo: la
     muestra se genera sin conexión y no puede traer imágenes, y un recuadro
     liso se lee como algo que falta en vez de como una foto por poner. */
  .miniatura { flex: 1; min-height: 40px; display: flex; align-items: center;
               justify-content: center; margin-bottom: 11px; font-size: 30px;
               color: var(--tenue); background: var(--sup);
               border: 1px dashed var(--borde); border-radius: var(--radio); }
  .pieza b { font-size: 15px; }
  .precio { font-size: 14px; margin-top: 3px; }
  .pieza.agotado { opacity: .55; }

  .parrilla { display: grid; grid-template-columns: 52px repeat(5, 1fr);
              grid-template-rows: auto repeat(7, 1fr); gap: 6px; margin-top: 20px; }
  .hora { display: flex; align-items: center; font-size: 12px; color: var(--tenue); }
  /* Sólo lo lleno se pinta con el acento. Con las treinta y cinco casillas del
     mismo color la parrilla se lee como una mancha y deja de verse lo único que
     se mira aquí: qué hueco queda libre. */
  .bloque { display: flex; flex-direction: column; justify-content: center;
            min-height: 0; overflow: hidden; padding: 6px 9px; font-size: 13px;
            background: var(--sup); border: 1px solid var(--borde);
            border-left: 4px solid var(--acento); border-radius: var(--radio); }
  .bloque em { display: block; font-style: normal; font-size: 11px; color: var(--tenue); }
  .bloque.lleno { background: var(--acento); color: var(--sobre-acento);
                  border-color: var(--acento); }
  .bloque.lleno em { color: var(--sobre-acento); opacity: .8; }
  .hueco { border: 1px dashed var(--borde); border-radius: var(--radio); opacity: .7; }


  body { background:#f4f7f0; color:#23331f; font-family:'Trebuchet MS',sans-serif; }
  .hoja { padding:40px 44px; }
  header { padding-bottom:20px; }
  .marca { font-size:19px; font-weight:600; color:#3f7c3a; }
  nav { gap:20px; font-size:14px; color:#7d9276; }
  main { padding-top:26px; }
  h1 { font-size:34px; color:#2c5a28; }
  .sub { color:#7d9276; font-size:15px; margin-top:8px; }
  .lista { margin-top:28px; }
  .lista li { padding:18px 20px; margin-bottom:9px; background:#fff;
              border-left:5px solid #7cb342; border-radius:0 12px 12px 0; font-size:16px; }
  .q { color:#9bb094; }
  .deuda { border-left-color:#e8a33d; }
  .total { margin-top:26px; padding:20px 22px; background:#3f7c3a; color:#fff; border-radius:14px; }
  .total b { font-size:27px; }
  .acciones { gap:12px; margin-top:30px; }
  button { padding:15px 28px; border-radius:999px; font-size:15px; }
  .primario { background:#7cb342; color:#fff; }
  .secundario { background:#e6eee2; color:#3f7c3a; }