:root{
    --primary:#5FAF8E;
    --bg:#f3f6fb;
    --card:#ffffff;
    --text:#1c1c1c;
    --muted:#7a7a7a;
    --radius:18px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-bottom:100px;
}

.checkbox-label{
    display:flex;
    gap:8px;
    font-size:14px;
    margin-top:14px;
    align-items:flex-start;
}

section h3{
    font-size:16px;
    font-weight:600;
    margin-bottom:12px;
    color:#1c1c1c;
}

section{
    margin-bottom:28px;
}


/* ===== MOTOS ===== */
.motos-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.motos-header span{
    font-size:13px;
    color:#777;
}

/* Card da moto */
.moto-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    background:#f9fafc;
    border-radius:14px;
    margin-bottom:10px;
}

.moto-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.moto-info i{
    font-size:22px;
    color:#1f4db8;
}

.moto-info strong{
    display:block;
    font-size:15px;
}

.moto-info span{
    font-size:13px;
    color:#666;
}

/* Remover moto */
.moto-remove{
    color:#999;
    font-size:18px;
    transition:.2s;
}

.moto-remove:hover{
    color:#d63031;
    transform:scale(1.1);
}

/* Estado vazio */
.moto-empty{
    text-align:center;
    padding:30px 10px;
    color:#777;
}

.moto-empty i{
    font-size:36px;
    color:#ccc;
    margin-bottom:6px;
}

/* Adicionar moto */
.moto-add{
    margin-top:16px;
}

.moto-add summary{
    cursor:pointer;
    font-weight:500;
    color:#1f4db8;
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
}

.moto-add summary::-webkit-details-marker{
    display:none;
}

.moto-box {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}


/* Form grid */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

@media(max-width:480px){
    .form-grid{
        grid-template-columns:1fr;
    }
}


/* ======================================================
   ALERTA DE EXPIRAÇÃO
====================================================== */
.alert-expiracao{
    background:#fff4e5;
    color:#8a4b00;
    padding:14px 16px;
    border-radius:14px;
    font-size:14px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.alert-expiracao a{
    color:#ff6600;
    font-weight:600;
    text-decoration:none;
}

/* ======================================================
   PRÓXIMO OBJETIVO
====================================================== */
.next-goal{
    margin:26px 0;
}
.next-goal h3{
    font-size:16px;
    margin-bottom:12px;
}
.goal-card{
    display:flex;
    gap:14px;
    background:#fff;
    border-radius:18px;
    padding:14px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    align-items:center;
}
.goal-card img{
    width:80px;
    height:80px;
    object-fit:contain;
    border-radius:12px;
    background:#f5f5f5;
}
.goal-card strong{
    display:block;
    margin-bottom:6px;
}
.goal-card p{
    font-size:13px;
    color:#666;
    margin-bottom:10px;
}

/* ======================================================
   OFERTA DA SEMANA
====================================================== */
.weekly-offer{
    margin:30px 0;
}
.weekly-offer h3{
    font-size:16px;
    margin-bottom:12px;
}
.offer-card{
    background:linear-gradient(135deg,#ff6600,#ff8c42);
    color:#fff;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 26px rgba(255,102,0,.35);
}
.offer-card strong{
    display:block;
    font-size:18px;
    margin-bottom:6px;
}
.offer-card p{
    font-size:14px;
    margin-bottom:14px;
}
.offer-card .btn-primary{
    background:#fff;
    color:#ff6600;
}

/* ======================================================
   BENEFÍCIOS DO NÍVEL
====================================================== */
.nivel-beneficios{
    margin:30px 0;
}
.nivel-beneficios h3{
    font-size:16px;
    margin-bottom:12px;
}
.nivel-beneficios ul{
    background:#fff;
    border-radius:18px;
    padding:16px;
    list-style:none;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.nivel-beneficios li{
    font-size:14px;
    padding:6px 0;
}

/* ======================================================
   GANHE MAIS PONTOS
====================================================== */
.earn-more{
    margin:30px 0;
}
.earn-more h3{
    font-size:16px;
    margin-bottom:12px;
}
.earn-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.earn-grid a{
    background:#fff;
    border-radius:16px;
    padding:14px 10px;
    text-align:center;
    text-decoration:none;
    color:#333;
    font-size:13px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:.2s;
}
.earn-grid a:active{
    transform:scale(.97);
}
.earn-grid i{
    font-size:26px;
    color:#ff6600;
    margin-bottom:6px;
    display:block;
}

/* ======================================================
   CONFIANÇA / TRANSPARÊNCIA
====================================================== */
.trust-box{
    text-align:center;
    font-size:12px;
    color:#777;
    margin:30px 0 10px;
}


.timeline-item.expirado {
    background: #fff6e5;
    border-left: 4px solid #f5a623;
}

.timeline-item.expirado .timeline-icon {
    color: #f5a623;
}

/* HEADER COM REDES SOCIAIS */
.app-header {
    background: #fff;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header > div {
    flex: 1;
}

.app-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1a1a1a;
}

.app-header span {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

/* CONTAINER DE REDES SOCIAIS */
.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.social-links a:hover {
    background: #e0e0e0;
    color: #1a1a1a;
    transform: translateY(-2px );
}

.social-links a.instagram:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.social-links a.tiktok:hover {
    background: #000;
    color: #fff;
}

.social-links a.youtube:hover {
    background: #ff0000;
    color: #fff;
}

.social-links a.website:hover {
    background: #007bff;
    color: #fff;
}

/* MELHORIAS NOS CARDS */
.loja-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.loja-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* RESPONSIVO PARA CELULAR */
@media (max-width: 480px) {
    .app-header {
        padding: 14px;
    }

    .app-header h1 {
        font-size: 18px;
    }

    .social-links {
        gap: 8px;
    }

    .social-links a {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* LOGIN */
.login-body{
    background:#f4f6f8;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family:'Inter',sans-serif;
}

.login-container{
    width:100%;
    max-width:420px;
    padding:24px;
}

.login-brand{
    text-align:center;
    margin-bottom:30px;
}

.login-brand img{
    width:90px;
    margin-bottom:10px;
}

.login-brand h1{
    font-size:22px;
    margin-bottom:6px;
}

.login-brand p{
    font-size:14px;
    color:#666;
}

.login-form{
    background:#fff;
    padding:24px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.input-group{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f1f3f5;
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:14px;
}

.input-group i{
    font-size:20px;
    color:#777;
}

.input-group input{
    border:none;
    background:none;
    width:100%;
    font-size:15px;
    outline:none;
}

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    margin-bottom:20px;
}

.login-options a{
    color:#ff6600;
    text-decoration:none;
}

.login-footer{
    text-align:center;
    margin-top:20px;
    font-size:14px;
}


/* HEADER */
.app-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px;
}

.app-header h1{font-size:22px}
.app-header span{color:var(--muted);font-size:14px}

.avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* CARD */
.card-pontos{
    background:linear-gradient(135deg,#ffffff,#fdf7ec);
    margin:0 22px;
    padding:22px;
    border-radius:var(--radius);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.label{
    font-size:12px;
    letter-spacing:1px;
    color:var(--muted);
}

.badge{
    background:#ffe58f;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.card-pontos h2{
    font-size:44px;
    margin:12px 0;
    color:var(--primary);
}

.progress-info{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
}

.progress-bar{
    height:8px;
    background:#eee;
    border-radius:999px;
    margin:10px 0 18px;
}

.progress-bar div{
    height:100%;
    background:var(--primary);
    border-radius:999px;
}

.card-actions{
    display:flex;
    gap:12px;
}

.btn-primary{
    flex:1;
    background:var(--primary);
    color:#fff;
    border:none;
    padding:14px;
    border-radius:999px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
}

.btn-outline{
    flex:1;
    background:#fff;
    border:1px solid #dbe2f0;
    padding:14px;
    border-radius:999px;
    text-align:center;
    text-decoration:none;
    color:#333;
}

/* ATALHOS */
.quick-actions{
    display:flex;
    justify-content:space-around;
    margin:26px 22px;
}

.quick-actions a{
    background:#fff;
    width:72px;
    height:72px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:12px;
    text-decoration:none;
    color:#333;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.quick-actions i{
    font-size:22px;
    color:var(--primary);
    margin-bottom:4px;
}

/* DESAFIOS */
.desafios{
    margin:0 22px;
}

.desafios-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
}

.desafio-card{
    background:#fff;
    border-radius:var(--radius);
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.desafio-card .icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#fff4d6;
    display:flex;
    align-items:center;
    justify-content:center;
}

.desafio-card .progress{
    margin-left:auto;
    font-weight:600;
    color:var(--primary);
}

/* BOTTOM NAV */
.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    display:flex;
    justify-content:space-around;
    padding:10px 0;
    box-shadow:0 -6px 20px rgba(0,0,0,.12);
}

.bottom-nav a{
    text-decoration:none;
    color:#888;
    font-size:11px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.bottom-nav .active{color:var(--primary)}

.scan-btn{
    background:var(--primary);
    color:#fff;
    width:58px;
    height:58px;
    border-radius:50%;
    border:none;
    margin-top:-32px;
    font-size:26px;
}

/* QR MODAL */
.qr-modal{
    position:fixed;
    inset:0;
    background:#000;
    z-index:9999;
    display:none;
    flex-direction:column;
}

.qr-modal.active{
    display:flex;
}

.qr-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    color:#fff;
    font-size:16px;
}

.qr-header button{
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
}

#qr-reader{
    flex:1;
}

.qr-footer{
    padding:12px;
    text-align:center;
    color:#ccc;
    font-size:14px;
}

/* FEEDBACK QR */
.qr-feedback{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:10000;
    text-align:center;
    color:#fff;
}

.qr-feedback.show{
    display:flex;
    animation:fadeIn .2s ease;
}

.feedback-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    margin-bottom:16px;
    animation:pop .3s ease;
}

/* LOJAS */
.container{
    padding:20px;
}

.loja-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.loja-card h3{
    margin-bottom:6px;
}

.loja-card p{
    font-size:14px;
    color:#555;
    margin-bottom:14px;
    line-height:1.4;
}

.loja-actions{
    display:flex;
    gap:12px;
}

.btn-whatsapp,
.btn-maps{
    flex:1;
    padding:12px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.btn-whatsapp{
    background:#25D366;
    color:#fff;
}

.btn-maps{
    background:#f1f3f6;
    color:#333;
}

/* HISTÓRICO */
.timeline-item{
    display:flex;
    gap:14px;
    background:#fff;
    border-radius:16px;
    padding:14px;
    margin-bottom:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.timeline-item.credito{
    border-left:4px solid #28a745;
}

.timeline-item.debito{
    border-left:4px solid #dc3545;
}

.timeline-icon{
    font-size:26px;
    color:#555;
}

.timeline-content strong{
    font-size:16px;
    display:block;
}

.timeline-content span{
    font-size:14px;
    color:#666;
}

.timeline-content small{
    font-size:12px;
    color:#999;
}

.empty-state{
    text-align:center;
    color:#777;
    margin-top:40px;
}

.empty-state i{
    font-size:48px;
    margin-bottom:8px;
}

/* DETALHE DA COMPRA */
.resumo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.resumo-label{
    font-size:12px;
    color:#777;
}

.pontos-credito{
    color:#28a745;
}

.produtos-compra{
    margin-top:24px;
}

.produtos-compra h3{
    margin-bottom:12px;
}

.produto-item{
    display:flex;
    justify-content:space-between;
    background:#fff;
    padding:14px;
    border-radius:14px;
    margin-bottom:10px;
    box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.produto-info span,
.produto-info small{
    display:block;
    font-size:12px;
    color:#666;
}

.produto-valor{
    font-weight:600;
}

/* LINK DO HISTÓRICO */
.timeline-link{
    text-decoration:none;
    color:inherit;
}

.timeline-link:active .timeline-item{
    transform:scale(.98);
}

/* BADGES */
.badges-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.badge-card{
    background:#fff;
    border-radius:18px;
    padding:16px;
    text-align:center;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:.2s;
}

.badge-card.bloqueado{
    opacity:.45;
}

.badge-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:#f1f3f6;
}

.badge-card.ativo .badge-icon{
    background:#ff6600;
    color:#fff;
}

.badge-card strong{
    display:block;
    margin-bottom:4px;
}

.badge-card span{
    font-size:13px;
    color:#666;
}

.badge-status{
    margin-top:10px;
    font-size:12px;
    font-weight:600;
}

.badge-status.ok{
    color:#28a745;
}

.badge-status.lock{
    color:#999;
}

/* MARKETPLACE STYLE */
.ml-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.ml-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.06);
    transition:.2s;
}

.ml-card:active{
    transform:scale(.98);
}

.ml-image{
    width:100%;
    aspect-ratio:1/1;
    background:#f5f5f5;
}

.ml-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.ml-info{
    padding:10px 12px 14px;
}

.ml-title{
    font-size:14px;
    font-weight:500;
    line-height:1.3;
    margin-bottom:6px;
}

.ml-points{
    font-size:15px;
    font-weight:700;
    color:#ff6600;
    margin-bottom:8px;
}

.ml-btn{
    display:block;
    text-align:center;
    padding:8px;
    font-size:13px;
    font-weight:600;
    border-radius:999px;
    background:#ff6600;
    color:#fff;
    text-decoration:none;
}

.ml-muted{
    font-size:12px;
    color:#999;
}

/* FILTRO */
.ml-filter{
    margin-bottom:12px;
}

.ml-filter select{
    width:100%;
    padding:10px;
    border-radius:12px;
    border:1px solid #ddd;
    font-size:14px;
}

/* BADGES */
.ml-badge{
    position:absolute;
    top:8px;
    left:8px;
    padding:4px 8px;
    font-size:11px;
    border-radius:999px;
    color:#fff;
    font-weight:600;
}

.ml-badge.novo{ background:#2ecc71; }
.ml-badge.popular{ background:#f39c12; }

/* DESTAQUE RESGATÁVEL */
.ml-card.can{
    border:2px solid #ff6600;
}

/* CONFIRMAR RESGATE */
.confirm-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    text-align:center;
}

.confirm-card img{
    width:100%;
    max-height:200px;
    object-fit:contain;
    margin-bottom:16px;
}

.confirm-card h2{
    margin-bottom:16px;
}

.confirm-info{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.confirm-info span{
    font-size:12px;
    color:#777;
}

.confirm-info strong{
    display:block;
    font-size:18px;
}

.alert-error{
    background:#ffe5e5;
    color:#c00;
    padding:12px;
    border-radius:12px;
    margin-bottom:16px;
}

/* LOJAS RETIRADA */
.lojas-lista{
    margin:16px 0;
}

.loja-item{
    display:flex;
    gap:12px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:10px;
    cursor:pointer;
}

.loja-item input{
    margin-top:4px;
}

.loja-item small{
    display:block;
    color:#666;
    font-size:12px;
}

/* MEUS RESGATES */
.resgate-card{
    display:flex;
    gap:12px;
    background:#fff;
    border-radius:16px;
    padding:12px;
    margin-bottom:14px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.resgate-card img{
    width:80px;
    height:80px;
    object-fit:contain;
    border-radius:12px;
    background:#f5f5f5;
}

.resgate-info{
    flex:1;
}

.resgate-loja{
    display:block;
    font-size:13px;
    color:#666;
    margin:4px 0;
}

.resgate-pontos{
    font-size:13px;
    font-weight:600;
    color:#ff6600;
}

.resgate-status{
    display:inline-block;
    margin:6px 0;
    font-size:12px;
    font-weight:600;
}

/* STATUS CORES */
.status-pendente .resgate-status{ color:#f39c12; }
.status-aprovado .resgate-status{ color:#28a745; }
.status-retirado .resgate-status{ color:#3498db; }
.status-cancelado .resgate-status{ color:#dc3545; }
.status-expirado .resgate-status{ color:#999; }

/* BOTÃO PEQUENO */
.btn-sm{
    margin-top:8px;
    padding:6px 12px;
    font-size:13px;
}

/* RETIRADA */
.retirada-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    text-align:center;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.retirada-card img{
    width:120px;
    height:120px;
    object-fit:contain;
    margin-bottom:12px;
}

.retirada-instrucao{
    font-size:14px;
    color:#555;
    margin:12px 0;
}

.codigo-retirada{
    font-size:42px;
    letter-spacing:8px;
    font-weight:700;
    background:#f5f5f5;
    padding:14px;
    border-radius:14px;
    margin:16px 0;
}

.retirada-alerta{
    font-size:12px;
    color:#c0392b;
}

/* PERFIL */
.perfil-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.perfil-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.perfil-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#ff6600;
    color:#fff;
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.perfil-pontos{
    text-align:center;
    margin-bottom:20px;
}

.perfil-pontos strong{
    font-size:26px;
    display:block;
}

.perfil-pontos span{
    font-size:13px;
    color:#666;
}

.perfil-form label{
    font-size:13px;
    margin-top:12px;
    display:block;
}

.perfil-form input{
    width:100%;
    padding:10px;
    border-radius:12px;
    border:1px solid #ddd;
    margin-top:4px;
}

.perfil-actions{
    margin-top:20px;
}

.perfil-actions a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    border-radius:12px;
    background:#fff;
    margin-bottom:10px;
    text-decoration:none;
    color:#333;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.perfil-actions a.logout{
    color:#c0392b;
}

/* ALERTAS */
.alert-success{
    background:#e9f9ee;
    color:#1e7e34;
    padding:12px;
    border-radius:12px;
    margin-bottom:14px;
}

.alert-error{
    background:#ffe5e5;
    color:#c0392b;
    padding:12px;
    border-radius:12px;
    margin-bottom:14px;
}



/* ANIMAÇÃO BOTÃO */
.pulse{
    animation:pulse 1.4s infinite;
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(255,102,0,.6); }
    70%{ box-shadow:0 0 0 12px rgba(255,102,0,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,102,0,0); }
}

/* SKELETON */
.skeleton{
    background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
    background-size:200% 100%;
    animation:skeleton 1.5s infinite;
}

@keyframes skeleton{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
}



/* ESTADOS */
.success{ background:#28a745; }
.error{ background:#dc3545; }
.warning{ background:#f4b400; color:#222; }

@keyframes pop{
    0%{ transform:scale(.6); opacity:0 }
    100%{ transform:scale(1); opacity:1 }
}

@keyframes fadeIn{
    from{ opacity:0 }
    to{ opacity:1 }
}