/* Apps por rol: estilos BASE de la cáscara (núcleo de la plantilla, js/apps-cascara.js). Una sola hoja para todos
   los roles: el rol cambia datos, no el layout. Celular: barra de pantallas abajo, al alcance del pulgar;
   computadora (≥ 900 px): barra lateral. Sin #hex: todo sale de tokens.css. Cada app agrega su hoja propia encima
   (p. ej. apps.css) solo con lo que es suyo. */
/* Cáscara de app instalada (ESTANDAR §2c): sin rebote que enseñe el fondo ni «jalar para recargar» por accidente.
   El Sitio lo conserva. */
html:has(body.ap){overscroll-behavior:none}
body.ap{overscroll-behavior:none;margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font-family:var(--sans);line-height:1.5;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
/* minmax(0,1fr): sin columna explícita, el grid tomaba el ancho mínimo de la cabecera (nombre de rol largo + chips)
   y la página se desbordaba a 390 px. */
body.ap.selector{padding-bottom:env(safe-area-inset-bottom)}
.saltar{position:absolute;left:-9999px;display:inline-flex;align-items:center;min-height:44px}
.saltar:focus{left:16px;top:8px;z-index:50;background:var(--superficie);padding:10px 14px;border-radius:var(--radio-chico)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ap :focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.ap small{font-size:var(--t-chico)}

/* Cabecera */
.ap-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;min-height:60px;
  padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  background:var(--vidrio-fuerte);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.ap-marca{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;min-width:0;color:var(--tinta);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.125rem}
.ap-simbolo{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radio-chico);background:var(--marca);color:var(--sobre-marca)}
.ap-simbolo svg{width:24px;height:24px}
.ap-rol{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-cab{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);text-decoration:none}
.ap-cab[aria-current]{background:var(--marca-suave);border-color:var(--marca)}
.ap-cab-n{position:absolute;top:-4px;right:-4px;display:none;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font-size:.875rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--superficie)}
.ap-cab.con .ap-cab-n{display:inline-grid}
button.ap-cab{cursor:pointer;padding:0;font:inherit}
.ap-cab svg{width:22px;height:22px}
.emoji.cab{width:28px;height:28px}

/* Barra de pantallas + píldora (la mueve un resorte en apps-cascara.js) */
.ap-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;isolation:isolate;
  padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:var(--vidrio-fuerte);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea)}
.ap-nav::-webkit-scrollbar{display:none}
.ap-nav a{position:relative;z-index:1;flex:1 0 56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:4px 6px;
  border-radius:var(--radio);color:var(--tinta-2);text-decoration:none;font-size:var(--t-chico);font-weight:700;text-align:center;line-height:1.15;transition:color var(--dur-normal) var(--curva)}
.ap-nav a[aria-current="page"]{color:var(--marca-oscura)}
.ap-pildora{position:absolute;left:0;top:0;z-index:0;border-radius:var(--radio);background:var(--marca-suave-2);pointer-events:none;will-change:transform}
.emoji.nav{width:28px;height:28px}
.nav-insignia,.insignia{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font-size:.875rem;font-weight:800;line-height:1}
.nav-insignia{position:absolute;top:4px;left:calc(50% + 6px);box-shadow:0 0 0 2px var(--superficie)}

/* Vista */
.ap-vista{overflow-x:clip;width:100%;max-width:760px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left));outline:none;min-width:0}
.vista-cab{margin:4px 0 18px}
.vista-cab h1{margin:0 0 4px;font-family:var(--display);font-size:var(--t-2);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.vista-cab p{margin:0;color:var(--tinta-2)}
.ap h2{font-family:var(--display);font-size:var(--t-3);line-height:1.25;margin:0 0 8px;font-weight:800}
.tarjeta{background:var(--superficie);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra);padding:18px;margin:0 0 14px;min-width:0}
.fila{display:flex;align-items:center;gap:12px;min-width:0}
.gris{color:var(--tinta-2)}
.nota{font-size:var(--t-chico);color:var(--tinta-2);margin:10px 0 0}
.emoji{flex:none;width:44px;height:44px;object-fit:contain}
.emoji.mini{width:24px;height:24px}.emoji.chico{width:40px;height:40px}.emoji.mediano{width:64px;height:64px}.emoji.grande{width:96px;height:96px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:999px;background:var(--marca-suave-2);color:var(--marca-oscura);font-size:var(--t-chico);font-weight:700;white-space:nowrap}
.chip.muestra{background:var(--acento);color:var(--sobre-acento)}
.chip.ok{background:color-mix(in srgb,var(--ok) 14%,var(--superficie));color:var(--ok)}
.chip.aviso{background:color-mix(in srgb,var(--aviso) 14%,var(--superficie));color:var(--aviso)}
.chip.error{background:color-mix(in srgb,var(--error) 12%,var(--superficie));color:var(--error)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--radio-accion);border:0;background:var(--marca);color:var(--sobre-marca);font-weight:800;text-decoration:none;cursor:pointer;transition:background var(--dur-normal) var(--curva),transform var(--dur-normal) var(--curva)}
.btn:hover{background:var(--marca-hover)}
.btn:active{transform:scale(.97)}
.btn.chico{min-height:44px;padding:0 16px}
.btn.claro{background:var(--superficie);color:var(--marca-oscura);border:1px solid var(--linea)}
.btn[disabled]{opacity:.5;cursor:default}
.enlace{display:flex;align-items:center;gap:12px;min-height:64px;color:var(--tinta);text-decoration:none}
.enlace b{flex:1}
.volver{display:inline-flex;align-items:center;min-height:44px;color:var(--marca-oscura);font-weight:800;text-decoration:none}

/* Listas */
.lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista>li{display:flex;align-items:center;gap:12px;background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);padding:12px 14px;min-height:64px;min-width:0}
/* :where() = especificidad 0: antes (.lista>li>span:not(.chip), 0-2-2) le ganaba a cualquier clase de la app y daba
   flex:1 también a la columna del ícono y a la de la etiqueta; el texto quedaba en un tercio del ancho (ESTANDAR §4b).
   Solo crece el texto; un span que solo envuelve un ícono (emoji, svg, img) mide lo que su ícono. */
:where(.lista>li>span:not(.chip)){flex:1;min-width:0}
:where(.lista>li>span:has(>:is(img,svg,.emoji):only-child)){flex:none}
/* Si la fila tiene un texto con título (<b>), solo ese crece: la hora de antes y lo de después miden lo suyo. */
:where(.lista a.fila-enlace>span:has(b)){flex:1;min-width:0}
:where(.lista>li>span:not(:has(b)):has(~ span b), .lista>li>span:has(b) ~ span, .lista a.fila-enlace>span:not(:has(b)):has(~ span b), .lista a.fila-enlace>span:has(b) ~ span){flex:none}
:where(.lista>li>span.importe){flex:none;white-space:nowrap}
.lista small{display:block;color:var(--tinta-2)}
.lista time{font-weight:800;color:var(--marca-oscura);white-space:nowrap}
.lista .nivel-aviso{border-left:4px solid var(--aviso)}
.lista .nivel-error{border-left:4px solid var(--error)}
.lista .nivel-info{border-left:4px solid var(--info)}
.lista .nivel-ok{border-left:4px solid var(--ok)}
/* Tarjeta con etiqueta (ESTANDAR §4b): el título va arriba a todo el ancho y la etiqueta en la fila de meta, así
   nunca le quita ancho ni lo parte en 3 líneas. Nada de 3 columnas (ícono | texto | etiqueta): el ícono chico
   (≤ 44 px) va pegado a la izquierda o arriba y el texto usa el resto. <span class="tit-meta"><b>Título</b><span class="tit-meta-fila">
   <span class="chip aviso">Retenida</span><small>dom 25 oct · 4 pers.</small></span></span>. Sirve dentro de
   .lista>li, .tarjeta o cualquier fila con emoji/avatar a la izquierda. */
.tit-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lista>li:has(>.tit-meta),.lista a.fila-enlace:has(>.tit-meta){align-items:flex-start}
.tit-meta>b,.tit-meta>.tit{display:block;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.tit-meta-fila{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;color:var(--tinta-2);font-size:var(--t-chico)}
.tit-meta-fila>*{min-width:0}
.tit-meta-fila>.chip{flex:none}
.lista .tit-meta-fila small{display:inline}
/* Columna lateral de una fila (.lado: importe, etiqueta, botón), a la derecha en pantallas anchas. */
.lado{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;text-align:right}
/* Celular (ESTANDAR §4b): lo que va DESPUÉS del texto de una fila (etiqueta, botón, importe, .lado, formulario) baja a
   su propia fila y el texto conserva el ancho; nada de ícono | texto | etiqueta | botón en 390 px. El ::after es el
   salto de línea del flex (order 1, entre el texto y lo de atrás). Ojo: :has() no se anida dentro de otro :has(). */
@media (max-width:480px){
  :is(.lista>li,.lista a.fila-enlace):has(>span b):has(>:is(.chip,.btn,.lado,.importe,button,form)){flex-wrap:wrap;row-gap:0}
  :is(.lista>li,.lista a.fila-enlace):has(>span b):has(>:is(.chip,.btn,.lado,.importe,button,form))::after{content:"";flex:0 0 100%;order:1}
  :is(.lista>li,.lista a.fila-enlace)>span:has(b) ~ :is(.chip,.btn,.lado,.importe,button,form){order:2;margin-top:8px}
  .lista>li>.lado{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}
}
.lista a.fila-enlace{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:44px;color:inherit;text-decoration:none}

/* Tableros */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px;margin-bottom:14px}
.kpi{margin:0}.kpi small{display:block;color:var(--tinta-2);font-weight:700}.kpi b{display:block;font-family:var(--display);font-size:var(--t-1);line-height:1.1;margin:4px 0;font-weight:800}
.barras{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.barras li{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;gap:10px;align-items:center}
.barras i{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--marca) calc(var(--p,0)*100%),var(--marca-suave-2) 0)}
.tabla{width:100%;border-collapse:collapse}
.tabla th,.tabla td{padding:10px 8px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:middle}
.tabla thead th{font-size:var(--t-chico);color:var(--tinta-2)}
.tabla-envoltura{overflow-x:auto;background:var(--superficie);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra);padding:6px 12px;margin-bottom:14px}
.rejilla-2{display:grid;gap:0 14px}

/* Formularios */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0;font-weight:700;font-size:var(--t-chico)}
.campo input,.campo select,.campo textarea{width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--radio-chico);font-size:1rem;font-weight:400;background:var(--superficie);color:var(--tinta)}
.campo textarea{min-height:110px;resize:vertical}
.campo [aria-invalid="true"]{border-color:var(--error)}
/* Interruptor accesible: <button role="switch" aria-checked> */
.interruptor{position:relative;flex:none;width:52px;height:32px;border-radius:999px;border:0;background:var(--linea);cursor:pointer;transition:background var(--dur-normal) var(--curva)}
.interruptor::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--superficie);box-shadow:var(--sombra);transition:transform var(--dur-normal) var(--curva)}
.interruptor[aria-checked="true"]{background:var(--marca)}
.interruptor[aria-checked="true"]::after{transform:translateX(20px)}
.interruptor-zona{position:relative;display:inline-grid;place-items:center;min-width:52px;min-height:44px}

/* Odómetro (js/odometro.js) */
.odo{display:inline-flex;align-items:flex-start;font-family:var(--display);font-weight:800;font-size:var(--t-1);line-height:1;font-variant-numeric:tabular-nums}
.od-d{display:inline-block;height:1em;overflow:hidden}
.od-strip{display:flex;flex-direction:column;will-change:transform}
.od-strip span{display:block;height:1em;line-height:1}
.od-comma,.od-cur,.od-suf{display:inline-block;line-height:1}
.od-suf{font-size:.5em;margin:.4em 0 0 .2em;color:var(--tinta-2)}

/* Chat (js/chat.js) */
.chat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Solo las burbujas (hijos directos): una lista DENTRO de una burbuja (p. ej. una propuesta) no hereda su forma. */
.chat>li{position:relative;max-width:84%;padding:10px 14px;border-radius:18px;background:var(--superficie);box-shadow:var(--sombra);overflow-wrap:anywhere}
.chat .yo{align-self:flex-end;background:var(--marca);color:var(--sobre-marca);border-bottom-right-radius:6px}
.chat .ellos{align-self:flex-start;border-bottom-left-radius:6px}
.chat .txt{display:block}
.chat .autor{display:block;margin-bottom:4px;font-size:.875rem;font-weight:800;color:var(--marca-oscura)}
.chat .trad{display:block;margin-top:6px;padding-top:6px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:var(--t-chico)}
.chat>li time{display:block;margin-top:4px;font-size:.875rem}
.chat .yo time,.chat .leido{text-align:right}
.chat .leido{display:block;margin-top:4px;font-size:var(--t-chico)}
.chat .escribiendo{display:inline-flex;gap:5px;align-items:center;padding:14px 16px;width:max-content}
.chat .escribiendo i{width:8px;height:8px;border-radius:50%;background:var(--tinta-2);animation:punto 1s ease-in-out infinite}
.chat .escribiendo i:nth-child(2){animation-delay:.15s}.chat .escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
.chat .separador{align-self:center;max-width:none;background:var(--acento);color:var(--sobre-acento);box-shadow:none;border-radius:999px;padding:4px 14px;font-size:var(--t-chico);font-weight:800;margin:8px 0;text-align:center}
.chat .separador.sistema{background:var(--marca-suave-2);color:var(--marca-oscura)}
/* Bandeja de conversaciones */
.bandeja{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
/* minmax(0,1fr): sin columna explícita, cada <li> medía lo que su vista previa en una sola línea (nowrap) y la
   tarjeta salía de la pantalla a 390 px. */
.conv{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 14px;border-radius:var(--radio);background:var(--superficie);box-shadow:var(--sombra);color:var(--tinta);text-decoration:none;min-width:0}
.conv-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.conv-txt small{color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.no-leido b{font-weight:800}
.conv-lado{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--t-chico);color:var(--tinta-2)}
.avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--marca-suave-2);color:var(--marca-oscura);font-weight:800}
.avatar.grande{width:56px;height:56px;font-size:1.125rem}

/* Avisos que bajan (apps-cascara.js › aviso) */
.ap-avisos{position:fixed;z-index:30;top:calc(var(--ap-top-h,64px) + 8px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:center;pointer-events:none}
.ap-aviso{pointer-events:auto;display:flex;align-items:center;gap:12px;width:min(440px,100%);min-height:64px;padding:10px 12px;border-radius:var(--radio-tarjeta);
  background:var(--superficie);color:var(--tinta);text-decoration:none;box-shadow:var(--sombra-alta);border:1px solid var(--linea)}
.ap-aviso-txt{display:flex;flex-direction:column;min-width:0}
.ap-aviso-txt span{font-size:var(--t-chico);color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ap-aviso-ir{margin-left:auto;font-size:1.5rem;color:var(--marca)}

/* Selector de apps */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.rol{display:flex;gap:14px;align-items:center;color:var(--tinta);text-decoration:none;margin:0}
.rol b{display:block;font-family:var(--display);font-size:var(--t-3)}
.rol small{display:block;color:var(--tinta-2)}

/* Computadora: barra lateral */
@media (min-width:900px){
  body.ap:not(.selector){grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto 1fr;padding-bottom:0}
  .ap-top{grid-column:1/-1}
  .ap-nav{position:sticky;top:var(--ap-top-h,60px);align-self:start;flex-direction:column;overflow:visible;height:calc(100dvh - var(--ap-top-h,60px));padding:16px 12px max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:0;border-right:1px solid var(--linea);background:var(--superficie)}
  .ap-nav a{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:52px;padding:6px 12px;font-size:1rem;text-align:left}
  .nav-insignia{position:static;margin-left:auto}
  .ap-vista{max-width:1120px;padding:28px max(32px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) 32px}
  body[data-disp="phone"] .ap-vista{max-width:820px}
  .rejilla-2{grid-template-columns:1fr 1fr}
  .ap-avisos{justify-content:flex-end;right:max(24px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce){.ap *{scroll-behavior:auto!important}}