/* =======================================================
   CSS MONUMENTAL: MEUS PEDIDOS | FLLUMEN
   ======================================================= */

/* ---------------------------------------------------
   0. VARIÁVEIS GLOBAIS
   --------------------------------------------------- */
:root {
    --vermelho-fllumen: #e30613;
    --texto-principal: #333333;
    --texto-secundario: #666666;
    --texto-dica: #888888;
    --fundo-pagina: #ffffff;
    --fundo-cartao: #ffffff;
    --fundo-cabecalho: #fcfcfc;
    --fundo-rodape: #fafafa;
    --borda-suave: #eeeeee;
    --borda-forte: #e0e0e0;
    --sucesso-verde: #2e7d32;
    --alerta-amarelo-fundo: #fdf0c3;
    --alerta-amarelo-texto: #8a6d3b;
    --sombra-leve: 0 2px 8px rgba(0, 0, 0, 0.04);
    --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --sombra-imagem: 2px 4px 10px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------
   1. ANIMAÇÕES
   --------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseBorder {
    0% { color: var(--sucesso-verde); }
    50% { color: #4caf50; }
    100% { color: var(--sucesso-verde); }
}

/* ---------------------------------------------------
   2. O ESQUELETO DA PÁGINA
   --------------------------------------------------- */
html { scroll-behavior: smooth; }

.container-painel-cliente { max-width: 1200px; margin: 60px auto; padding: 0 20px; display: flex; gap: 40px; font-family: 'Roboto', sans-serif; align-items: flex-start; }
.conteudo-painel-cliente { flex: 1; min-width: 0; }
.titulo-conteudo { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; color: var(--texto-principal); margin: 0 0 35px 0; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--texto-principal); display: inline-block; padding-bottom: 5px; }

/* ---------------------------------------------------
   3. O CARTÃO DE PEDIDO
   --------------------------------------------------- */
.cartao-pedido { border: 1px solid var(--borda-forte); border-radius: 10px; margin-bottom: 35px; background-color: var(--fundo-cartao); box-shadow: var(--sombra-leve); overflow: hidden; transition: all 0.4s ease; animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.cartao-pedido:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); border-color: #d0d0d0; }

.cabecalho-pedido { background-color: var(--fundo-cabecalho); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--borda-suave); font-size: 13px; color: var(--texto-secundario); flex-wrap: wrap; gap: 15px; }
.cabecalho-pedido span { display: flex; flex-direction: column; gap: 4px; }
.cabecalho-pedido span strong { color: var(--texto-principal); font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: 0.5px; }

.corpo-pedido { padding: 30px 24px; display: flex; gap: 30px; align-items: center; }

.img-primeiro-livro { width: 95px; height: 140px; object-fit: cover; border-radius: 6px; box-shadow: var(--sombra-imagem); transition: transform 0.4s ease; }
.cartao-pedido:hover .img-primeiro-livro { transform: scale(1.05) rotate(1deg); }

.info-livros { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.nome-livro-lista { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--texto-principal); text-transform: uppercase; margin: 0 0 8px 0; letter-spacing: 0.3px; line-height: 1.2; }

/* A nova classe para a descrição quando há apenas 1 livro */
.descricao-livro-pedido { font-size: 14px; color: var(--texto-secundario); line-height: 1.6; margin: 5px 0 0 0; }

/* ---------------------------------------------------
   4. A ÁREA DE STATUS
   --------------------------------------------------- */
.rodape-status-pedido { padding: 20px 24px; border-top: 1px solid var(--borda-suave); background-color: var(--fundo-rodape); }
.status-verde { color: var(--sucesso-verde); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; margin: 0; }
.status-verde i { font-size: 18px; animation: pulseBorder 2s infinite; }
.status-texto-cinza { color: var(--texto-secundario); font-size: 13.5px; margin: 8px 0 0 28px; line-height: 1.6; max-width: 800px; }

/* ---------------------------------------------------
   5. ESTADOS VAZIOS
   --------------------------------------------------- */
.alerta-amarelo { background-color: var(--alerta-amarelo-fundo); color: var(--alerta-amarelo-texto); padding: 20px 30px; border-radius: 6px; display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(138, 109, 59, 0.2); }
.alerta-amarelo i { font-size: 24px; }

/* ---------------------------------------------------
   6. RESPONSIVIDADE
   --------------------------------------------------- */
@media (max-width: 900px) {
    .container-painel-cliente { flex-direction: column; gap: 40px; margin: 40px auto; }
    .conta-sidebar { width: 100%; border-bottom: 1px solid var(--borda-forte); padding-bottom: 20px; }
    .conta-sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .conta-sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; padding: 10px 15px; }
    .conta-sidebar-nav a.ativo { border-left: none; border-bottom: 3px solid var(--vermelho-fllumen); }
    .linha-divisoria-sidebar { display: none; }
}

@media (max-width: 600px) {
    .cabecalho-pedido { flex-direction: column; gap: 12px; align-items: flex-start; }
    .cabecalho-pedido span { flex-direction: row; gap: 10px; align-items: baseline; }
    .corpo-pedido { flex-direction: column; text-align: center; padding: 20px 15px; }
    .img-primeiro-livro { width: 120px; height: 175px; margin-bottom: 10px; }
    .rodape-status-pedido { padding: 15px; }
    .status-texto-cinza { margin-left: 0; margin-top: 10px; }
}