/* =====================================================================
   componentes.css: piezas que se repiten en varias pantallas.
   ===================================================================== */

/* ---------- Listas agrupadas ---------- */
.lista{background:var(--superficie);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-tarjeta);overflow:hidden}
.fila{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;position:relative;text-align:left;width:100%}
.fila + .fila::before{content:"";position:absolute;top:0;right:0;left:62px;border-top:1px solid var(--linea)}
.lista--sin-icono .fila + .fila::before{left:16px}
.fila-cuerpo{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:left}
.fila-titulo{font-size:16.5px;font-weight:500;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.fila-sub{font-size:13.5px;color:var(--tinta-2);margin-top:2px}
.fila-sub b{font-weight:600;color:var(--tinta)}
.fila-descripcion{font-size:14px;color:var(--tinta-2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fila-estado{margin-top:6px}
.fila--hecha .fila-titulo{color:var(--tinta-3);text-decoration:line-through;text-decoration-color:var(--tinta-3)}
.fila-flecha{flex:none;color:var(--tinta-3)}

/* ---------- Casilla de tarea: 44 px de toque, 26 px de dibujo ---------- */
.casilla{flex:none;width:var(--toque);height:var(--toque);margin:-6px -6px -6px -10px;display:grid;place-items:center;border-radius:50%}
.casilla-dibujo{width:26px;height:26px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tinta) 28%,transparent);display:grid;place-items:center;
  transition:background-color 260ms var(--curva),border-color 260ms var(--curva)}
.casilla-dibujo svg{opacity:0;transform:scale(.6);transition:opacity 200ms var(--curva),transform 380ms var(--curva-salida)}
.casilla--hecha .casilla-dibujo{background:var(--ok);border-color:var(--ok);color:#fff}
.casilla--hecha .casilla-dibujo svg{opacity:1;transform:none}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--radio-pildora);
  font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.boton--ancho{width:100%}
.boton--principal{background:var(--ambar);color:var(--sobre-ambar)}
.boton--oscuro{background:var(--boton-fondo);color:var(--boton-texto)}
.boton--suave{background:var(--relleno);color:var(--tinta)}
.boton--borde{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinta) 18%,transparent);color:var(--tinta)}
.boton--peligro{background:var(--peligro-fondo);color:var(--peligro)}
.boton--peque{min-height:38px;padding:0 16px;font-size:14.5px;position:relative}
.boton--peque::after{content:"";position:absolute;inset:-4px -2px}   /* amplía el toque a 46 px sin cambiar el dibujo */
.boton:disabled{opacity:.45;cursor:default}
.botones{display:grid;gap:10px}

/* Botón circular con icono (añadir, cerrar, aceptar, rechazar). */
.boton-icono{flex:none;width:var(--toque);height:var(--toque);border-radius:50%;display:grid;place-items:center;background:var(--relleno);color:var(--tinta)}
.boton-icono--oscuro{background:var(--boton-fondo);color:var(--boton-texto)}
.boton-icono--principal{background:var(--ambar);color:var(--sobre-ambar)}
.boton-icono--peligro{background:var(--peligro-fondo);color:var(--peligro)}

/* Enlace de texto en ámbar ("Ver todas"). */
.enlace{color:var(--ambar-texto);font-weight:600;font-size:15px;min-height:var(--toque);display:inline-flex;align-items:center}

/* ---------- Avatar ---------- */
.avatar{flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--letra-titulo);font-weight:600;letter-spacing:-.02em;
  color:var(--tinta);background:var(--relleno) center/cover no-repeat}
.avatar--s{width:36px;height:36px;font-size:13px}
.avatar--m{width:44px;height:44px;font-size:15px}
.avatar--l{width:72px;height:72px;font-size:24px}
.avatar--tu{background-color:var(--boton-fondo);color:var(--boton-texto)}
.boton-avatar{position:relative;border-radius:50%}
.insignia{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ambar);color:var(--sobre-ambar);
  font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--fondo)}

/* Icono del tipo de activo. */
.icono-tipo{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--relleno);color:var(--tinta)}
.icono-tipo--llave{background:color-mix(in srgb,var(--ambar) 18%,transparent);color:var(--ambar-texto)}

/* ---------- Pastilla de estado ---------- */
.pastilla{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:12.5px;font-weight:600;
  background:var(--relleno);color:var(--tinta-2);white-space:nowrap}
.pastilla--ambar{background:color-mix(in srgb,var(--ambar) 20%,transparent);color:var(--ambar-texto)}
.pastilla--ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.pastilla--peligro{background:var(--peligro-fondo);color:var(--peligro)}

/* ---------- Formularios ---------- */
.campo{display:grid;gap:8px}
.campo + .campo{margin-top:18px}
.campo-etiqueta{font-size:14px;font-weight:600;color:var(--tinta)}
.entrada{width:100%;min-height:52px;padding:0 16px;border-radius:var(--radio-campo);border:0;background:var(--relleno);font-size:17px;outline:none}
.entrada::placeholder{color:var(--tinta-2)}
.entrada:focus-visible{box-shadow:var(--anillo-foco)}
.boton-hora{display:flex;align-items:center;gap:10px;color:var(--tinta-2);font-size:16px;text-align:left}
.entrada-con-quitar{position:relative;display:block}
.entrada-con-quitar .entrada{padding-right:52px}
.quitar{position:absolute;top:4px;right:4px;width:var(--toque);height:var(--toque);border-radius:50%;display:grid;place-items:center;color:var(--tinta-2)}
.entrada::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.entrada--texto{min-height:96px;padding:14px 16px;line-height:1.45;resize:none;field-sizing:content;max-height:240px;font-size:16px}
.campo-externo{display:flex;gap:10px;align-items:center;margin-top:12px}
.campo-externo .entrada{flex:1;min-width:0}
.campo-externo .boton{min-height:52px}
.campo .fichas + .entrada{margin-top:10px}
.entradas-dobles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buscador{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:var(--radio-pildora);background:var(--relleno);color:var(--tinta-2)}
.buscador input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:16.5px;color:var(--tinta)}
.buscador input::placeholder{color:var(--tinta-2)}
.buscador:focus-within{box-shadow:var(--anillo-foco)}

/* Fichas elegibles (persona, tipo, filtro). Se desplazan en horizontal si no caben. */
.fichas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--margen) * -1);padding:2px var(--margen)}
.fichas::-webkit-scrollbar{display:none}
.fichas--envolver{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
.ficha{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--toque);padding:0 16px 0 6px;border-radius:var(--radio-pildora);
  background:var(--relleno);font-size:15px;font-weight:500}
.ficha--sin-avatar{padding-left:16px}
.ficha[aria-pressed="true"]{background:var(--boton-fondo);color:var(--boton-texto)}
.ficha .avatar{width:32px;height:32px;font-size:12px}
.ficha[aria-pressed="true"] .avatar{box-shadow:0 0 0 2px var(--boton-fondo)}

/* Selector segmentado. */
.segmentos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:var(--radio-pildora);background:var(--relleno)}
.segmentos button{min-height:40px;border-radius:var(--radio-pildora);font-size:14.5px;font-weight:600;color:var(--tinta-2)}
.segmentos button[aria-pressed="true"]{background:var(--relleno-activo);color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- Estado vacío ---------- */
.vacio{padding:26px 20px;text-align:center;color:var(--tinta-2);font-size:15px}
.vacio-titulo{font-family:var(--letra-titulo);font-weight:600;font-size:17px;letter-spacing:-.015em;color:var(--tinta);margin-bottom:4px}

/* ---------- Barra de pestañas: pegada abajo, translúcida, con el escáner sobresaliendo en el centro ---------- */
.barra{position:absolute;left:0;right:0;bottom:0;z-index:var(--capa-barra);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
  padding:8px 10px calc(var(--seguro-abajo) + 18px);background:var(--cristal);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--linea)}
.pestana{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:var(--toque);padding:4px 0;color:var(--tinta-3);
  font-size:11px;font-weight:600;letter-spacing:.01em}
.pestana[aria-current="page"]{color:var(--tinta)}
.pestana-icono{position:relative;display:grid}
.pestana .insignia{top:-7px;left:13px;right:auto;min-width:18px;height:18px;padding:0 5px;font-size:11px}
.pestana-central{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--tinta-3)}
.boton-escanear{width:54px;height:54px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;background:var(--ambar);color:var(--sobre-ambar);
  box-shadow:0 6px 16px -4px rgba(17,18,20,.35),0 0 0 4px var(--fondo)}

/* ---------- Hoja inferior ---------- */
.velo{position:absolute;inset:0;z-index:var(--capa-hoja);background:var(--velo)}
.velo--abriendo{animation:aparecer 280ms var(--curva) both}
.hoja{position:absolute;left:0;right:0;bottom:0;z-index:var(--capa-hoja);max-height:calc(100% - var(--seguro-arriba) - 24px);overflow-y:auto;
  overscroll-behavior:contain;background:var(--superficie);border-radius:28px 28px 0 0;padding:8px var(--margen) calc(var(--seguro-abajo) + 22px);
  box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.hoja--abriendo{animation:hoja-sube 460ms var(--curva) both}
.hoja-asa{width:40px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--tinta) 22%,transparent);margin:0 auto 14px}
.hoja-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.hoja-titulo{font-family:var(--letra-titulo);font-size:24px;line-height:1.12;font-weight:700;letter-spacing:-.03em;margin:0;overflow-wrap:anywhere}
.hoja-texto{color:var(--tinta-2);font-size:15.5px;line-height:1.45;margin:6px 0 0}
.hoja-pie{margin-top:24px}
.hoja-bloque{margin-top:26px}
.hoja-bloque-titulo{font-family:var(--letra-titulo);font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.hoja .lista{background:var(--fondo);box-shadow:none}

/* Pantalla superpuesta que entra desde la derecha (Ajustes). */
.capa{position:absolute;inset:0;z-index:var(--capa-pantalla);background:var(--fondo)}
.capa--abriendo{animation:entrar-lateral 440ms var(--curva) both}

/* ---------- Aviso flotante y "guardando" ---------- */
.aviso{position:absolute;left:50%;bottom:calc(var(--alto-barra) + 14px);z-index:var(--capa-aviso);max-width:calc(100% - 40px);
  padding:12px 18px;border-radius:var(--radio-pildora);background:var(--boton-fondo);color:var(--boton-texto);font-size:14.5px;font-weight:500;
  box-shadow:var(--sombra-flotante);opacity:0;transform:translate(-50%,12px) scale(.96);pointer-events:none;
  transition:opacity 260ms var(--curva),transform 420ms var(--curva-salida)}
.aviso.visible{opacity:1;transform:translate(-50%,0)}
.cargando{position:absolute;inset:0;z-index:var(--capa-cargando);display:none;place-items:center;background:color-mix(in srgb,var(--fondo) 40%,transparent)}
.cargando.activo{display:grid;animation:aparecer 200ms 150ms var(--curva) both}   /* solo se ve si tarda */
.rueda{width:30px;height:30px;border-radius:50%;border:3px solid color-mix(in srgb,var(--tinta) 14%,transparent);border-top-color:var(--ambar);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* =====================================================================
   Riqueza visual (rediseño UI/UX): tonos, estados de fila, barra y vacíos.
   ===================================================================== */

/* Avatares con tono propio por persona (el tuyo sigue en tinta). */
.avatar--tono-1{background-color:var(--tono-1);color:var(--tinta-tono-1)}
.avatar--tono-2{background-color:var(--tono-2);color:var(--tinta-tono-2)}
.avatar--tono-3{background-color:var(--tono-3);color:var(--tinta-tono-3)}
.avatar--tono-4{background-color:var(--tono-4);color:var(--tinta-tono-4)}
.avatar--tono-5{background-color:var(--tono-5);color:var(--tinta-tono-5)}
.avatar--tono-6{background-color:var(--tono-6);color:var(--tinta-tono-6)}

/* Tipos de activo: llave en ámbar, material en verde, documento en azul. */
.icono-tipo{border-radius:12px}
.icono-tipo--material{background:var(--tono-2);color:var(--tinta-tono-2)}
.icono-tipo--documento{background:var(--tono-3);color:var(--tinta-tono-3)}

/* Filas de tarea: franja ámbar si alguien la está haciendo, roja si ha vencido. */
.fila--en-curso::after,.fila--vencida::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--ambar)}
.fila--vencida::after{background:var(--peligro)}
.fila-estado{display:flex;gap:6px;flex-wrap:wrap}

/* Número de la sección como pastilla. */
.seccion-dato:not(:empty){padding:3px 10px;border-radius:var(--radio-pildora);background:var(--relleno);font-size:13px;font-weight:600}

/* Estado vacío con el isotipo en un círculo. */
.vacio-icono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:var(--fondo);
  box-shadow:inset 0 0 0 1px var(--linea)}

/* Barra de pestañas: la pestaña activa lleva una píldora ámbar detrás del icono. */
.pestana-icono{place-items:center;width:56px;height:30px;border-radius:var(--radio-pildora);transition:background-color 260ms var(--curva)}
.pestana[aria-current="page"] .pestana-icono{background:color-mix(in srgb,var(--ambar) 22%,transparent)}
.pestana .insignia{left:31px}
.boton-escanear{box-shadow:0 8px 20px -6px color-mix(in srgb,var(--ambar) 70%,transparent),0 0 0 4px var(--fondo)}

/* Lista y tarjetas con un filo fino para que se separen mejor del fondo. */
.lista{box-shadow:var(--sombra-tarjeta),inset 0 0 0 1px var(--linea)}
.hoja-asa{background:color-mix(in srgb,var(--ambar) 55%,transparent)}