/* ============================================================================
   Herramientas de Xarpie (invariante 11, tren T2): la pagina de UNA herramienta (cabecera, la caja, el pie) y los estados que NO son la herramienta (cargando, problema, detenida, no disponible, plan). Lienzo aprobado
   por Daniel el 2026-10-03: «La pagina de una herramienta», «Estados de una herramienta» y «La herramienta en el telefono». Los dibuja public/paginas.js y public/artefactos.js.
   Solo tokens de cuarto-oscuro.css (--piedra, --piedra-on, --tinta, --texto, --medio, --linea, --e-*, --t-*, --r-flota, --r-pildora): ningun color, sombra, letra ni duracion escritos a mano (evaluacion/paridad-cuarto-oscuro.mjs).
   Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas ni rayas. Nada se anima. El interior de la caja NO lo dibuja este archivo: es otro documento (su kit esta en src/artefactos-kit.js).
   ============================================================================ */
.ar-pagina{ box-sizing:border-box; max-width:1120px; margin:0 auto; padding:var(--e-2) 0 var(--e-7); display:flex; flex-direction:column; gap:var(--e-4); }
.ar-volver{ align-self:flex-start; font-size:var(--t-campo); color:var(--medio); text-decoration:none; }
.ar-volver:hover, .ar-volver:focus-visible{ color:var(--tinta); }
.ar-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-4); }
.ar-cab-txt{ min-width:0; }
.ar-titulo{ margin:0 0 var(--e-1); display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); font-size:var(--t-saludo); line-height:1.25; font-weight:600; color:var(--tinta); overflow-wrap:anywhere; }
.ar-sub{ margin:0; font-size:var(--t-campo); line-height:1.5; color:var(--medio); }
.ar-chip{ display:inline-flex; align-items:center; height:28px; padding:0 var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-meta); font-weight:400; white-space:nowrap; }
.ar-acc{ flex:none; display:flex; align-items:center; gap:var(--e-2); }
/* El `···` de la pagina: una pildora de 44 px (se toca), no el boton chico de una fila. */
.ar-acc .pz-acc{ width:44px; height:44px; font-size:var(--t-sub); letter-spacing:.08em; color:var(--tinta); background:var(--piedra-on); }

/* La caja: una tarjeta de 16 px sobre el fondo; dentro, el documento sellado (un iframe sin bordes ni barras). */
.ar-caja{ background:var(--piedra); border-radius:var(--r-flota); overflow:hidden; }
.ar-marco{ display:block; width:100%; min-height:80px; border:0; background:transparent; color-scheme:normal; }
.ar-franja{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3); padding:var(--e-3) var(--e-4); background:var(--piedra-on); color:var(--texto); font-size:var(--t-meta); line-height:1.5; }
.ar-franja[hidden]{ display:none; }
.ar-franja strong{ font-weight:600; color:var(--tinta); }

/* Los estados que no son la herramienta: una tarjeta con lo que paso, lo que no se perdio y lo que sigue. */
.ar-estado{ box-sizing:border-box; background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-6) var(--e-5); display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-3); min-height:160px; }
.ar-estado-t{ margin:0; font-size:var(--t-texto); line-height:1.4; font-weight:600; color:var(--tinta); }
.ar-estado-s{ margin:0; font-size:var(--t-campo); line-height:1.5; color:var(--medio); max-width:56ch; }
.ar-estado-a{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-1); }
.ar-cargando .ar-estado-t{ color:var(--medio); font-weight:400; }

/* El pie de la pagina: «Hecha por Xarpie...», lo que lee, y la explicacion de la caja que se despliega a pedido. */
.ar-pie{ display:flex; flex-direction:column; gap:var(--e-2); margin:0; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
.ar-pie p{ margin:0; max-width:72ch; }
.ar-pie-fila{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-3); }
.ar-enlace{ appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--tinta); text-decoration:underline; cursor:pointer; }
.ar-lee{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--e-4); padding-top:var(--e-2); }
.ar-lee[hidden]{ display:none; }
.ar-lee h3{ margin:0 0 var(--e-1); font-size:var(--t-meta); line-height:16px; font-weight:600; letter-spacing:.02em; color:var(--tinta); }
.ar-lee p{ margin:0; }

/* El aviso de «Nueva pagina» (la fila de una herramienta, con su etiqueta «Nuevo») y las plantillas de la hoja. */
.ar-plt-et{ display:inline-flex; align-items:center; height:20px; padding:0 var(--e-2); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); font-size:var(--t-meta); margin-left:var(--e-2); vertical-align:middle; }
.ar-plt-dinero{ color:var(--medio); font-size:var(--t-meta); }

@media (max-width:560px){
  .ar-cab{ flex-direction:column; align-items:stretch; }
  .ar-acc{ justify-content:flex-start; }
  .ar-titulo{ font-size:var(--t-titulo); }
  .ar-estado{ padding:var(--e-5) var(--e-4); }
}