/* Estilo de la pantalla de pedido. Va en su propio fichero, y no en un <style>, para que
   la Content-Security-Policy de `app/_headers` pueda prohibir el estilo en linea. */
  :root{
    --fondo:#f4f1ea; --tarjeta:#fffdf8; --tinta:#14211e; --tinta2:#4a5a54; --raya:#d4ccbd;
    --acento:#0f756d; --ambar:#9a4a06; --ambar-suave:#fdf0d5; --rojo:#a52218; --rojo-suave:#fae3e1;
    --verde:#1c6b3f;
    --tipo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{ --fondo:#0f1513; --tarjeta:#161f1c; --tinta:#eef2f0; --tinta2:#9fb0aa; --raya:#25322e;
           --acento:#4fd1c0; --ambar:#e8a340; --ambar-suave:#2b2008; --rojo:#ef6b5e; --rojo-suave:#331613;
           --verde:#5fd08a; }
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--fondo); color:var(--tinta); font-family:var(--tipo);
    font-size:17px; line-height:1.45; -webkit-text-size-adjust:100%;
    padding:14px 16px calc(124px + env(safe-area-inset-bottom));
    max-width:720px; margin:0 auto;
  }
  header{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    border-bottom:2px solid var(--tinta); padding-bottom:8px; margin-bottom:14px}
  h1{font-size:21px; margin:0; letter-spacing:-.01em}
  .quien{font-size:13px; color:var(--tinta2); font-family:var(--mono); text-align:right}
  h2{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta2);
     margin:22px 0 8px; font-weight:600}

  button{font:inherit; font-weight:600; border:2px solid var(--tinta); border-radius:12px;
    background:var(--tarjeta); color:var(--tinta); padding:12px 16px; cursor:pointer;
    min-height:48px; touch-action:manipulation}
  button:active{transform:translateY(1px)}
  button:disabled{opacity:.4; cursor:not-allowed}
  button:focus-visible{outline:3px solid var(--acento); outline-offset:2px}
  .principal{background:var(--acento); border-color:var(--acento); color:#fff}
  .grande{width:100%; min-height:58px; font-size:19px}
  #dictar.grabando{background:var(--rojo); border-color:var(--rojo); color:#fff}

  select,input,textarea{width:100%; font:inherit; padding:12px; border-radius:12px;
    border:1px solid var(--raya); background:var(--tarjeta); color:var(--tinta)}
  textarea{min-height:120px; resize:vertical}
  .fila{display:flex; gap:8px; align-items:center; margin-top:8px}
  .fila > button{flex:1 1 auto}
  .fila > button.estrecho{flex:0 0 auto}

  .tarjeta{background:var(--tarjeta); border:1px solid var(--raya); border-left:5px solid var(--acento);
    border-radius:12px; padding:12px 14px; margin-bottom:10px}
  .tarjeta.ambigua,.tarjeta.revisar{border-left-color:var(--ambar); background:var(--ambar-suave)}
  .tarjeta.no_encontrada{border-left-color:var(--rojo); background:var(--rojo-suave)}
  /* El color solo no basta para distinguir ámbar de rojo: cada tarjeta sin resolver
     lleva además un rótulo con palabras, que es lo que se lee de un vistazo y lo que
     funciona para quien no distingue esos dos colores. */
  .rotulo{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    font-weight:700; border-radius:999px; padding:2px 9px; margin-bottom:6px; color:#fff}
  .rotulo.elegir{background:var(--ambar)}
  .rotulo.fuera{background:var(--rojo)}
  .dictado{font-style:italic; color:var(--tinta2); font-size:15px; margin-bottom:6px}
  .titulo{font-weight:600; line-height:1.3}
  .codigo{font-family:var(--mono); font-size:13px; color:var(--tinta2)}
  .dinero{font-family:var(--mono); white-space:nowrap}
  .motivo{color:var(--ambar); font-size:15px; margin:6px 0}
  .tarjeta.no_encontrada .motivo{color:var(--rojo)}
  .cantidad{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
  .cantidad button{min-width:54px; min-height:54px; font-size:22px; padding:0}
  .cantidad input{width:88px; text-align:center; font-family:var(--mono); font-size:19px}
  .cantidad .dinero{margin-left:auto}
  .opciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .opciones button{flex:1 1 44%; min-height:62px; text-align:left; font-size:15px; font-weight:500; line-height:1.25}
  .opciones button b{display:block; font-family:var(--mono); font-size:13px; font-weight:700}

  .barra{position:fixed; left:0; right:0; bottom:0; background:var(--fondo);
    border-top:2px solid var(--tinta); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; gap:12px; align-items:center; z-index:5}
  .barra .total{flex:1 1 auto; min-width:0}
  .barra .cifra{font-family:var(--mono); font-size:22px; font-weight:700; display:block}
  .barra small{display:block; color:var(--tinta2); font-size:12px}

  .etiqueta{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    background:var(--verde); color:#fff; border-radius:999px; padding:2px 8px; font-weight:700; margin-left:6px}
  .aviso{border-left:3px solid var(--ambar); padding:9px 12px; background:var(--ambar-suave);
    border-radius:0 8px 8px 0; font-size:15px; margin:10px 0}
  .aviso.error{border-left-color:var(--rojo); background:var(--rojo-suave)}
  .aviso.hecho{border-left-color:var(--verde); background:var(--tarjeta)}
  .parcial{color:var(--tinta2); font-style:italic; min-height:1.4em; margin-top:6px; font-size:15px}
  .oculto{display:none !important}
  .metricas{font-family:var(--mono); font-size:12px; color:var(--tinta2); margin-top:10px}