/* ==========================================================================
   Tareas (prefijo .tar-): pestañas, filtros, listas, tablero, panel de detalle, notas y visor de fotos.
   Reutiliza las clases de estilo.css (.fila-tarea, .chip, .segmentado, .campo, .captura…).
   Tamaños de letra solo con --t1…--t6; colores solo con variables.
   ========================================================================== */

/* ---------- Cabecera, pestañas y filtros ---------- */
.tar-cabecera{margin-bottom:var(--e4)}
.tar-pestanas{margin-bottom:var(--e4)}
.tar-pestana-n{font-size:var(--t1);font-weight:500;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.tar-pestana-n:empty{display:none}
.tar-pestanas .pestana[aria-current="page"] .tar-pestana-n{color:var(--tinta)}
/* En el móvil las cinco pestañas no caben y la barra no enseña que se desplaza: «Archivo» baja a otra línea */
@media (max-width:899px){
  .tar-pestanas{flex-wrap:wrap}
}

.tar-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);margin-bottom:var(--e5)}
.tar-chips{
  display:flex;gap:6px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:3px 2px;margin:-3px -2px;      /* sitio para el contorno del foco */
}
.tar-chips::-webkit-scrollbar{display:none}
.tar-chips .chip{flex:none}
.tar-chips .chip--activo .punto{box-shadow:0 0 0 1.5px var(--sobre-tinta)}
.tar-filtros-fin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);flex:0 1 auto;min-width:0}
.tar-prioridad-select{width:auto;max-width:100%;height:32px}
.tar-prioridad-select--activa{border-color:var(--tinta);font-weight:600}
.tar-quitar{gap:4px}
.tar-nuevo-espacio{border-style:dashed}
.tar-espacio-color{
  display:block;width:64px;height:38px;padding:3px;cursor:pointer;
  background:var(--tarjeta);border:1px solid var(--borde-fuerte);border-radius:var(--r);
}
@media (min-width:900px){
  .tar-prioridad-select{font-size:var(--t1)}
}

.tar-error:empty{display:none}
.tar-error{margin-bottom:var(--e4)}

/* ---------- Captura en línea y buscador del archivo ---------- */
.tar-captura{margin-bottom:var(--e5)}
.tar-captura .captura-ayuda{display:none}
.tar-captura:focus-within .captura-ayuda{display:block}
.tar-captura .campo[aria-busy="true"]{opacity:.7}
.tar-buscador{margin-bottom:var(--e4)}

/* ---------- Listas ---------- */
.tar-grupo + .tar-grupo{margin-top:var(--e5)}
.tar-grupo-titulo{font-family:var(--fuente);line-height:1.5;letter-spacing:0}
.tar-archivo-cuenta{margin:0 0 var(--e2);padding:0 var(--e2);font-size:var(--t1);color:var(--tinta-2)}

/* El título es un botón (se abre con el teclado) con aspecto de texto */
.tar-titulo{
  display:block;width:100%;min-width:0;margin:0;padding:0;
  font:inherit;line-height:1.5;text-align:left;color:var(--tinta);
  background:none;border:0;border-radius:var(--r-peq);cursor:pointer;overflow-wrap:anywhere;
}
.tar-titulo:focus-visible{outline-offset:2px}
.tar-alta{color:var(--tinta);font-weight:600}
.tar-alta .icono{color:var(--tinta-2)}
.tar-fila .fila-acciones.tar-acciones-fijas{opacity:1}
@media (max-width:899px){
  .tar-titulo{font-size:var(--t3)}
}

/* ---------- Tablero ---------- */
.tar-tablero-orden{display:flex;justify-content:flex-end;margin-bottom:var(--e3);font-size:var(--t2);color:var(--tinta-2)}
.tar-tablero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3);align-items:start}
.tar-columna{
  display:flex;flex-direction:column;gap:var(--e2);min-width:0;padding:var(--e3);
  background:var(--lateral);border:1px solid var(--borde);border-radius:var(--r-grande);
  transition:border-color .12s ease,background-color .12s ease;
}
.tar-columna--encima{border-color:var(--tinta-3);border-style:dashed;background:var(--fondo-hover)}
.tar-columna-cabeza{display:flex;align-items:baseline;gap:var(--e2);padding:0 var(--e1)}
.tar-columna-titulo{font-family:var(--fuente);font-size:var(--t2);font-weight:600;letter-spacing:0;color:var(--tinta)}
.tar-columna-n{font-size:var(--t1);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.tar-columna-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2);min-height:64px}
.tar-columna-vacia{
  display:grid;place-items:center;min-height:64px;padding:var(--e3);
  font-size:var(--t1);color:var(--tinta-2);text-align:center;
  border:1px dashed var(--borde-fuerte);border-radius:var(--r);
}
.tar-tarjeta{
  display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px var(--e3);
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
  cursor:grab;transition:border-color .12s ease,opacity .12s ease;
}
.tar-tarjeta:hover{border-color:var(--borde-fuerte)}
.tar-tarjeta:active{cursor:grabbing}
.tar-tarjeta--arrastrando{opacity:.45}
.tar-tarjeta-cabeza{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--e2)}
.tar-tarjeta-cabeza > .boton--icono{margin:-4px -6px -4px 0}
.tar-tarjeta .fila-meta{margin-top:0;padding-left:30px}
.tar-tarjeta--hecha .fila-check,.tar-tarjeta--completando .fila-check{background:var(--hecho);border-color:var(--hecho);color:var(--sobre-acento)}
.tar-tarjeta--completando .fila-check{animation:marcar .3s ease}
.tar-tarjeta--hecha .tar-titulo,.tar-tarjeta--completando .tar-titulo{color:var(--tinta-2);text-decoration:line-through;text-decoration-color:var(--tinta-3)}
.tar-ver-archivo{align-self:flex-start;padding:var(--e1);font-size:var(--t1);color:var(--tinta-2)}
@media (max-width:640px){
  .tar-tablero{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Panel de detalle ---------- */
.tar-det{display:flex;flex-direction:column;gap:var(--e3)}
.tar-det-guardado{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:20px;font-size:var(--t1);color:var(--tinta-2)}
.tar-det-guardado .icono{width:14px;height:14px}
.tar-det-guardado .cargando-rueda{width:12px;height:12px}
.tar-det-guardado--error{color:var(--aviso);font-weight:500}
.tar-det-guardado .enlace{margin-left:var(--e1);font-size:var(--t1);font-weight:500}
.tar-det-titulo{margin-top:calc(-1 * var(--e1))}
.tar-det-campos{display:flex;flex-direction:column;gap:var(--e4);margin-top:var(--e1)}
.tar-det-fila{display:flex;flex-direction:column;gap:6px;min-width:0}
.tar-det-fila .segmentado{align-self:flex-start}
.tar-det-espacio{position:relative;display:flex;align-items:center;min-width:0}
.tar-det-espacio .punto{position:absolute;left:var(--e3);pointer-events:none}
.tar-det-espacio .campo{padding-left:28px}
.tar-det-fecha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);min-width:0}
.tar-det-fecha .campo{flex:1 1 160px;width:auto;min-width:0}
.tar-det-atajos{display:flex;flex-wrap:wrap;gap:var(--e1)}
.tar-det-atajos .boton[aria-pressed="true"]{background:var(--lateral);border-color:var(--tinta-3);color:var(--tinta)}
.tar-ayuda--aviso{color:var(--aviso);font-weight:500}
.tar-ayuda--peligro{color:var(--peligro);font-weight:500}
textarea.tar-det-descripcion{min-height:88px;resize:none;overflow:hidden}

.tar-det-seccion{display:flex;flex-direction:column;gap:var(--e3);margin-top:var(--e2);padding-top:var(--e4);border-top:1px solid var(--borde)}
.tar-det-subtitulo{display:flex;align-items:center;gap:var(--e2);font-family:var(--fuente);font-size:var(--t2);font-weight:600;letter-spacing:0;color:var(--tinta)}
.tar-det-subtitulo .icono{width:18px;height:18px;color:var(--tinta-2)}

/* Aviso en el iPhone */
.tar-aviso{display:flex;flex-direction:column;gap:var(--e2)}
.tar-aviso-texto{display:flex;align-items:center;gap:var(--e2)}
.tar-aviso-texto .icono{width:16px;height:16px;color:var(--tinta-2)}
.tar-aviso-form,.tar-aviso-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.tar-aviso-campo{flex:1 1 200px;width:auto;min-width:0}
.tar-aviso-ocupado{display:flex;align-items:center;gap:var(--e2);font-size:var(--t1);color:var(--tinta-2)}
.tar-aviso-ocupado .cargando-rueda{width:12px;height:12px}

/* Notas */
.tar-notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}
.tar-notas-vacio{font-size:var(--t1);color:var(--tinta-2)}
.tar-nota{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px var(--e3);background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r)}
.tar-nota-texto{white-space:pre-wrap;overflow-wrap:anywhere}
.tar-nota-foto{
  display:block;width:fit-content;max-width:100%;padding:0;overflow:hidden;
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r-peq);cursor:zoom-in;
}
.tar-nota-foto img{display:block;max-width:100%;max-height:180px;width:auto;height:auto;object-fit:cover}
.tar-nota-foto:hover{border-color:var(--borde-fuerte)}
.tar-nota-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin:-2px -4px -4px 0}
.tar-nota-fecha{font-size:var(--t1);color:var(--tinta-2)}
.tar-nota-nueva{display:flex;align-items:flex-end;gap:var(--e1);min-width:0}
textarea.tar-nota-campo{flex:1 1 auto;min-width:0;min-height:38px;height:38px;padding-top:7px;padding-bottom:7px;resize:none;overflow:hidden}
.tar-nota-nueva .boton--icono{flex:none}
.tar-nota-estado{display:flex;align-items:center;gap:var(--e2);font-size:var(--t1);color:var(--tinta-2)}
.tar-nota-estado:empty{display:none}
.tar-nota-estado .cargando-rueda{width:12px;height:12px}

/* Pie del panel */
.tar-det-pie{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e2);min-width:0}
.tar-det-fechas{font-size:var(--t1);color:var(--tinta-2)}

/* ---------- Visor de fotos ----------
   La foto se ve entera en cualquier pantalla. Alrededor de la foto hay como mucho 80px (bordes, cabecera con la X
   y margen de abajo) más el margen de la capa: 48px en escritorio; en el móvil, 16px o la zona segura arriba,
   16px abajo y la zona del indicador de inicio del iPhone. Si aun así no cabe, la foto se encoge dentro del
   cuerpo en vez de recortarse (columna flexible con min-height:0 y object-fit:contain). */
.tar-visor.modal{max-width:min(1200px,100%);background:var(--tinta);border-color:var(--tinta)}
.tar-visor .capa-titulo{color:var(--sobre-tinta)}
.tar-visor .capa-cerrar{color:var(--sobre-tinta)}
.tar-visor .capa-cerrar:hover{background:var(--tinta-hover);color:var(--sobre-tinta)}
.tar-visor .capa-cuerpo{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--e3) var(--e3)}
.tar-visor :focus-visible{outline-color:var(--acento-suave)}
.tar-visor-foto{
  display:block;flex:0 1 auto;min-height:0;max-width:100%;width:auto;height:auto;
  max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);
  object-fit:contain;border-radius:var(--r-peq);cursor:zoom-out;
}
@media (max-width:899px){
  .tar-visor.modal{
    max-height:calc(100vh - max(var(--e4),env(safe-area-inset-top)) - var(--e4) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - max(var(--e4),env(safe-area-inset-top)) - var(--e4) - env(safe-area-inset-bottom));
  }
  .tar-visor-foto{
    max-height:calc(100vh - max(var(--e4),env(safe-area-inset-top)) - var(--e4) - env(safe-area-inset-bottom) - 80px);
    max-height:calc(100dvh - max(var(--e4),env(safe-area-inset-top)) - var(--e4) - env(safe-area-inset-bottom) - 80px);
  }
}