/* Piezas de Proyectos GPON compartidas por el portal de constructoras y la
   vista de Panatel en Central (diseño aprobado en Claude Design, 13/10/2026).

   Prefijo propio, fgu-: el prefijo pg- existe en los dos lados con valores
   distintos y mezclarlos pisaría estilos. Los colores salen de los tokens
   --pg-*, que son iguales en _fgpon_estilos.html y portal_gpon/base.html; los
   tintes de prioridad (vencida / vence pronto / en plazo) se definen acá. */
:root{
  --fgu-rojo-fondo:#2c1419;  --fgu-rojo-borde:#7c2d3d;  --fgu-rojo-chip:#7c2d3d;  --fgu-rojo-chip-t:#fff;
  --fgu-ambar-fondo:#2b2412; --fgu-ambar-borde:#7a5f18; --fgu-ambar-chip:#f5c451; --fgu-ambar-chip-t:#2b2000;
  --fgu-verde-fondo:#14271f; --fgu-verde-borde:#1d6b4c; --fgu-verde-chip:#1d6b4c; --fgu-verde-chip-t:#e8fff3;
}

/* ── Contadores por prioridad ─────────────────────────────────────────── */
.fgu-conteo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fgu-conteo > *{ border-radius:12px; padding:10px 12px; border:1px solid; text-decoration:none;
                 display:flex; flex-direction:column; gap:1px; }
.fgu-conteo .n{ font-size:24px; font-weight:800; line-height:1.1; }
.fgu-conteo .l{ font-size:11.5px; font-weight:600; }
.fgu-conteo .vencida{ background:#3a1720; border-color:var(--fgu-rojo-borde); }
.fgu-conteo .vencida .n{ color:#ffbccb; } .fgu-conteo .vencida .l{ color:#f2c6d0; }
.fgu-conteo .pronto { background:#3a2f10; border-color:var(--fgu-ambar-borde); }
.fgu-conteo .pronto .n{ color:#ffd98a; }  .fgu-conteo .pronto .l{ color:#f1dcaa; }
.fgu-conteo .plazo  { background:#13312a; border-color:var(--fgu-verde-borde); }
.fgu-conteo .plazo .n{ color:#a9edc8; }   .fgu-conteo .plazo .l{ color:#bfe9d2; }
.fgu-conteo > .cero{ opacity:.55; }
@media (min-width: 901px){
  .fgu-conteo{ display:flex; gap:10px; }
  .fgu-conteo > *{ flex-direction:row; align-items:baseline; gap:8px; padding:10px 16px; }
  .fgu-conteo .l{ font-size:12.5px; }
}

/* ── Encabezado de sección ────────────────────────────────────────────── */
.fgu-sec{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.fgu-sec > .cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fgu-sec > .cab h2{ margin:0; font-size:16px; font-weight:700; color:var(--pg-texto); }
.fgu-sec > .cab .nota{ font-size:12.5px; color:var(--pg-mute); }

/* ── Tarjeta de tarea por prioridad ───────────────────────────────────── */
.fgu-tarea{ border:1px solid var(--pg-borde); border-radius:14px; padding:14px;
            display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
            background:var(--pg-panel); color:var(--pg-texto); }
.fgu-tarea.vencida{ background:var(--fgu-rojo-fondo);  border-color:var(--fgu-rojo-borde); }
.fgu-tarea.pronto { background:var(--fgu-ambar-fondo); border-color:var(--fgu-ambar-borde); }
.fgu-tarea.plazo  { background:var(--fgu-verde-fondo); border-color:var(--fgu-verde-borde); }
.fgu-tarea .arriba{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fgu-plazo{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap;
            background:#2a2a2e; color:var(--pg-texto-2); }
.fgu-tarea.vencida .fgu-plazo, .fgu-ahora.vencida .fgu-plazo, .fgu-plazo.vencida{ background:var(--fgu-rojo-chip);  color:var(--fgu-rojo-chip-t); }
.fgu-tarea.pronto .fgu-plazo, .fgu-ahora.pronto .fgu-plazo, .fgu-plazo.pronto { background:var(--fgu-ambar-chip); color:var(--fgu-ambar-chip-t); }
.fgu-tarea.plazo .fgu-plazo, .fgu-ahora.plazo .fgu-plazo, .fgu-plazo.plazo  { background:var(--fgu-verde-chip); color:var(--fgu-verde-chip-t); }
.fgu-tarea .fecha{ font-size:12px; color:var(--pg-texto-2); }
.fgu-tarea .que{ display:flex; flex-direction:column; gap:3px; }
.fgu-tarea .zona{ font-size:16px; font-weight:700; }
.fgu-tarea .unidad{ font-size:13px; color:var(--pg-texto-2); }
.fgu-tarea .motivo{ margin:0; font-size:13.5px; line-height:1.45; color:#e6e6e8; overflow-wrap:anywhere; }
.fgu-tarea .abajo{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fgu-tarea .version{ font-size:12px; color:var(--pg-texto-2); }
.fgu-accion{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
             min-height:44px; padding:0 18px; border-radius:10px; border:0;
             background:var(--pg-vino); color:#fff !important; font-size:14px; font-weight:700;
             text-decoration:none; white-space:nowrap; cursor:pointer; font-family:inherit; }
.fgu-accion:hover{ background:#93374a; }
.fgu-accion:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(217,138,155,.5); }
.fgu-accion.sec{ background:#26262a; border:1px solid #35353a; color:var(--pg-texto) !important; }
.fgu-accion.sec:hover{ background:#2f2f34; }
.fgu-accion:disabled{ background:#3a2a2f; color:#a89399 !important; cursor:default; }
@media (min-width: 901px){
  .fgu-tarea{ grid-template-columns:minmax(0,1fr) auto; padding:16px 18px; gap:8px 24px; align-items:center; }
  .fgu-tarea > .accion{ grid-column:2; grid-row:1 / span 4; }
  .fgu-tarea .zona{ font-size:17px; }
}

/* ── Lista corta (en revisión, en manos de otro) ──────────────────────── */
.fgu-lista{ background:var(--pg-panel); border:1px solid var(--pg-borde); border-radius:14px;
            display:flex; flex-direction:column; overflow:hidden; }
.fgu-lista > a{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px;
                border-bottom:1px solid var(--pg-sep); color:var(--pg-texto); text-decoration:none; }
.fgu-lista > a:last-child{ border-bottom:0; }
.fgu-lista > a:hover{ background:var(--pg-hover); }
.fgu-lista .punto{ width:10px; height:10px; margin-top:5px; border-radius:50%; flex:none; background:var(--pg-mute); }
.fgu-lista .punto.panatel{ background:var(--pg-ambar); }
.fgu-lista .punto.claro{ background:#d9a7bd; }
.fgu-lista .punto.constructora{ background:var(--pg-verde); }
.fgu-lista .txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.fgu-lista .t1{ font-size:14px; font-weight:600; }
.fgu-lista .t2{ font-size:12.5px; color:var(--pg-mute); }
.fgu-lista .vacio{ padding:14px; font-size:13px; color:var(--pg-mute); }

/* ── Tarjeta de proyecto con avance ───────────────────────────────────── */
.fgu-proy{ background:var(--pg-panel); border:1px solid var(--pg-borde); border-radius:14px;
           padding:13px 14px; display:flex; flex-direction:column; gap:7px;
           color:var(--pg-texto); text-decoration:none; }
.fgu-proy:hover{ background:var(--pg-hover); color:var(--pg-texto); }
.fgu-proy .fila{ display:flex; justify-content:space-between; gap:8px; }
.fgu-proy .nom{ font-size:14.5px; font-weight:700; }
.fgu-proy .cod{ font-size:12px; color:var(--pg-mute); }
.fgu-proy .eta{ font-size:12.5px; color:var(--pg-texto-2); }
.fgu-proy .barra{ height:6px; border-radius:99px; background:#2a2a2e; overflow:hidden; }
.fgu-proy .barra > i{ display:block; height:100%; background:var(--pg-vino); border-radius:99px; }
.fgu-proy .pie{ font-size:12px; color:var(--pg-mute); }

/* ── Bandeja de dos columnas en escritorio ────────────────────────────── */
.fgu-dos{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.fgu-dos > .principal{ flex:999 1 600px; min-width:0; }
.fgu-dos > .lateral{ flex:1 1 320px; min-width:0; }

/* ── Qué hacer ahora (ficha de unidad) ────────────────────────────────── */
.fgu-ahora{ border:1px solid var(--pg-borde); border-radius:14px; padding:14px 16px; margin-bottom:16px;
            display:flex; flex-direction:column; gap:8px; background:var(--pg-panel); }
.fgu-ahora.vencida{ background:var(--fgu-rojo-fondo);  border-color:var(--fgu-rojo-borde); }
.fgu-ahora.pronto { background:var(--fgu-ambar-fondo); border-color:var(--fgu-ambar-borde); }
.fgu-ahora.plazo  { background:var(--fgu-verde-fondo); border-color:var(--fgu-verde-borde); }
.fgu-ahora .fgu-plazo{ align-self:flex-start; }
.fgu-ahora h2{ margin:0; font-size:18px; font-weight:700; color:var(--pg-texto); }
.fgu-ahora p{ margin:0; font-size:13px; line-height:1.45; color:#e6c9cf; }
.fgu-ahora.pronto p{ color:#f1dcaa; } .fgu-ahora.plazo p{ color:#bfe9d2; }

/* ── Carga de archivos ────────────────────────────────────────────────── */
.fgu-carga{ display:flex; flex-direction:column; gap:10px; }
.fgu-carga .aviso{ font-size:12.5px; line-height:1.45; color:var(--pg-texto-2); margin:0; }
.fgu-archivo{ position:relative; border:1px solid var(--pg-borde); border-radius:14px; padding:13px 14px;
              display:flex; flex-direction:column; gap:7px; background:var(--pg-panel); }
.fgu-archivo.obligatorio{ border-style:dashed; border-color:var(--fgu-rojo-borde); }
.fgu-archivo.listo{ border-style:solid; border-color:var(--fgu-verde-borde); }
.fgu-archivo .cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fgu-archivo .nom{ font-size:14px; font-weight:700; }
.fgu-archivo .est{ font-size:11.5px; font-weight:700; color:var(--pg-mute); }
.fgu-archivo.obligatorio .est{ color:var(--pg-rojo); }
.fgu-archivo.listo .est{ color:var(--pg-verde); }
.fgu-archivo .det{ font-size:12px; color:var(--pg-mute); }
.fgu-archivo .elegidos{ display:flex; flex-direction:column; gap:6px; }
.fgu-archivo .elegido{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
                       background:var(--fgu-verde-fondo); font-size:13px; }
.fgu-archivo .elegido .tam{ margin-left:auto; font-size:12px; color:var(--pg-mute); white-space:nowrap; }
.fgu-archivo .elegido .nomarch{ overflow-wrap:anywhere; min-width:0; }
.fgu-archivo .elegido.malo{ background:var(--fgu-rojo-fondo); color:#ffbccb; }
/* El campo real queda encima del botón, invisible: el toque abre el selector
   del sistema (en el celular, con cámara cuando el archivo es una foto). */
.fgu-archivo .boton{ position:relative; min-height:46px; border-radius:10px; background:#26262a;
                     color:var(--pg-texto); font-size:14px; font-weight:700;
                     display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; }
.fgu-archivo .boton input[type=file]{ position:absolute; inset:0; width:100%; height:100%;
                                      opacity:0; cursor:pointer; font-size:0; }
.fgu-archivo .boton:focus-within{ box-shadow:0 0 0 3px rgba(217,138,155,.5); }
.fgu-archivo.listo .boton{ background:transparent; border:1px solid #35353a; color:var(--pg-texto-2);
                           font-weight:600; font-size:13px; min-height:42px; }
.fgu-progreso{ display:none; flex-direction:column; gap:6px; }
.fgu-progreso.on{ display:flex; }
.fgu-progreso .fila{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--pg-texto-2); }
.fgu-progreso .fila b{ color:var(--pg-texto); }
.fgu-progreso .pista{ height:8px; border-radius:99px; background:#2a2a2e; overflow:hidden; }
.fgu-progreso .pista > i{ display:block; height:100%; width:0; background:var(--pg-vino); transition:width .2s; }
.fgu-error{ display:none; border:1px solid var(--fgu-rojo-borde); background:var(--fgu-rojo-fondo);
            color:#ffbccb; border-radius:10px; padding:10px 12px; font-size:13px; }
.fgu-error.on{ display:block; }
.fgu-enviar{ display:flex; flex-direction:column; gap:6px; }
.fgu-enviar .falta{ font-size:12.5px; color:var(--pg-rojo); text-align:center; min-height:1em; }
.fgu-enviar .fgu-accion{ width:100%; min-height:50px; font-size:15px; }
@media (max-width: 900px){
  /* En el celular el botón de enviar queda a mano, encima de la barra de abajo. */
  .fgu-enviar.fijo{ position:sticky; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:5;
                    background:var(--pg-nav, #1b1b1e); border:1px solid #2a2a2e; border-radius:14px;
                    padding:10px 12px; box-shadow:0 -6px 18px rgba(0,0,0,.35); }
}
@media (max-width: 900px){
  .fgu-tarea .accion .fgu-accion{ width:100%; }   /* el botón de la tarjeta, al ancho del pulgar */
}