/*
  DRY 2040 · portal.css
  Estilos PROPIOS del portal de clientes que NO viven en premium.css:
   - Badges de estado de seguimiento por color (Recibida → Cerrada).
   - Mini línea de tiempo del seguimiento de cada cotización.
   - Sección "Cuenta" (cambio de contraseña).
  Solo tokens de marca. Se encola únicamente en /portal/ desde inc/portal.php.
*/

/* ── Badges de estado de seguimiento (cotizaciones) ────────────────
   Reutiliza la base .portal-badge de premium.css; aquí solo el color
   por estado de seguimiento del cotizador. */
.portal-badge--recibida    { background: var(--dry-info-tinte);    color: var(--dry-info); }
.portal-badge--revision    { background: var(--dry-warning-tinte); color: var(--dry-warning); }
.portal-badge--cotizada    { background: var(--dry-azul-tinte);    color: var(--dry-azul); }
.portal-badge--negociacion { background: var(--dry-faena-tinte);   color: var(--dry-faena-profundo); }
.portal-badge--cerrada     { background: var(--dry-success-tinte); color: var(--dry-success); }

/* ── Mini línea de tiempo del seguimiento ──────────────────────────
   Pasos: Recibida · En revisión · Cotizada · En negociación · Cerrada. */
.portal-timeline {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: var(--dry-space-5) 0 0;
    padding: 0;
}
.portal-timeline__step {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    min-width: 0;
}
/* Línea que conecta los pasos */
.portal-timeline__step::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--dry-borde);
    z-index: 0;
}
.portal-timeline__step:first-child::before { display: none; }
.portal-timeline__step--done::before { background: var(--dry-azul); }
/* Punto del paso */
.portal-timeline__dot {
    position: relative;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto var(--dry-space-2);
    border-radius: var(--dry-radius-full);
    background: var(--dry-blanco);
    border: 2px solid var(--dry-borde);
}
.portal-timeline__step--done .portal-timeline__dot {
    background: var(--dry-azul);
    border-color: var(--dry-azul);
}
.portal-timeline__step--current .portal-timeline__dot {
    background: var(--dry-faena);
    border-color: var(--dry-faena);
    box-shadow: 0 0 0 4px var(--dry-faena-tinte);
}
.portal-timeline__label {
    display: block;
    font-size: var(--dry-text-caption);
    color: var(--dry-texto-terc);
    line-height: 1.2;
}
.portal-timeline__step--done .portal-timeline__label { color: var(--dry-texto-sec); }
.portal-timeline__step--current .portal-timeline__label {
    color: var(--dry-faena-profundo);
    font-weight: 700;
}

/* En móvil, ocultamos las etiquetas largas para no apretar la fila */
@media (max-width: 560px) {
    .portal-timeline__label { font-size: 10px; }
}

/* ── Sección Cuenta (cambio de contraseña) ─────────────────────────── */
.portal-cuenta { max-width: 520px; }
.portal-cuenta__info {
    color: var(--dry-texto-sec);
    margin-bottom: var(--dry-space-6);
}

/* Perfil: fila de dos campos lado a lado */
.portal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dry-space-4, 1rem); }
@media (max-width: 560px) { .portal-field-row { grid-template-columns: 1fr; } }