/* Gestión de Proyectos AUF — capa de aplicación.
   Regla: se entiende de un vistazo o está mal. Tarjetas, no tablas.
   Todo lo de administrar vive plegado. */

/* --- Estructura ------------------------------------------------------ */
.wrap { max-width: 900px; margin: 0 auto; padding: 0 var(--auf-esp-5) var(--auf-esp-6); }

/* La barra ocupa todo el ancho, pero su contenido se alinea con el texto. */
.barra { background: var(--auf-azul); color: #fff; }
.barra-int { max-width: 900px; margin: 0 auto; padding: var(--auf-esp-3) var(--auf-esp-5);
             display: flex; align-items: center; gap: var(--auf-esp-3); }
/* El header no lleva navegación: solo escudo, nombre y usuario. */
/* El escudo va con máscara: así toma el color que le pidamos.
   El SVG de AUF viene en blanco y sobre fondo claro no se vería. */
.barra .escudo {
  width: 24px; height: 44px; flex: none; background-color: #fff;
  -webkit-mask: url(/img/auf.svg) center / contain no-repeat;
          mask: url(/img/auf.svg) center / contain no-repeat; }
.barra h1 { font-size: 16px; color: #fff; font-weight: 700; margin: 0; letter-spacing: .04em; }
.barra .quien { margin-left: auto; font-size: 13px; color: #fff; opacity: .85; }

.franja { display: flex; height: 4px; }
.franja i { flex: 1; }
.franja i:nth-child(1) { background: var(--auf-celeste-vivo); }
.franja i:nth-child(2) { background: var(--auf-marino); }
.franja i:nth-child(3) { background: var(--auf-verde); }

h2 { font-size: 26px; margin: var(--auf-esp-6) 0 var(--auf-esp-4); }
h3 { font-size: 18px; }
.encabezado { display: flex; align-items: center; gap: var(--auf-esp-4); }
.encabezado h2 { flex: 1; }
/* REGLA: el texto ocupa el ancho de su contenedor. Nada de max-width en
   párrafos: corta la línea a mitad de camino y deja media pantalla vacía,
   con la columna pegada a la izquierda. El ancho de lectura lo fija .wrap. */
.resumen { color: var(--auf-texto-suave); margin: 0 0 var(--auf-esp-4); }
.suave { color: var(--auf-texto-suave); }
.chico { font-size: 13px; }
.vacio { color: var(--auf-texto-suave); font-style: italic; }
.error { color: var(--auf-alerta); font-weight: 700; }
.auf-btn.grande { font-size: 16px; padding: var(--auf-esp-2) var(--auf-esp-5); }

/* --- Lo que pide atención: arriba de todo, imposible de no ver ------- */
.atencion { border: 2px solid var(--auf-espera); margin-top: var(--auf-esp-5); }
.atencion h2 { background: var(--auf-espera); color: #fff; font-size: 15px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .05em;
               margin: 0; padding: var(--auf-esp-3) var(--auf-esp-4); }
.pedido { display: flex; align-items: center; gap: var(--auf-esp-4); flex-wrap: wrap;
          padding: var(--auf-esp-4); border-top: 1px solid #EEE; }
.pedido:first-of-type { border-top: 0; }
.pedido-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.pedido-txt b { font-size: 17px; }
.pedido-txt .suave { font-size: 13px; }
.pedido-txt .mirar { font-size: 13.5px; font-weight: 600; }
.pedido-btn { display: flex; gap: var(--auf-esp-2); align-items: center; flex: none; margin: 0; }

/* --- Tarjetas de proyecto -------------------------------------------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: var(--auf-esp-3); }
.tarjeta { display: block; border: 1px solid var(--auf-gris-borde); border-top: 4px solid var(--auf-gris-borde);
           padding: var(--auf-esp-4); color: var(--auf-texto); text-decoration: none; background: #fff; }
.tarjeta:hover { text-decoration: none; border-color: var(--auf-celeste); box-shadow: var(--auf-sombra); }
.tarjeta h3 { margin: 0 0 var(--auf-esp-3); font-size: 17px; line-height: 1.3; }
.tarjeta .estado { font-weight: 700; font-size: 15px; margin: var(--auf-esp-3) 0 2px; }
.tarjeta .detalle { font-size: 13px; color: var(--auf-texto-suave); margin: 0; }

.tarjeta.espera { border-top-color: var(--auf-espera); }
.tarjeta.espera .estado { color: var(--auf-espera); }
.tarjeta.verde  { border-top-color: var(--auf-ok); }
.tarjeta.verde .estado  { color: var(--auf-ok); }
.tarjeta.azul   { border-top-color: var(--auf-celeste-vivo); }
.tarjeta.azul .estado   { color: var(--auf-azul); }
.tarjeta.gris   { border-top-color: var(--auf-gris-borde); }
.tarjeta.gris .estado   { color: var(--auf-texto-suave); }
.tarjeta.gris h3 { color: var(--auf-texto-suave); }

/* --- La barrita de avance: 5 bloques, se lee sin leer ---------------- */
.barra-etapas { display: flex; gap: 3px; }
.barra-etapas i { flex: 1; height: 6px; background: #E4E4E4; }
.barra-etapas i.llena { background: var(--auf-celeste-vivo); }
.barra-etapas.apagada i.llena { background: #C8C8C8; }

/* --- Cabecera del detalle -------------------------------------------- */
.cabecera-proyecto { border-top: 4px solid var(--auf-gris-borde); padding-top: var(--auf-esp-4);
                     margin-top: var(--auf-esp-5); }
.cabecera-proyecto h2 { margin: 0 0 var(--auf-esp-2); }
.cabecera-proyecto.espera { border-top-color: var(--auf-espera); }
.cabecera-proyecto.verde  { border-top-color: var(--auf-ok); }
.cabecera-proyecto.azul   { border-top-color: var(--auf-celeste-vivo); }
.paso-actual { display: flex; margin: 4px 0 var(--auf-esp-4); font-size: 11.5px;
               color: var(--auf-texto-suave); }
.paso-actual span { flex: 1; text-align: center; }
.paso-actual span:first-child { text-align: left; }
.paso-actual span:last-child { text-align: right; }
.paso-actual span.aca { color: var(--auf-azul); font-weight: 700; }
.estado.grande { font-size: 22px; font-weight: 700; margin: 0 0 2px; }
.cabecera-proyecto.espera .estado.grande { color: var(--auf-espera); }
.cabecera-proyecto.verde  .estado.grande { color: var(--auf-ok); }
.cabecera-proyecto.azul   .estado.grande { color: var(--auf-azul); }
.cabecera-proyecto .detalle { color: var(--auf-texto-suave); margin: 0; }
.plazo.cerca   { color: var(--auf-espera); font-weight: 700; }
.plazo.vencido { color: var(--auf-alerta); font-weight: 700; }

/* --- Bloques (plataformas) -------------------------------------------- */
.separador { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
             color: var(--auf-texto-suave); margin: var(--auf-esp-6) 0 var(--auf-esp-3); }
.bloque { border: 1px solid var(--auf-gris-borde); padding: var(--auf-esp-4); margin-bottom: var(--auf-esp-3); }
.bloque-tit { display: flex; align-items: center; gap: var(--auf-esp-3); flex-wrap: wrap; }
.bloque-tit b { flex: 1; font-size: 16px; }
.como { background: var(--auf-gris-fondo); padding: var(--auf-esp-3);
        margin: var(--auf-esp-3) 0 0; font-size: 14px; white-space: pre-wrap; }
.gente { list-style: none; padding: 0; margin: var(--auf-esp-3) 0 0; font-size: 14px; }
.gente li { padding: 5px 0; border-bottom: 1px solid #F0F0F0; display: flex; gap: var(--auf-esp-2);
            align-items: baseline; flex-wrap: wrap; }
.gente li form { margin-left: auto; }
.gente.grande li { font-size: 15px; padding: var(--auf-esp-3) 0; }
.link-borrar { background: none; border: 0; color: var(--auf-texto-suave); font-size: 12px;
               cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0; }
.link-borrar:hover { color: var(--auf-alerta); }

/* --- Plegados: todo lo que no se mira siempre ------------------------- */
.plegado { margin-top: var(--auf-esp-5); border-top: 1px solid var(--auf-gris-borde); }
.plegado > summary { cursor: pointer; padding: var(--auf-esp-3) 0; font-size: 14px; font-weight: 600;
                     color: var(--auf-texto-suave); list-style: none; }
.plegado > summary::-webkit-details-marker { display: none; }
.plegado > summary::before { content: '▸ '; color: var(--auf-celeste); }
.plegado[open] > summary::before { content: '▾ '; }
.plegado > summary:hover { color: var(--auf-azul); }
.plegado.chico { margin-top: var(--auf-esp-3); border-top: 0; }
.plegado.chico > summary { padding: var(--auf-esp-2) 0; font-size: 13px; }
.bitacora { list-style: none; padding: 0; margin: var(--auf-esp-3) 0 0; font-size: 13.5px; }
.bitacora li { padding: 5px 0; border-bottom: 1px solid #F5F5F5; }
.par-botones { display: flex; gap: var(--auf-esp-2); margin: var(--auf-esp-3) 0; }

/* --- Formularios ------------------------------------------------------ */
input, select, textarea {
  font-family: var(--auf-font); font-size: 15px; color: var(--auf-texto);
  border: 1px solid var(--auf-gris-borde); border-radius: var(--auf-radio);
  padding: 8px var(--auf-esp-3); background: #fff; max-width: 100%; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--auf-celeste); outline-offset: -1px; border-color: var(--auf-celeste); }
textarea { width: 100%; box-sizing: border-box; resize: vertical; }

.caja { border: 1px solid var(--auf-gris-borde); background: var(--auf-gris-fondo);
        padding: var(--auf-esp-4); margin-top: var(--auf-esp-3); }
.caja b { display: block; font-size: 14px; margin-bottom: var(--auf-esp-3); }
.campos { display: flex; gap: var(--auf-esp-2); flex-wrap: wrap; margin-bottom: var(--auf-esp-2); }
.campos input { flex: 1 1 160px; min-width: 0; }
.en-linea { display: flex; gap: var(--auf-esp-2); align-items: center; flex-wrap: wrap;
            margin: var(--auf-esp-3) 0 0; }
.en-linea input { flex: 1 1 140px; }

.form-angosto { display: flex; flex-direction: column; gap: var(--auf-esp-3); max-width: 320px; }
.form-angosto.ancho { max-width: 560px; }
.form-angosto label { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
                      font-weight: 600; color: var(--auf-texto-suave); }
.form-angosto button { align-self: flex-start; margin-top: var(--auf-esp-2); }
.par { display: flex; gap: var(--auf-esp-3); }
.par label { flex: 1; }
.centrado { max-width: 320px; margin: 10vh auto 0; }
.escudo-grande {
  display: block; width: 47px; height: 85px; margin-bottom: var(--auf-esp-4);
  background-color: var(--auf-azul);
  -webkit-mask: url(/img/auf.svg) center / contain no-repeat;
          mask: url(/img/auf.svg) center / contain no-repeat; }
.borrar-abajo { margin-top: var(--auf-esp-6); }
.pie { margin-top: var(--auf-esp-6); font-size: 14px; }

/* --- Celular ---------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap { padding: 0 var(--auf-esp-4) var(--auf-esp-5); }
  .barra-int { padding: var(--auf-esp-2) var(--auf-esp-4); }
  .barra .escudo { width: 21px; height: 38px; }
  h2 { font-size: 22px; }
  .grilla { grid-template-columns: 1fr; }
  .par { flex-direction: column; gap: var(--auf-esp-3); }
  .pedido-btn { width: 100%; }
  .pedido-btn .auf-btn { flex: 1; }
  .paso-actual { font-size: 10px; }
}

/* --- Presupuesto ------------------------------------------------------ */
.plata { display: flex; gap: var(--auf-esp-3); flex-wrap: wrap; margin-bottom: var(--auf-esp-3); }
.cifra { flex: 1 1 200px; border: 1px solid var(--auf-gris-borde); border-left: 4px solid var(--auf-azul);
         padding: var(--auf-esp-3) var(--auf-esp-4); }
.cifra b { display: block; font-size: 26px; line-height: 1.1; color: var(--auf-azul); }
.cifra span { font-size: 12.5px; color: var(--auf-texto-suave); }
.costos li { justify-content: space-between; }
.costos li b { font-variant-numeric: tabular-nums; }
.campo-plata { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600;
               color: var(--auf-texto-suave); flex: 1 1 160px; }
.auf-tag--uso-var { color: var(--auf-marino); font-size: 10px; }
.costos li.total { border-top: 2px solid var(--auf-texto); border-bottom: 0; font-weight: 700;
                   margin-top: var(--auf-esp-2); padding-top: var(--auf-esp-2); }
.proyectos-plata li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--auf-esp-4);
                      align-items: baseline; }
.proyectos-plata li b { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }

/* --- Lo que sigue ----------------------------------------------------- */
.loquesigue { border: 1px solid var(--auf-gris-borde); border-left: 4px solid var(--auf-celeste-vivo);
              padding: var(--auf-esp-3) var(--auf-esp-4); margin: var(--auf-esp-4) 0;
              display: flex; flex-direction: column; gap: 2px; }
.loquesigue.auf   { border-left-color: var(--auf-espera); }
.loquesigue.listo { border-left-color: var(--auf-ok); }
.loquesigue b { font-size: 18px; }
.loquesigue .suave { font-size: 13px; }
.rotulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
          color: var(--auf-texto-suave); }

/* --- Lista de pasos ---------------------------------------------------- */
.pasos-lista { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.pasos-lista li { display: flex; align-items: center; gap: var(--auf-esp-3);
                  padding: var(--auf-esp-3) 0; border-bottom: 1px solid #F0F0F0; }
.pasos-lista li .txt { flex: 1; font-size: 15px; }
.pasos-lista li.hecho .txt { color: var(--auf-texto-suave); text-decoration: line-through; }
.pasos-lista li.sigue { background: #FBFBFB; }
.pasos-lista li.sigue .txt { font-weight: 700; }
.tilde { margin: 0; flex: none; }
/* El tilde se dibuja con CSS: dos bordes rotados. Nada de emojis. */
.tilde button { width: 26px; height: 26px; border: 1px solid var(--auf-gris-borde); background: #fff;
                cursor: pointer; padding: 0; position: relative; }
.pasos-lista li.hecho .tilde button::after {
  content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 12px;
  border: solid var(--auf-ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tilde button:hover { border-color: var(--auf-celeste); }
.pasos-lista li.hecho .tilde button { background: var(--auf-gris-fondo); border-color: var(--auf-ok); }
.sigue-mini { margin: var(--auf-esp-3) 0 0; padding-top: var(--auf-esp-2);
              border-top: 1px solid #F0F0F0; font-size: 13px; color: var(--auf-texto); }
.sigue-mini .rotulo { margin-right: var(--auf-esp-2); }

/* --- Menú de secciones ------------------------------------------------ */
.menu { border-bottom: 1px solid var(--auf-gris-borde); background: #fff; }
.menu-int { max-width: 900px; margin: 0 auto; padding: 0 var(--auf-esp-5);
            display: flex; gap: var(--auf-esp-5); overflow-x: auto; }
.menu a { padding: var(--auf-esp-3) 0; font-size: 14px; font-weight: 600;
          color: var(--auf-texto-suave); border-bottom: 2px solid transparent;
          margin-bottom: -1px; white-space: nowrap; }
.menu a:hover { color: var(--auf-azul); text-decoration: none; }
.menu a.aca { color: var(--auf-azul); border-bottom-color: var(--auf-azul); }

/* --- Títulos de sección ------------------------------------------------ */
.seccion { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
           color: var(--auf-texto-suave); margin: var(--auf-esp-6) 0 var(--auf-esp-2);
           display: flex; align-items: center; gap: var(--auf-esp-2); }
.seccion .cuantos { background: var(--auf-gris-fondo); color: var(--auf-texto-suave);
                    font-size: 11px; padding: 1px 7px; letter-spacing: 0; }
.seccion + .resumen.chico { margin: 0 0 var(--auf-esp-3); font-size: 13px; }
@media (max-width: 640px) { .menu-int { padding: 0 var(--auf-esp-4); gap: var(--auf-esp-4); } }

/* --- Presupuesto por proyecto ----------------------------------------- */
.presu { border: 1px solid var(--auf-gris-borde); border-top: 3px solid var(--auf-azul);
         padding: var(--auf-esp-4); margin-bottom: var(--auf-esp-4); }
.presu-tit { display: flex; align-items: center; gap: var(--auf-esp-3);
             margin-bottom: var(--auf-esp-3); }
.presu-tit b { font-size: 17px; }
.presu-tit a { color: var(--auf-texto); }
.presu .plata { margin-bottom: var(--auf-esp-2); }
.cifra.gasto { border-left-color: var(--auf-espera); }
.cifra.gasto b { color: var(--auf-espera); }
p.rotulo { margin: var(--auf-esp-4) 0 var(--auf-esp-2); }
.atencion .adentro { padding: var(--auf-esp-4); }
.auf-btn.chico { font-size: 12px; padding: 2px var(--auf-esp-2); line-height: 1.6; }

/* --- Interno: lo que AUF no ve --------------------------------------- */
.plegado.interno > summary { color: var(--auf-marino); }
.plegado.interno > summary::before { content: '▸ '; }
.plegado.interno[open] > summary::before { content: '▾ '; }

/* --- Comentarios ------------------------------------------------------ */
.charla { border-top: 1px solid var(--auf-gris-borde); margin-top: var(--auf-esp-4); padding-top: var(--auf-esp-2); }
.mensajes { list-style: none; padding: 0; margin: 0 0 var(--auf-esp-3); }
.mensajes li { border-left: 3px solid var(--auf-gris-borde); padding: var(--auf-esp-2) var(--auf-esp-3);
               margin-bottom: var(--auf-esp-2); background: var(--auf-gris-fondo); }
.mensajes li.propio { border-left-color: var(--auf-azul); background: #fff; }
.mensajes li p { margin: 2px 0 0; font-size: 14px; }
.link-acceso { display: flex; gap: var(--auf-esp-2); align-items: center; flex: 1 1 260px; }
.link-acceso input { flex: 1; font-size: 12px; color: var(--auf-texto-suave); padding: 4px 6px; }

/* --- Decisión de la Dirección ----------------------------------------- */
.decidir { display: flex; gap: var(--auf-esp-2); align-items: center; flex-wrap: wrap;
           border: 2px solid var(--auf-espera); padding: var(--auf-esp-3); margin-top: var(--auf-esp-4); }
.decidir .rotulo { flex: 1 1 100%; }
.decidir input { flex: 1 1 200px; }
.decidido { margin-top: var(--auf-esp-4); font-size: 14px; }
.decidido.ok { color: var(--auf-ok); font-weight: 700; }
.tilde-txt { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--auf-texto-suave); }
.tilde-txt input { width: auto; }

/* --- Campana ---------------------------------------------------------- */
.campana { margin-left: auto; position: relative; text-decoration: none; color: #fff;
            font-size: 13px; font-weight: 600; opacity: .9; }
.campana:hover { text-decoration: underline; color: #fff; }
.campana .burbuja { background: var(--auf-espera); color: #fff; font-size: 10px;
                    font-weight: 700; padding: 1px 5px; margin-left: 5px; }
.barra .quien { margin-left: var(--auf-esp-4); }

/* --- Muro ------------------------------------------------------------- */
.publicar { border: 1px solid var(--auf-gris-borde); padding: var(--auf-esp-3); margin-bottom: var(--auf-esp-4); }
.publicar textarea { border: 0; padding: var(--auf-esp-2); font-size: 15px; }
.publicar textarea:focus { outline: 0; }
.publicar-pie { display: flex; align-items: center; gap: var(--auf-esp-3);
                border-top: 1px solid #F0F0F0; padding-top: var(--auf-esp-2); }
.adjuntar { flex: 1; font-size: 13.5px; color: var(--auf-texto-suave); cursor: pointer; }
.adjuntar input { display: none; }
.adjuntar:hover { color: var(--auf-azul); }

.muro { list-style: none; padding: 0; margin: 0; }
.muro li { border-bottom: 1px solid #F0F0F0; padding: var(--auf-esp-3) 0; }
.muro .cabeza { display: flex; align-items: baseline; gap: var(--auf-esp-2); flex-wrap: wrap; }
.muro p { margin: var(--auf-esp-2) 0 0; font-size: 15px; white-space: pre-wrap; }
.adjuntos { display: flex; flex-wrap: wrap; gap: var(--auf-esp-2); margin-top: var(--auf-esp-3); }
.adjuntos .foto img { max-height: 180px; max-width: 100%; border: 1px solid var(--auf-gris-borde); display: block; }
.adjuntos .archivo::before { content: '\2014'; color: var(--auf-texto-suave); }
.adjuntos .archivo { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--auf-gris-borde);
                     padding: var(--auf-esp-2) var(--auf-esp-3); font-size: 13.5px; color: var(--auf-texto); }
.adjuntos .archivo:hover { border-color: var(--auf-celeste); text-decoration: none; }

/* --- Avisos ----------------------------------------------------------- */
.avisos { list-style: none; padding: 0; margin: 0; }
.avisos li { padding: var(--auf-esp-3) 0; border-bottom: 1px solid #F0F0F0;
             display: flex; justify-content: space-between; gap: var(--auf-esp-3); font-size: 14px; }
.avisos li.nuevo { border-left: 3px solid var(--auf-espera); padding-left: var(--auf-esp-3); background: #FFFCF5; }

/* --- Progreso de subida ------------------------------------------------ */
.progreso { display: none; margin-top: var(--auf-esp-2); position: relative;
            background: var(--auf-gris-fondo); height: 22px; }
.progreso.activa { display: block; }
.progreso .barra-int { background: var(--auf-celeste-vivo); height: 100%; width: 0; transition: width .2s; }
.progreso .txt { position: absolute; inset: 0; display: flex; align-items: center;
                 justify-content: center; font-size: 12px; font-weight: 600; color: var(--auf-texto); }
.progreso.mal .barra-int { background: var(--auf-alerta); }
.elegidos { font-size: 12.5px; color: var(--auf-texto-suave); margin-right: var(--auf-esp-3); }

/* --- Detalle adentro de cada paso -------------------------------------- */
.pasos-lista li { display: block; }
.pasos-lista .fila { display: flex; align-items: center; gap: var(--auf-esp-3); }
.detalle-paso { margin: var(--auf-esp-2) 0 0 38px; }
.detalle-paso > summary { cursor: pointer; font-size: 12.5px; color: var(--auf-celeste);
                          list-style: none; padding: 2px 0; }
.detalle-paso > summary::-webkit-details-marker { display: none; }
.detalle-paso > summary::before { content: '▸ '; }
.detalle-paso[open] > summary::before { content: '▾ '; }
.detalle-paso.editar > summary { color: var(--auf-texto-suave); }
.texto-detalle { background: var(--auf-gris-fondo); padding: var(--auf-esp-3);
                 font-size: 13.5px; line-height: 1.65; margin-top: 4px; }
.detalle-paso textarea { margin-top: var(--auf-esp-2); }
@media (max-width: 640px) { .detalle-paso { margin-left: 0; } }

/* --- Fases del plan ---------------------------------------------------- */
.avance { position: relative; background: var(--auf-gris-fondo); height: 24px;
          margin: var(--auf-esp-4) 0 var(--auf-esp-5); }
.avance-int { background: var(--auf-celeste-vivo); height: 100%; transition: width .3s; }
.avance span { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: center; font-size: 12px; font-weight: 600; }
.fase { border-left: 3px solid var(--auf-gris-borde); padding-left: var(--auf-esp-4);
        margin-bottom: var(--auf-esp-6); }
.fase.ahora { border-left-color: var(--auf-celeste-vivo); }
.fase.lista { border-left-color: var(--auf-ok); }
.fase > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
             color: var(--auf-texto-suave); margin: 0 0 var(--auf-esp-2);
             display: flex; align-items: center; gap: var(--auf-esp-2); }
.fase.ahora > h3 { color: var(--auf-azul); }
.fase > h3 .cuantos { background: var(--auf-gris-fondo); font-size: 11px;
                      padding: 1px 7px; letter-spacing: 0; }

/* --- Decidir adentro del paso ------------------------------------------ */
.opciones { margin: var(--auf-esp-2) 0 0 38px; display: grid; gap: var(--auf-esp-2); }
.opcion { border: 1px solid var(--auf-gris-borde); padding: var(--auf-esp-3);
          display: flex; gap: var(--auf-esp-3); align-items: center; flex-wrap: wrap; }
.opcion:hover { border-color: var(--auf-celeste); }
.opcion-txt { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; }
.opcion-txt b { font-size: 15px; }
.opcion-txt span { font-size: 13px; color: var(--auf-texto-suave); line-height: 1.5; }
.elegido { margin: var(--auf-esp-2) 0 0 38px; color: var(--auf-ok); font-size: 14px; }
@media (max-width: 640px) { .opciones, .elegido { margin-left: 0; } }
.editar-monto { display: flex; align-items: center; gap: 4px; margin: 0; }
.editar-monto .signo { font-size: 12px; color: var(--auf-texto-suave); }
.editar-monto input { width: 90px; text-align: right; font-size: 13px; padding: 3px 6px;
                      font-variant-numeric: tabular-nums; }
.cifra span i { font-style: normal; font-weight: 700; color: var(--auf-texto-suave); }
.iva { font-size: 13px; color: var(--auf-texto-suave); margin: 0 0 var(--auf-esp-3); }
.iva b { color: var(--auf-texto); }
.resumen .auf-tag { font-size: 10px; }

/* --- Quién es quién ---------------------------------------------------- */
.quienes { border: 1px solid var(--auf-gris-borde); background: var(--auf-gris-fondo);
           padding: var(--auf-esp-3) var(--auf-esp-4); margin-bottom: var(--auf-esp-4); }
.quienes p { margin: 0 0 var(--auf-esp-2); font-size: 13.5px; line-height: 1.6;
             color: var(--auf-texto-suave); }
.quienes p:last-child { margin-bottom: 0; }
.quienes .auf-tag { margin-right: var(--auf-esp-2); }

/* --- Portada del plan: se tiene que notar que es la página principal ---- */
.portada { border-top: 5px solid var(--auf-celeste-vivo); background: var(--auf-gris-fondo);
           padding: var(--auf-esp-5); margin: var(--auf-esp-5) 0 var(--auf-esp-4); }
.portada .rotulo { margin: 0 0 var(--auf-esp-2); color: var(--auf-azul); }
.portada h2 { font-size: 34px; margin: 0 0 var(--auf-esp-3); line-height: 1.1; }
.portada .bajada { margin: 0; font-size: 16px; line-height: 1.6; color: var(--auf-texto); }
.portada .freno { margin: var(--auf-esp-4) 0 0; padding: var(--auf-esp-3) var(--auf-esp-4);
                  background: #fff; border-left: 4px solid var(--auf-espera);
                  font-size: 15px; }
.portada .freno b { color: var(--auf-espera); }
@media (max-width: 640px) {
  .portada { padding: var(--auf-esp-4); }
  .portada h2 { font-size: 26px; }
  .portada .bajada { font-size: 15px; }
}

/* --- Opción recomendada ------------------------------------------------ */
.opcion.recomendada { border: 2px solid var(--auf-ok); background: #F6FCF7; }
.opcion.recomendada .opcion-txt b { color: var(--auf-ok); }
.opcion .marca { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--auf-ok); }
.opcion.recomendada .auf-btn--lleno { background: var(--auf-ok); border-color: var(--auf-ok); }
.opcion.recomendada .auf-btn--lleno:hover { background: #0d7d2e; border-color: #0d7d2e; }

/* --- Arreglo: los campos adentro de una etiqueta no se estiran ---------
   `.campos input { flex: 1 1 160px }` aplicaba también a los inputs que
   están dentro de un <label> en columna, y ahí "crecer" es crecer a lo
   ALTO. Resultado: un campo de número de 300 px de alto. */
.campos { align-items: flex-start; }
.campo-plata { flex: 1 1 200px; }
.campo-plata input,
.campo-plata select,
.campo-plata textarea { flex: none; width: 100%; box-sizing: border-box; }

/* --- Bloque de edición de números -------------------------------------- */
.plegado.numeros > summary { color: var(--auf-azul); font-size: 15px; }
.plegado.numeros .rotulo { margin: var(--auf-esp-5) 0 var(--auf-esp-2); }
.plegado.numeros .caja { margin-top: var(--auf-esp-3); }

/* --- Mejoras ----------------------------------------------------------- */
.mejoras { display: grid; gap: var(--auf-esp-3); }
.mejora { border: 1px solid var(--auf-gris-borde); border-left: 4px solid var(--auf-celeste-vivo);
          padding: var(--auf-esp-4); }
.mejora.aprobado { border-left-color: var(--auf-ok); background: #F6FCF7; }
.mejora.presentado { border-left-color: var(--auf-espera); }
.mejora.descartada { border-left-color: var(--auf-gris-borde); opacity: .6; }
.mejora.borrador { border-left-style: dashed; }
.mejora-tit { display: flex; align-items: baseline; gap: var(--auf-esp-2); flex-wrap: wrap; }
.mejora-tit b { font-size: 16px; }
.mejora p { margin: var(--auf-esp-2) 0 0; font-size: 14px; line-height: 1.55; }
.mejora .precio { font-size: 18px; font-weight: 700; color: var(--auf-azul); margin-top: var(--auf-esp-3); }
.mejora .precio i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--auf-texto-suave); }
.mejora .precio .suave { font-size: 13px; font-weight: 400; }
.mejora .en-linea { margin-top: var(--auf-esp-3); }
.costos.suma { margin-top: var(--auf-esp-3); }

/* --- Lista simple de costos: nombre y número, nada más ------------------ */
.costos.simple li { display: flex; justify-content: space-between; align-items: baseline;
                    gap: var(--auf-esp-4); padding: 7px 0; border-bottom: 1px solid #F2F2F2; }
.costos.simple b { font-variant-numeric: tabular-nums; }
.costos.simple .incluidos span { color: var(--auf-texto-suave); font-size: 13px; }
.costos.simple .incluidos b { color: var(--auf-texto-suave); font-weight: 400; font-size: 13px; }

/* --- Nota interna del paso: visible, pero claramente distinta ----------- */
.texto-detalle.solo-vos { background: #FFFDF5; border-left: 3px solid var(--auf-espera);
                          margin: var(--auf-esp-2) 0 0 38px; }
.texto-detalle.solo-vos .rotulo { display: block; color: var(--auf-espera);
                                  margin-bottom: var(--auf-esp-2); }
@media (max-width: 640px) { .texto-detalle.solo-vos { margin-left: 0; } }

/* --- Bloque del costo de la base --------------------------------------- */
.bloque-costo { border: 1px solid var(--auf-gris-borde); border-top: 4px solid var(--auf-espera);
                padding: var(--auf-esp-5); margin: var(--auf-esp-6) 0; }
.bloque-costo > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--auf-texto-suave); margin: 0 0 var(--auf-esp-3); }
.bloque-costo > p { margin: 0 0 var(--auf-esp-3); color: var(--auf-texto-suave); line-height: 1.6; }
.cifra-grande { margin: var(--auf-esp-4) 0 var(--auf-esp-3); }
.cifra-grande b { display: block; font-size: 32px; line-height: 1; color: var(--auf-espera); }
.cifra-grande span { font-size: 13px; color: var(--auf-texto-suave); }
.bloque-costo .costos.simple { margin-top: 0; }
@media (max-width: 640px) { .bloque-costo { padding: var(--auf-esp-4); } }
.portada .gratis { margin-top: var(--auf-esp-3); padding: var(--auf-esp-3) var(--auf-esp-4);
                   background: #fff; border-left: 4px solid var(--auf-ok); font-size: 15px; }
.portada .gratis b { color: var(--auf-ok); }
.interno-linea { margin-top: var(--auf-esp-3); color: var(--auf-espera); }

/* --- Ver como la Dirección --------------------------------------------- */
.mirando { background: var(--auf-espera); color: #fff; }
.mirando-int { max-width: 900px; margin: 0 auto; padding: var(--auf-esp-2) var(--auf-esp-5);
               font-size: 13px; font-weight: 600; display: flex; gap: var(--auf-esp-3);
               align-items: center; }
.mirando-int a { color: #fff; text-decoration: underline; margin-left: auto; }
.barra .ver-como { margin-left: auto; }
.barra .ver-como + .quien { margin-left: var(--auf-esp-3); }
@media (max-width: 640px) { .mirando-int { padding: var(--auf-esp-2) var(--auf-esp-4); } }
.plegado.pedir-destacado { border: 2px solid var(--auf-celeste); border-top: 2px solid var(--auf-celeste);
                           padding: 0 var(--auf-esp-4); margin: var(--auf-esp-4) 0; }
.plegado.pedir-destacado > summary { color: var(--auf-azul); font-size: 15px; font-weight: 700;
                                     padding: var(--auf-esp-3) 0; }

/* --- Respuestas dentro del muro ---------------------------------------- */
.respuestas { list-style: none; margin: var(--auf-esp-3) 0 0 var(--auf-esp-5);
              padding-left: var(--auf-esp-4); border-left: 2px solid var(--auf-gris-borde); }
.respuestas li { padding: var(--auf-esp-2) 0; border: 0; }
.respuestas p { margin: 2px 0 0; font-size: 14.5px; }
.responder { margin-top: var(--auf-esp-3); }
.responder input { flex: 1 1 220px; }
.muro .cabeza .auf-tag { font-size: 10px; }
@media (max-width: 640px) { .respuestas { margin-left: 0; } }

/* --- Formularios que invitan a participar: nunca escondidos ------------- */
.caja.invitar { background: #fff; border-left: 4px solid var(--auf-celeste); }
.caja.invitar b { color: var(--auf-azul); font-size: 15px; }

.volver { margin: var(--auf-esp-4) 0 0; font-size: 13.5px; }
.volver a { color: var(--auf-texto-suave); }
.volver a:hover { color: var(--auf-azul); }

/* --- Qué hace la plataforma -------------------------------------------- */
.quehace { border: 1px solid var(--auf-gris-borde); border-left: 4px solid var(--auf-celeste-vivo);
           padding: var(--auf-esp-4) var(--auf-esp-5); margin: var(--auf-esp-5) 0; }
.qh-bloque + .qh-bloque { margin-top: var(--auf-esp-5); }
.qh-bloque h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                color: var(--auf-texto-suave); margin: 0 0 var(--auf-esp-2); }
.qh-bloque p { margin: 0; line-height: 1.65; }
.capacidades { list-style: none; padding: 0; margin: 0; }
.capacidades li { display: flex; gap: var(--auf-esp-3); align-items: baseline; flex-wrap: wrap;
                  padding: var(--auf-esp-2) 0; border-bottom: 1px solid #F2F2F2; }
.capacidades li b { flex: 0 0 210px; color: var(--auf-azul); }
.capacidades li span { flex: 1 1 240px; }
.capacidades li form { margin-left: auto; }
@media (max-width: 640px) {
  .quehace { padding: var(--auf-esp-4); }
  .capacidades li b { flex: 1 1 100%; }
}

/* --- Conversación dentro de cada paso ---------------------------------- */
.charla-paso { margin: var(--auf-esp-2) 0 0 38px; }
.charla-paso .mensajes { margin-bottom: var(--auf-esp-2); }
.charla-paso .mensajes li { padding: var(--auf-esp-2) var(--auf-esp-3); }
.charla-paso .mensajes b { font-size: 13.5px; }
.charla-paso .mensajes p { font-size: 14px; }
.charla-paso .en-linea { margin-top: 0; }
.charla-paso .en-linea input { font-size: 13.5px; padding: 5px var(--auf-esp-2); }
@media (max-width: 640px) { .charla-paso { margin-left: 0; } }