/* ==========================================================================
   Papelito · Design tokens
   Los colores están muestreados de los mockups de referencia, no estimados.
   ========================================================================== */

:root {
  /* --- Marca -------------------------------------------------------------
     Ojo: hay DOS rosas y es a propósito.
     `--pink` es el de la portada, aprobado con ese mockup.
     `--marca` es el del panel, muestreado del concepto nuevo — bastante más
     saturado. Se mantienen separados para no restilar una pantalla ya cerrada
     sin decisión de por medio. */
  --pink:            #ED5880;  /* acento del título de apertura              */
  --pink-deep:       #E55985;
  --pink-press:      #CE4270;
  --plum:            #8B1E41;  /* mitad oscura del título de apertura        */

  --marca:           #F5155B;  /* logo, #001, engranaje, acentos del panel   */
  --marca-suave:     #FB6E96;  /* relleno del botón Imprimir                 */
  --marca-press:     #E23A6C;
  --marca-tenue:     #EC8FAB;  /* pie de página                              */

  /* --- Tinta ------------------------------------------------------------ */
  --ink:             #0F0A0C;  /* títulos, texto de ticket, labels           */
  --ink-soft:        #9E7A79;  /* fecha y hora sobre el papel                */
  --ink-mute:        #605A66;  /* subtítulos y textos secundarios            */

  /* --- Fondos ----------------------------------------------------------- */
  --bg-intro-hi:     #FEF2F5;  /* centro del degradé de apertura             */
  --bg-intro-lo:     #FCD6E0;  /* bordes del degradé de apertura             */
  --bg-app:          #FDEBF1;  /* fondo exterior del panel                   */
  --panel:           #FEF7F8;  /* la tarjeta grande                          */
  /* La columna es una superficie de VIDRIO teñida de rosa, más saturada que el
     panel. Antes era casi blanca y quedaba al mismo valor que el papel del
     ticket: no había manera de distinguir la tarjeta de su columna.
     Ahora el orden de claridad es explícito — papel > panel > columna — así el
     ticket se lee como papel apoyado sobre una superficie, y no como un
     rectángulo del mismo color. */
  --col-bg:          rgba(250, 214, 228, 0.42);
  --col-borde:       rgba(255, 255, 255, 0.75);
  --paper:           #FFFDFC;  /* papel del ticket: lo más claro de la escena */
  --paper-edge:      #F5E9E5;

  /* --- Columnas: Pendientes · Haciendo · Listo --------------------------- */
  --col-pend:        #ED5880;
  --col-pend-bg:     #FDE7EE;
  --col-doing:       #E9964A;
  --col-doing-bg:    #FDECDC;
  --col-done:        #5B8C69;
  --col-done-bg:     #E9F1EA;

  /* --- Urgencia: Baja · Media · Alta -------------------------------------
     No reusa los colores de columna a propósito. Si urgencia y estado hablan
     el mismo idioma cromático, un ticket "Alta" en "Listo" se lee contradictorio.
     La urgencia va en escala de intensidad, no de color. */
  --urg-baja:        #9AA0A6;
  --urg-baja-bg:     #F0F1F2;
  --urg-media:       #B33300;
  --urg-media-bg:    #FEE5D7;
  --urg-media-dot:   #F0863C;
  --urg-alta:        #D8355F;
  --urg-alta-bg:     #FCE4EA;

  /* --- Superficie ------------------------------------------------------- */
  --line:            rgba(139, 30, 65, 0.08);
  --shadow-sm:       0 1px 2px rgba(139, 30, 65, 0.06);
  --shadow-md:       0 4px 16px -4px rgba(139, 30, 65, 0.14);
  --shadow-lg:       0 18px 48px -12px rgba(139, 30, 65, 0.22);
  --focus:           0 0 0 3px rgba(237, 88, 128, 0.35);

  /* --- Radios ----------------------------------------------------------- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-pill: 999px;

  /* --- Ritmo (escala de 4) ---------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;

  /* --- Motion ----------------------------------------------------------- */
  /* Una sola curva para todo lo que "se acomoda". Papelito no rebota:
     se asienta. El overshoot queda reservado para el aterrizaje del ticket. */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:   160ms;
  --t-base:   320ms;
  --t-settle: 760ms;
  --t-travel: 1100ms;
  --t-beat:   3300ms;   /* compás de lectura del éxito del primer ticket */

  /* --- Tipografía --------------------------------------------------------
     Quicksand en todo, incluida la metadata del ticket. El concepto del panel
     no usa monoespaciada en ningún lado. Tope 700, así que el título no puede
     apoyarse en el peso: gana presencia por tamaño y por el corte de color. */
  --font-ui: 'Quicksand', system-ui, sans-serif;

  --w-title: 700;
  --w-bold:  700;
  --w-med:   600;
  --w-body:  500;   /* Quicksand en 400 se afina de más sobre fondo rosa */
  --title-tracking: -0.015em;

  /* --- La escala del ticket ----------------------------------------------
     UN SOLO ancho de ticket para toda la app: el que sale de la boca y el que
     vive en una columna son el mismo objeto y miden lo mismo. Si el ticket se
     encoge al salir y crece al llegar, deja de ser una cosa y pasa a ser un
     dibujo de una cosa.

     La dirección de la dependencia importa: manda el TICKET y la impresora se
     deriva de él, no al revés. La ranura mide 55.1% del ancho de la impresora,
     así que la impresora tiene que medir lo necesario para que su boca sea
     exactamente del ancho del ticket.

     Se acota por vw y por vh: en pantallas anchas y bajas, si sólo se mirara el
     ancho, la impresora de la portada no entraría a lo alto. */
  /* Ahora que no arrastra a la impresora, el ticket se dimensiona sólo por
     ancho. El 17vw es lo que deja lugar a tres columnas más la impresora sin
     que el panel se salga de pantalla. */
  --ticket-w: clamp(175px, 17vw, 290px);

  /* La impresora YA NO se deriva del ticket.
     Atarla al ticket obligaba a que su boca midiera exactamente lo que mide el
     papel, y eso la volvía enorme: no entraba junto a tres columnas y empujaba
     el panel fuera de pantalla. Pedro aceptó que el papel salga más ancho que
     la boca —como en su propio concepto, donde el ticket mide 300 y la boca
     209—, así que cada una se dimensiona por su cuenta.
     Lo que SÍ se mantiene es que el ticket mide lo mismo en la boca que en la
     columna: eso es lo que lo hace un objeto y no un dibujo. */
  --impresora-w:      clamp(240px, min(28vw, 40vh), 400px);   /* portada, frontal */
  --impresora-side-w: clamp(160px, min(19vw, 36vh), 300px);   /* panel, 3/4       */

  /* --- Recorte del ticket ------------------------------------------------
     Se reconstruye en CSS y no se usa el PNG, para que escale a cualquier
     tamaño de ticket sin deformarse.
     Medidos sobre el concepto nuevo del panel: dientes de ~13x4 px en un ticket
     de 300 de ancho — mucho más finos que los del Ticker_modelo original
     (28.6x13 sobre 571). A este tamaño el redondeo del diente queda sutil, que
     es exactamente como se ve en la referencia. */
  --zig-w: 13px;
  --zig-h: 5px;
}