/* ---------------------------------------------------------------------------
   ARCADAS · la selección de dientes como en la fase ADMINISTRATION de CEREC
   ---------------------------------------------------------------------------
   Pedido textual de Robmar sobre una captura de Primescan: las dos arcadas
   renderizadas desde arriba en el centro, el diente elegido en amarillo, el
   panel INDICATIONS flotando a la derecha, CASE DETAILS plegado debajo, y
   las fases arriba como pestañas biseladas con la activa en azul.

   Colores leídos de la captura: lienzo gris #DFE2E6 → #CBCFD5, pestaña
   activa var(--ar-azul), diente elegido #F7C94A → #D9921B, texto del panel var(--ar-texto).

   Va en su propio archivo y no dentro de rx.css a propósito: el módulo es
   arcadas.js + arcadas.css, se carga solo en la fase Rx, y no se mezcla con
   la carta lineal de iTero, que sigue existiendo para la vista de solo
   lectura.

   Reglas duras de la casa, aunque cambie la paleta: nada por debajo de 12px,
   44px de mínimo táctil, y :hover solo donde hay ratón.
   --------------------------------------------------------------------------- */

.rx-cerec{background:linear-gradient(180deg,var(--ar-lienzo-1) 0%,var(--ar-lienzo-2) 100%);
  border-radius:14px;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 268px;align-items:stretch;
  min-height:700px;overflow:hidden}
/* En columna: el aviso «elige un diente» se ponía AL LADO del dibujo y lo
   dejaba a la mitad (medido en 390: dientes de 23 px con el mismo viewBox). */
.rx-cerec-lienzo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 6px 10px 12px;min-width:0}
/* El envoltorio del dibujo es hijo de un flex y se encogia al ancho intrinseco
   del SVG (300 px): medido, salia a 300 en un lienzo de 770. Ancho explicito. */
.rx-cerec-lienzo > *{flex:1 1 auto;width:100%;max-width:780px}
.rx-arcadas{width:100%;max-width:780px;height:auto;display:block;
  touch-action:manipulation;filter:drop-shadow(0 18px 22px rgba(30,30,40,.22))}

/* ---------- las piezas ------------------------------------------------- */
.ar-d{cursor:pointer;outline:none}
.rx-arcadas.solo-lectura .ar-d{cursor:default;pointer-events:none}
.ar-hit{fill:transparent;stroke:none}
.ar-c{fill:url(#ar-esmalte);stroke:#B9B2A3;stroke-width:1;
  transition:stroke 120ms cubic-bezier(.2,.6,.3,1)}
.ar-luz{fill:#FFFFFF;opacity:.42;pointer-events:none}
.ar-s{fill:none;stroke:#8E877A;stroke-width:1.1;opacity:.55;stroke-linecap:round;
  pointer-events:none}
.ar-d.on .ar-c{fill:url(#ar-elegido);stroke:#B8771A}
.ar-d.on .ar-s{stroke:#8A5A10;opacity:.7}
.ar-d.on .ar-luz{opacity:.5}
.ar-d.estado .ar-c{fill:url(#ar-estado);stroke:#9A9A9A;stroke-dasharray:3 2}
.ar-hit{outline:none}
.ar-hit:focus-visible ~ .ar-c{stroke:var(--ar-azul);stroke-width:2.6}
/* 17 unidades de viewBox = 12 px reales con el lienzo a 540 px de ancho */
.ar-n{font-family:'Plex',ui-monospace,monospace;font-size:17px;fill:#3B3436;
  paint-order:stroke;stroke:#FFFFFF;stroke-width:3px;stroke-opacity:.55;
  pointer-events:none;user-select:none;font-variant-numeric:tabular-nums}
.ar-n.on{fill:#7A4E0A;font-weight:600;stroke-opacity:.8}
.ar-d.fuera{opacity:.18;pointer-events:none}
.ar-n.fuera{opacity:.18}
.rx-cerec.sin-nums .ar-n{display:none}

/* ---------- INDICATIONS: el panel flotante de la derecha ---------------- */
/* La columna derecha: INDICATIONS arriba, CASE DETAILS debajo. El panel
   tiene scroll propio para no estirar el lienzo — con once restauraciones
   medía 880 px y dejaba las arcadas perdidas en un gris enorme. */
.rx-cerec-der{display:flex;flex-direction:column;gap:12px;margin:16px 16px 14px 0;
  min-height:0}
.rx-flot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--ar-panel);
  border:1px solid var(--ar-linea);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  font-size:.8125rem;color:var(--ar-texto)}
.rx-flot-cab{display:flex;align-items:center;gap:8px;padding:9px 10px;
  border-bottom:1px solid var(--ar-linea-2);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ar-suave);font-weight:600}
.rx-flot-cab svg{width:16px;height:16px;color:var(--ar-suave);flex:0 0 auto}
.rx-flot-perfil{padding:8px 10px 6px;border-bottom:1px solid var(--ar-linea-2)}
.rx-flot-perfil select{width:100%;min-height:34px;font:400 16px 'Inter',system-ui,sans-serif;
  padding:4px 8px;border:1px solid var(--ar-borde);border-radius:10px;background:var(--ar-campo);
  color:var(--ar-texto)}
.rx-flot-cuerpo{display:grid;grid-template-columns:44px 1fr;min-height:0;flex:1 1 auto;
  max-height:540px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* La tira de iconos de la izquierda: restauración simple · estado del diente */
.rx-flot-tira{border-right:1px solid var(--ar-linea-2);background:var(--ar-tira);
  display:flex;flex-direction:column;padding-top:6px}
.rx-flot-tira button{width:44px;height:44px;margin-bottom:8px;background:none;border:0;
  border-left:3px solid transparent;cursor:pointer;color:var(--ar-apagado);
  display:flex;align-items:center;justify-content:center}
.rx-flot-tira button svg{width:18px;height:18px}
.rx-flot-tira button[aria-pressed="true"]{color:var(--ar-azul-tx);
  border-left-color:var(--ar-azul);background:var(--ar-panel)}
.rx-flot-grupo{padding:8px 12px 4px}
.rx-flot-grupo[hidden]{display:none}
.rx-flot-t{font-size:.75rem;font-weight:600;color:var(--ar-texto);margin:6px 0 4px}
/* Radios: el círculo azul relleno del original, y 36 px de alto por fila */
.rx-radio{display:flex;align-items:center;gap:9px;min-height:36px;cursor:pointer;
  font-size:.8125rem;color:var(--ar-texto-2);padding:0 2px}
.rx-radio input{appearance:none;-webkit-appearance:none;width:15px;height:15px;
  border:1.5px solid var(--ar-borde-2);border-radius:50%;margin:0;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;background:var(--ar-campo)}
.rx-radio input::before{content:"";width:8px;height:8px;border-radius:50%;
  background:transparent;transition:background-color 100ms cubic-bezier(.2,.6,.3,1)}
.rx-radio input:checked{border-color:var(--ar-azul)}
.rx-radio input:checked::before{background:var(--ar-azul)}
.rx-radio input:focus-visible{outline:2px solid var(--ar-azul);outline-offset:2px}
.rx-radio.on{color:var(--ar-azul-tx);font-weight:500}
.rx-radio .p{margin-left:auto;font-family:'Plex',ui-monospace,monospace;
  font-size:.75rem;color:var(--ar-apagado);font-variant-numeric:tabular-nums}
.rx-flot-nota{padding:6px 12px 10px;font-size:.75rem;color:var(--ar-apagado);line-height:1.45}
.rx-flot-nums{display:flex;align-items:center;gap:8px;padding:4px 12px 8px;
  font-size:.75rem;color:var(--ar-suave);cursor:pointer;min-height:36px}
.rx-flot-nums input{width:15px;height:15px;accent-color:var(--ar-azul);margin:0}

/* ---------- CASE DETAILS: la barra plegada de abajo a la derecha -------- */
.rx-cd{flex:0 0 auto;background:var(--ar-panel);
  border:1px solid var(--ar-linea);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.rx-cd-cab{display:flex;align-items:center;gap:8px;padding:9px 10px;width:100%;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ar-suave);
  font-weight:600;cursor:pointer;user-select:none;min-height:36px;
  background:none;border:0;text-align:left;font-family:inherit}
.rx-cd-cab svg{width:16px;height:16px;flex:0 0 auto}
.rx-cd-cab .n{margin-left:auto;font-size:.75rem;letter-spacing:0;text-transform:none;
  color:var(--ar-azul-tx);font-family:'Plex',ui-monospace,monospace}
.rx-cd-cuerpo{max-height:200px;overflow-y:auto;border-top:1px solid var(--ar-linea-2);
  padding:4px 10px 8px;font-size:.75rem;color:var(--ar-texto-2)}
.rx-cd-cuerpo[hidden]{display:none}
.rx-cd-l{display:flex;align-items:baseline;gap:8px;padding:5px 0;
  border-bottom:1px solid var(--ar-linea-3)}
.rx-cd-l:last-child{border-bottom:0}
.rx-cd-l b{font-family:'Plex',ui-monospace,monospace;color:var(--ar-ambar-tx);min-width:22px;
  font-weight:600}
.rx-cd-l .p{margin-left:auto;font-family:'Plex',ui-monospace,monospace;
  color:var(--ar-texto);font-variant-numeric:tabular-nums}
.rx-cd-vacio{padding:8px 0;color:var(--ar-apagado)}

/* ---------- las fases como pestañas biseladas, activa en azul -----------
   DESDE LA FASE 3 ESTA PASTILLA VIVE EN LA BARRA DE LA APLICACIÓN, no dentro
   de la tarjeta del lienzo. Eso cambia dos cosas que se decidieron cuando era
   un adorno de la carta dental y ahora son la única señal de en qué paso del
   pedido está el dentista: el contraste del rótulo y su talla táctil. */
.rx-fases-cerec{gap:8px;margin-inline:auto;background:var(--ar-tab);border-radius:980px;padding:3px}
.rx-fases-cerec .rx-fase-sep{display:none}
/* `--ar-suave` (#5A6672) y no `--ar-apagado` (#7B8590) para los rótulos de las
   fases que no están activas. Sobre `--ar-tab` (#E8E8ED, el fondo de la propia
   pastilla) el apagado da 3,07:1 con texto de 13 px, por debajo del 4,5:1 de
   AA; el suave da 4,80:1. Solo se veía en tema CLARO —en oscuro los dos tokens
   son el mismo #A1A1A6, 5,35:1 sobre #2C2C2E— y claro es como se abre por
   defecto en un gabinete, así que «Upload · View · Send · Pay» salían lavados
   justo en la barra donde ahora se leen. El apagado se queda donde nació:
   dentro del panel INDICATIONS, sobre `--ar-panel`, que es otro fondo. */
.rx-fases-cerec .rx-fase{flex-direction:row;min-width:110px;min-height:36px;
  padding:0 18px;border-radius:980px;background:transparent;color:var(--ar-suave);
  clip-path:none;margin-right:0}
.rx-fases-cerec .rx-fase svg{display:none}
.rx-fases-cerec .rx-fase b{font-size:.8125rem;font-weight:500;letter-spacing:0;
  text-transform:none}
.rx-fases-cerec .rx-fase:first-child{clip-path:none}
.rx-fases-cerec .rx-fase.on{background:var(--ar-azul);color:#FFFFFF;z-index:1}
.rx-fases-cerec .rx-fase.on b{color:#FFFFFF}
.rx-fases-cerec .rx-fase.hecho{background:var(--ar-tab-hecho);color:var(--ar-texto)}

/* LOS 44 px EMPIEZAN DONDE LA TIRA SE VUELVE UNA FILA PARA EL DEDO, Y ESO YA
   NO ES 860. El corte del cascarón está en 1290 (app.css §15): por debajo de
   esa anchura `.barra-app` envuelve y la tira de fases se va a su propia fila
   a lo ancho, que es la maqueta que se toca con el pulgar en una tableta o en
   una ventana a media pantalla. El 44 vivía en el @media de 860 —el de la
   carta dental en columna— y entre 861 y 1290 la pastilla se quedaba con los
   36 px de la línea de arriba: cinco blancos táctiles por debajo del suelo de
   la casa en una barra que a esa anchura ya se usa con el dedo. Va en su
   propio corte y no dentro del de 860 para que se lea de dónde sale el número
   y para que quien mueva uno de los dos vea que el otro existe.
   Por encima de 1290 se conservan los 36: ahí la tira comparte fila con el
   título y los botones, `.barra-app` mide 56 px de alto y una pastilla de 44
   más sus 3+3 de relleno la empujaría a 62 — más alto sin nada que ganar,
   porque a esa anchura hay ratón. */
@media (max-width:1290px){
  .rx-fases-cerec .rx-fase{min-height:44px}
}

/* ---------- cuadrantes: solo con dedo ----------------------------------- */
/* Ocho zonas en dos filas que calcan la boca: arriba la arcada superior,
   abajo la inferior, de la derecha del paciente a su izquierda. */
.rx-cuads-ar{display:none;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:10px 14px 0}
.rx-cuads-ar button{min-height:44px;background:var(--ar-panel);
  border:1px solid var(--ar-borde);border-radius:10px;color:var(--ar-texto);cursor:pointer;
  font:500 .8125rem -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
.rx-cuads-ar button[aria-pressed="true"]{background:var(--ar-azul);border-color:var(--ar-azul);color:#FFFFFF}

@media (hover:hover) and (pointer:fine){
  .ar-d:hover .ar-c{stroke:var(--ar-azul);stroke-width:2}
  .rx-radio:hover{color:var(--ar-azul)}
}
@media (max-width:860px){
  .rx-cerec{grid-template-columns:1fr;min-height:0}
  .rx-cerec-der{margin:12px 14px 14px}
  .rx-flot-cuerpo{max-height:380px}
  .rx-flot-perfil select,.rx-cd-cab{min-height:44px}
  /* El `min-height:44px` de las fases se subió al @media de 1290 (arriba),
     que es donde el cascarón manda la tira a su propia fila. Aquí solo queda
     lo que de verdad depende de este ancho: cuánto mide cada pastilla. */
  .rx-cerec-lienzo{padding:14px 12px 6px}
  .rx-arcadas{max-width:none}
  .rx-cuads-ar{display:grid}
  .rx-radio{min-height:44px}
  /* cinco fases (Rx · Upload · View · Send · Pay) en 370 px: 66 cada una */
  .rx-fases-cerec .rx-fase{min-width:66px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  .ar-c,.rx-radio input::before{transition-duration:.001ms}
}

/* ---------- sin caso: el candado sobre el modelo -------------------------
   Mientras no hay paciente no hay Rx, y tocar un diente no puede guardar
   nada. Antes se decía con una línea roja al pie de la página, fuera de la
   vista (Robmar, 2026-09-08: «no se agrega al carrito, no entiendo»). Ahora
   se dice sobre el propio modelo, y tocarlo lleva al campo del nombre.       */
.rx-cerec-lienzo{position:relative}
.rx-cerec.sin-caso .rx-arcadas{opacity:.45;filter:saturate(.6)}
.rx-cerec-bloqueo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  max-width:min(92%,420px);padding:14px 18px;border:0;border-radius:12px;cursor:pointer;
  background:var(--ar-panel);color:var(--ar-texto);box-shadow:0 8px 28px rgba(20,28,36,.22);
  font:500 .9375rem/1.4 'Inter',system-ui,sans-serif;text-align:center}
.rx-cerec-bloqueo b{display:block;color:var(--ar-azul-tx);font-weight:600;margin-top:4px}
.rx-cerec-bloqueo[hidden]{display:none}
.rx-cerec-bloqueo.late{animation:ar-late .5s cubic-bezier(.2,.6,.3,1)}
@keyframes ar-late{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%) scale(1)}}
/* avisos del modelo, dentro del lienzo y no al pie de la página */
.rx-cerec-aviso{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  width:max-content;max-width:92%;padding:9px 14px;border-radius:8px;background:var(--ar-aviso);color:var(--ar-aviso-tx);
  font:500 .8125rem/1.35 'Inter',system-ui,sans-serif;text-align:center;
  opacity:0;pointer-events:none;transition:opacity 160ms cubic-bezier(.2,.6,.3,1)}
.rx-cerec-aviso.ver{opacity:1}
@media (prefers-reduced-motion:reduce){ .rx-cerec-bloqueo.late{animation:none} }

/* ---------- los dos juegos de color del panel del modelo ------------------
   El modelo (encía, paladar, dientes, amarillo del elegido) es el mismo en los
   dos modos: es el del escáner. Lo que cambia es el lienzo y el panel. Con
   valores por defecto en las var() para que la portada, que no carga este
   :root, siga viéndose igual. */
:root{
  --ar-lienzo-1:#F5F5F7; --ar-lienzo-2:#E8E8ED; --ar-panel:#FFFFFF; --ar-linea:#E5E5EA; --ar-linea-2:#E6E9ED; --ar-linea-3:#F0F2F4;
  --ar-texto:#3A4550; --ar-texto-2:#4A5561; --ar-suave:#5A6672; --ar-apagado:#7B8590; --ar-borde:#D2D2D7; --ar-borde-2:#9AA4AE;
  --ar-campo:#FFFFFF; --ar-tira:#F6F7F9; --ar-tab:#E8E8ED; --ar-tab-hecho:#FFFFFF;
  --ar-azul:#0071E3; --ar-azul-tx:#0071E3; --ar-ambar-tx:#7A4E0A; --ar-aviso:#1D1D1F; --ar-aviso-tx:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
  --ar-lienzo-1:#2A2A2D; --ar-lienzo-2:#1C1C1E; --ar-panel:#1D1D1F; --ar-linea:#2C2C2E; --ar-linea-2:#2C2C2E; --ar-linea-3:#2C2C2E;
  --ar-texto:#F5F5F7; --ar-texto-2:#D2D2D7; --ar-suave:#A1A1A6; --ar-apagado:#A1A1A6; --ar-borde:#48484A; --ar-borde-2:#636366;
  --ar-campo:#2C2C2E; --ar-tira:#161618; --ar-tab:#2C2C2E; --ar-tab-hecho:#48484A;
  --ar-azul:#0071E3; --ar-azul-tx:#2997FF; --ar-ambar-tx:#F5B731; --ar-aviso:#F5F5F7; --ar-aviso-tx:#1D1D1F;
  }
}
:root[data-tema="oscuro"]{
  --ar-lienzo-1:#2A2A2D; --ar-lienzo-2:#1C1C1E; --ar-panel:#1D1D1F; --ar-linea:#2C2C2E; --ar-linea-2:#2C2C2E; --ar-linea-3:#2C2C2E;
  --ar-texto:#F5F5F7; --ar-texto-2:#D2D2D7; --ar-suave:#A1A1A6; --ar-apagado:#A1A1A6; --ar-borde:#48484A; --ar-borde-2:#636366;
  --ar-campo:#2C2C2E; --ar-tira:#161618; --ar-tab:#2C2C2E; --ar-tab-hecho:#48484A;
  --ar-azul:#0071E3; --ar-azul-tx:#2997FF; --ar-ambar-tx:#F5B731; --ar-aviso:#F5F5F7; --ar-aviso-tx:#1D1D1F;
}