/* ==========================================================================
   Mi cuenta — el minisitio del cliente

   Se carga después de tienda.css y usa su paleta. Las pantallas reaprovechan
   lo que ya existe (.page-section, .tracking-*, .boton, .btn-buy); acá solo
   viven las piezas propias: el menú de la cuenta, las tarjetas y las píldoras
   de estado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   El acceso desde la cabecera

   Va al lado del carrito, y en tono claro: el botón que tiene que resaltar en
   la barra es el de comprar, no el de mirar pedidos viejos.
   -------------------------------------------------------------------------- */

.cabecera .cart{
    display:flex;
    align-items:center;
    gap:10px;
}

.cabecera .cart a.cuenta-enlace{
    background:var(--superficie);
    border:1px solid var(--borde);
    color:var(--marca) !important;
}

.cabecera .cart a.cuenta-enlace:hover{
    background:var(--marca-suave);
    border-color:var(--marca);
}

/* Salir es una salida, no un destino: se ve, pero no compite con el carrito. */
.cabecera .cart a.salir-enlace{
    background:var(--superficie);
    border:1px solid var(--borde);
    color:var(--tinta-media) !important;
    font-weight:500;
}

.cabecera .cart a.salir-enlace:hover{
    background:#fee2e2;
    border-color:#fca5a5;
    color:#b91c1c !important;
}

/* --------------------------------------------------------------------------
   Menú de secciones
   -------------------------------------------------------------------------- */

.cuenta-menu{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin:0 auto 28px;
    max-width:900px;
}

.cuenta-menu-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border:1px solid var(--borde);
    border-radius:999px;
    background:var(--superficie);
    color:var(--tinta-media);
    font-size:14px;
    text-decoration:none;
    transition:.2s;
}

.cuenta-menu-item:hover{
    border-color:var(--marca);
    color:var(--marca);
}

.cuenta-menu-item--activo{
    background:var(--marca);
    border-color:var(--marca);
    color:#fff;
}

/*
   Cerrar sesión no compite con las secciones —es una salida, no un destino—,
   pero tiene que verse: en gris claro al final de la fila se perdía entre las
   otras píldoras y no se encontraba cuando hacía falta.
*/
.cuenta-menu-item--salir{
    margin-left:auto;
    border-color:#fca5a5;
    color:#b91c1c;
}

.cuenta-menu-item--salir:hover{
    background:#fee2e2;
    border-color:#b91c1c;
    color:#b91c1c;
}

/* Los mensajes sin abrir. Se lee de un vistazo o no sirve de nada. */
.cuenta-sin-leer{
    display:inline-block;
    min-width:20px;
    padding:1px 6px;
    border-radius:999px;
    background:var(--acento);
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-align:center;
}

.cuenta-menu-item--activo .cuenta-sin-leer{
    background:#fff;
    color:var(--acento);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.cuenta-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:20px;
    align-items:start;
}

.cuenta-card{
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    padding:24px;
    margin:0 auto 20px;
    max-width:900px;
}

/* Dentro de la grilla las tarjetas mandan su propio ancho. */
.cuenta-grid .cuenta-card{
    max-width:none;
    margin:0;
}

.cuenta-card--angosta{
    max-width:460px;
}

.cuenta-card h2{
    font-size:19px;
    color:var(--tinta);
    margin:0 0 16px;
}

.cuenta-card-titulo{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.cuenta-card-titulo h2{
    margin:0;
}

.cuenta-card-titulo a{
    font-size:14px;
    color:var(--marca);
    text-decoration:none;
}

.cuenta-card-titulo a:hover{
    text-decoration:underline;
}

/* --------------------------------------------------------------------------
   Filas (compras y mensajes del resumen)
   -------------------------------------------------------------------------- */

.cuenta-fila{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 0;
    border-top:1px solid var(--borde);
    color:inherit;
    text-decoration:none;
}

.cuenta-fila:first-of-type{
    border-top:none;
}

.cuenta-fila:hover strong{
    color:var(--marca);
}

/* Lo que todavía no se abre lleva la marca a la izquierda: se ve al recorrer
   la lista con la vista, sin leer cada línea. */
.cuenta-fila--nueva{
    border-left:3px solid var(--acento);
    padding-left:10px;
}

.cuenta-fila strong{
    display:block;
    font-size:15px;
}

.cuenta-fila-detalle{
    display:block;
    font-size:13px;
    color:var(--tinta-suave);
}

.cuenta-fila-estados{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:16px;
}

.cuenta-card .cuenta-fila .cuenta-fila-estados{
    margin-bottom:0;
}

/* --------------------------------------------------------------------------
   Listado de compras
   -------------------------------------------------------------------------- */

.cuenta-compra{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 0;
    border-top:1px solid var(--borde);
}

.cuenta-compra:first-of-type{
    border-top:none;
}

.cuenta-compra-folio{
    display:block;
    font-weight:700;
    font-size:16px;
    color:var(--tinta);
    text-decoration:none;
}

.cuenta-compra-folio:hover{
    color:var(--marca);
}

.cuenta-compra-acciones{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.cuenta-compra .cuenta-fila-estados{
    margin-bottom:0;
}

/* --------------------------------------------------------------------------
   Píldoras de estado
   -------------------------------------------------------------------------- */

.cuenta-pill{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.cuenta-pill--verde{ background:var(--exito-suave); color:var(--exito); }
.cuenta-pill--ambar{ background:#fef3c7; color:var(--alerta); }
.cuenta-pill--rojo{ background:#fee2e2; color:#b91c1c; }
.cuenta-pill--azul{ background:var(--marca-suave); color:var(--marca-fuerte); }
.cuenta-pill--gris{ background:#f1f5f9; color:var(--tinta-media); }

/* Avisa de que hay una explicación en el title; sin esto nadie la descubre. */
.cursor-help{
    cursor:help;
}

/* --------------------------------------------------------------------------
   Datos, avisos y textos sueltos
   -------------------------------------------------------------------------- */

.cuenta-datos{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px 18px;
    margin:0;
    font-size:15px;
}

.cuenta-datos dt{
    color:var(--tinta-suave);
}

.cuenta-datos dd{
    margin:0;
}

.cuenta-datos--totales{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--borde);
}

.cuenta-datos--totales dd{
    text-align:right;
}

.cuenta-vacio{
    color:var(--tinta-suave);
    padding:14px 0;
}

.cuenta-nota{
    margin-top:14px;
    font-size:14px;
    color:var(--tinta-suave);
}

.cuenta-volver{
    max-width:900px;
    margin:0 auto 14px;
}

.cuenta-aviso{
    border-radius:var(--radio-chico);
    padding:12px 14px;
    margin-bottom:18px;
    font-size:14px;
}

.cuenta-aviso--ok{
    background:var(--exito-suave);
    color:var(--exito);
}

.cuenta-aviso--error{
    background:#fee2e2;
    color:#b91c1c;
}

/* --------------------------------------------------------------------------
   Un mensaje abierto
   -------------------------------------------------------------------------- */

.cuenta-mensaje-saludo{
    font-size:17px;
    font-weight:600;
    margin:0 0 14px;
}

.cuenta-mensaje-cuerpo{
    line-height:1.7;
    color:var(--tinta-media);
    margin-bottom:20px;
}

/* --------------------------------------------------------------------------
   Pantallas angostas
   -------------------------------------------------------------------------- */

@media (max-width:600px){

    .cuenta-menu{
        justify-content:flex-start;
    }

    .cuenta-menu-item--salir{
        margin-left:0;
    }

    .cuenta-compra{
        align-items:flex-start;
        flex-direction:column;
    }

    .cuenta-card{
        padding:18px;
    }

}