/* ============================================================
   DataCake · tema "candy glass"
   Glassmorphism + tonos pastel + nubes y caramelos.
   ============================================================ */

/* ---------- Fuentes auto-alojadas (subconjunto latino) ---------- */
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/quicksand-500.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/quicksand-600.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/quicksand-700.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fredoka-500.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fredoka-700.woff2") format("woff2"); }

:root {
    --ink: #332d49;
    --muted: #645d80;
    --line: rgba(255, 255, 255, 0.55);

    /* Cristal */
    --glass: rgba(255, 255, 255, 0.45);
    --glass-strong: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --shadow: 0 10px 30px rgba(151, 124, 196, 0.18);
    --shadow-soft: 0 6px 18px rgba(151, 124, 196, 0.14);

    /* Caramelos pastel */
    --pink: #ff9ec7;
    --pink-deep: #ff79b0;
    --lilac: #b79cff;
    --sky: #8fd3ff;
    --mint: #8ee6c5;
    --peach: #ffc59e;
    --lemon: #ffe9a3;
    --coral: #ff8a8a;

    --radius: 20px;
    --radius-sm: 14px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.55;
    background:
        radial-gradient(1200px 600px at 10% -10%, #ffd9ec 0%, rgba(255, 217, 236, 0) 60%),
        radial-gradient(1000px 600px at 100% 0%, #cfe6ff 0%, rgba(207, 230, 255, 0) 55%),
        radial-gradient(900px 700px at 50% 120%, #d9ffe9 0%, rgba(217, 255, 233, 0) 55%),
        linear-gradient(160deg, #fff0f7 0%, #f1f0ff 45%, #eafaff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

a { color: var(--pink-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-family: "Fredoka", "Quicksand", sans-serif; font-size: 1.6rem; margin: 0; font-weight: 600; letter-spacing: .2px; }
h2 { font-family: "Fredoka", "Quicksand", sans-serif; font-size: 1.2rem; font-weight: 600; }
.muted { color: var(--muted); font-size: .9rem; }

/* ---------- Decoración de fondo: nubes y caramelos ---------- */
.bg-decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-decor .cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    filter: blur(.3px);
    box-shadow: 0 8px 30px rgba(151, 124, 196, 0.12);
    opacity: .8;
}
.bg-decor .cloud::before,
.bg-decor .cloud::after {
    content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.bg-decor .cloud::before { width: 55%; height: 140%; left: 12%; top: -55%; }
.bg-decor .cloud::after  { width: 45%; height: 120%; right: 14%; top: -40%; }
.cloud.c1 { width: 150px; height: 46px; top: 12%; left: -160px; animation: drift 46s linear infinite; }
.cloud.c2 { width: 110px; height: 36px; top: 38%; left: -160px; animation: drift 62s linear infinite; animation-delay: -20s; }
.cloud.c3 { width: 190px; height: 56px; top: 68%; left: -220px; animation: drift 80s linear infinite; animation-delay: -35s; }
@keyframes drift { to { transform: translateX(120vw); } }

/* Caramelos / sprinkles flotando */
.bg-decor .candy {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    opacity: .55; animation: float 9s ease-in-out infinite;
}
.candy.k1 { top: 22%; left: 18%; background: var(--pink); }
.candy.k2 { top: 30%; right: 12%; background: var(--sky); width: 14px; height: 14px; animation-delay: -2s; }
.candy.k3 { top: 72%; left: 26%; background: var(--mint); width: 22px; height: 22px; animation-delay: -4s; }
.candy.k4 { top: 60%; right: 22%; background: var(--lemon); width: 12px; height: 12px; animation-delay: -1s; }
.candy.k5 { top: 14%; right: 32%; background: var(--lilac); width: 16px; height: 16px; animation-delay: -5s; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }

/* ---------- Barra superior (glass) ---------- */
.topbar {
    position: relative; z-index: 10;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 1.4rem; height: 64px; margin: 14px 16px 0;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.topbar .brand { display: flex; align-items: center; }
.topbar .brand-logo { height: 46px; width: auto; display: block; }
.topbar nav { display: flex; gap: .35rem; flex: 1; flex-wrap: wrap; }
.topbar nav a {
    color: var(--ink); padding: .4rem .85rem; border-radius: 999px;
    font-weight: 700; font-size: .92rem; transition: background .15s, transform .15s;
}
.topbar nav a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
.topbar .logout { display: flex; align-items: center; gap: .7rem; }
.topbar .logout span { color: var(--ink); font-size: .9rem; font-weight: 700; }

/* ---------- Contenedor ---------- */
.container { position: relative; z-index: 5; max-width: 1040px; margin: 1.6rem auto; padding: 0 1rem; }

/* ---------- Tarjetas glass ---------- */
.card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.3rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }

/* Stats */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { text-align: center; }
.stat .n { font-family: "Fredoka", sans-serif; font-size: 2.3rem; font-weight: 600;
    background: linear-gradient(120deg, var(--pink-deep), var(--lilac));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .55rem; border-bottom: 1px solid rgba(151, 124, 196, 0.14); vertical-align: top; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* ---------- Botones caramelo ---------- */
.btn {
    display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 600;
    color: #fff; padding: .6rem 1.1rem; border-radius: 999px;
    background: linear-gradient(120deg, var(--pink-deep), var(--lilac));
    box-shadow: 0 6px 16px rgba(255, 121, 176, 0.35);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(255, 121, 176, 0.45); filter: saturate(1.1); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .35rem .8rem; font-size: .82rem; }
.btn-secondary { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-soft); border: 1px solid var(--glass-border); }
.btn-danger { background: linear-gradient(120deg, var(--coral), #ff6f91); box-shadow: 0 6px 16px rgba(255, 122, 122, 0.4); }
.btn-ok { background: linear-gradient(120deg, var(--mint), var(--sky)); box-shadow: 0 6px 16px rgba(142, 230, 197, 0.45); color: #14513f; }

/* ---------- Formularios ---------- */
form label { display: block; font-size: .85rem; font-weight: 700; margin: .9rem 0 .3rem; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=month], input[type=file], select, textarea {
    width: 100%; padding: .6rem .75rem; font: inherit; color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--pink); background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(255, 158, 199, 0.25);
}
textarea { min-height: 120px; font-family: ui-monospace, "Cascadia Code", monospace; font-size: .85rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 200px; }
.actions { display: flex; gap: .6rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.inline { display: inline; }
code { background: rgba(255, 255, 255, 0.6); padding: .1rem .4rem; border-radius: 6px; font-size: .85em; }

/* ---------- Avisos ---------- */
.flash { padding: .8rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; font-weight: 600;
    border: 1px solid var(--glass-border); backdrop-filter: blur(8px); box-shadow: var(--shadow-soft); }
.flash-success { background: rgba(142, 230, 197, 0.35); color: #1f7a5e; }
.flash-error { background: rgba(255, 138, 138, 0.28); color: #b23b54; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge-sent { background: rgba(142, 230, 197, 0.45); color: #1f7a5e; }
.badge-generated { background: rgba(143, 211, 255, 0.45); color: #2168a6; }
.badge-error { background: rgba(255, 138, 138, 0.35); color: #b23b54; }
.badge-pending, .badge-generating { background: rgba(183, 156, 255, 0.35); color: #6a52b0; }

/* ---------- Login ---------- */
.login-wrap { position: relative; z-index: 5; max-width: 400px; margin: 9vh auto; padding: 0 1rem; }
.login-wrap .card { padding: 2.4rem 2rem; text-align: center; }
.login-wrap .login-logo { width: 170px; max-width: 70%; height: auto; margin: 0 auto .6rem; display: block; }
.login-wrap .login-sub { color: var(--muted); font-weight: 600; margin: 0 0 1.4rem; }
.login-wrap .card form { text-align: left; }

/* ============================================================
   Overlay "Tu informe se está cocinando" (pastel latiendo)
   ============================================================ */
.baking-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 240, 247, 0.55);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.baking-overlay[hidden] { display: none; }
.baking-box {
    text-align: center;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 2.4rem 2.8rem;
    box-shadow: var(--shadow);
}
.baking-box .cake {
    font-size: 5.5rem; line-height: 1;
    display: inline-block;
    transform-origin: center bottom;
    animation: cake-beat 1.1s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(151, 124, 196, 0.35));
}
@keyframes cake-beat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.22); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.16); }
    56%  { transform: scale(1); }
    100% { transform: scale(1); }
}
.baking-msg {
    font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.35rem;
    margin: 1.1rem 0 .3rem; color: var(--ink);
}
.baking-sub { color: var(--muted); font-size: .92rem; margin: 0; }
.baking-dots { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; }
.baking-dots span {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(120deg, var(--pink), var(--lilac));
    animation: dot-bounce 1.2s ease-in-out infinite;
}
.baking-dots span:nth-child(2) { animation-delay: .15s; background: linear-gradient(120deg, var(--sky), var(--mint)); }
.baking-dots span:nth-child(3) { animation-delay: .3s; background: linear-gradient(120deg, var(--peach), var(--lemon)); }
@keyframes dot-bounce { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-10px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .cloud, .candy, .baking-box .cake, .baking-dots span { animation: none !important; }
}