:root {
    --orange: #FF8A24;
    --orange-hover: #E87512;
    --orange-light: #FFF0DF;

    --purple: #8E59F2;
    --purple-hover: #7540D4;
    --purple-light: #F0E7FF;

    /* Compatibilidad con los estilos actuales */
    --ink: #353047;
    --muted: #7E788D;
    --lav: var(--orange);
    --pink: var(--orange-light);
    --cream: #FFFAF4;
    --mint: #DFF3E9;
    --line: #EEE6EF;
    --white: #FFFFFF;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --shadow-card: 0 8px 26px rgba(53, 48, 71, .07);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: linear-gradient(
        180deg,
        var(--orange-light) 0,
        var(--cream) 45%,
        var(--purple-light) 100%
    );
    font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
}

.logo-ciguena {
    width: 52px;
    height: 52px;
    object-fit: contain;
    vertical-align: middle;
}

a {
    color: var(--purple);
    text-decoration: none;
}

a:hover {
    color: var(--purple-hover);
    text-decoration: underline;
}

header {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 4;
    backdrop-filter: blur(10px);
}

.nav {
    max-width: 1100px;
    margin: auto;
    padding: 12px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brand {
    font-weight: 900;
    color: var(--ink);
    font-size: 1.15rem;
}

.brand span {
    color: var(--orange);
}

nav {
    display: flex;
    gap: 13px;
    align-items: center;
    flex-wrap: wrap;
    font-size: .92rem;
}

nav a {
    color: var(--purple);
    font-weight: 600;
}

main {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px 40px;
}

.hero {
    background: linear-gradient(
        120deg,
        var(--purple-light),
        var(--orange-light) 70%,
        #FFFFFF
    );
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.hero:after {
    content: "☁️  ☁️";
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 1.6rem;
    opacity: .7;
}

h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin: .1em 0 .35em;
    line-height: 1.08;
}

h2 {
    font-size: 1.25rem;
    margin: 0 0 14px;
}

p {
    line-height: 1.55;
}

.muted {
    color: var(--muted);
    font-size: .92rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.card {
    grid-column: span 6;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 19px;
    box-shadow: var(--shadow-card);
}

.wide {
    grid-column: span 12;
}

.third {
    grid-column: span 4;
}

.balance {
    font-size: 2rem;
    font-weight: 900;
    color: var(--purple);
}

.pill {
    display: inline-block;
    background: var(--purple-light);
    color: var(--purple-hover);
    padding: 5px 10px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 700;
}

.btn,
button,
input[type="submit"] {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--orange);
    color: #FFFFFF;
    padding: 11px 15px;
    font-weight: 750;
    cursor: pointer;
    font: inherit;
    transition: background .18s ease, transform .18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--orange-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn.secondary,
button.secondary {
    background: var(--purple);
    color: #FFFFFF;
}

.btn.secondary:hover,
button.secondary:hover {
    background: var(--purple-hover);
}

.btn.danger,
button.danger {
    background: #B64D72;
    color: #FFFFFF;
}

.field {
    display: grid;
    gap: 6px;
    margin: 12px 0;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px 12px;
    font: inherit;
    background: #FFFFFF;
    color: var(--ink);
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--purple-light);
    border-color: var(--purple);
}

textarea {
    min-height: 90px;
    resize: vertical;
}

label {
    font-size: .9rem;
    font-weight: 700;
}

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.row > * {
    flex: 1;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--purple-light);
    display: inline-grid;
    place-items: center;
    font-size: 1.3rem;
}

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

.table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
}

.table td,
.table th {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 10px 6px;
    font-size: .9rem;
}

.table th {
    background: var(--purple-light);
    color: var(--ink);
}

.notice {
    padding: 12px 14px;
    background: #E5F7ED;
    border-radius: var(--radius-md);
    margin: 12px 0;
}

.error {
    padding: 12px 14px;
    background: #FFE7ED;
    border-radius: var(--radius-md);
    margin: 12px 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.photo-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 14px;
}

.logo-ciguena {
    width: 48px;
    height: 48px;
    object-fit: contain;
    vertical-align: middle;
}

.footer {
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    padding: 24px;
}

.coin {
    white-space: nowrap;
    color: var(--orange-hover);
    font-weight: 800;
}

.message {
    background: var(--purple-light);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
}

.small {
    font-size: .82rem;
}

.right {
    text-align: right;
}

@media (max-width: 700px) {
    .card,
    .third {
        grid-column: span 12;
    }

    .hero {
        padding: 22px 18px;
    }

    .hero:after {
        font-size: 1.1rem;
        right: 12px;
        top: 12px;
    }

    .nav {
        align-items: flex-start;
    }

    .table td,
    .table th {
        padding: 8px 3px;
        font-size: .82rem;
    }
}


/* Calendario mensual de La Cigüeña */
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.calendar-heading h2{margin-bottom:5px}
.calendar-navigation{display:flex;align-items:center;justify-content:center;gap:12px}
.calendar-navigation strong{text-transform:capitalize;min-width:145px;text-align:center}
.calendar-nav{padding:8px 13px;min-width:40px}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-weekdays{margin-bottom:6px}
.calendar-weekdays span{text-align:center;font-size:.82rem;font-weight:750;color:var(--muted);padding:8px 0}
.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;min-height:83px;padding:9px 2px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink,#30243b);font:inherit;font-weight:700}
.calendar-day.has-bets{border-color:#d9c5f8;background:#fcf9ff;cursor:pointer}
.calendar-day.has-bets:hover,.calendar-day.has-bets:focus-visible{border-color:#8e59f2;background:#f3eaff;outline:2px solid #8e59f2;outline-offset:1px}
.calendar-empty{background:transparent;border-color:transparent}
.calendar-avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;object-fit:cover;border:2px solid #e4d3ff}
.calendar-avatar-fallback{display:grid;place-items:center;background:#f0e6ff;font-size:20px}
.calendar-count{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#8e59f2;color:#fff;font-size:.9rem;font-weight:800}
.calendar-detail{margin-top:20px;padding:15px;background:#fcf9ff;border:1px solid #e6d9f8;border-radius:15px}
.calendar-detail h3{text-transform:capitalize;margin:0 0 10px;font-size:1rem}
.calendar-detail-avatar{width:34px;height:34px}
.calendar-detail[hidden]{display:none}
@media(max-width:520px){.calendar-weekdays,.calendar-days{gap:3px}.calendar-weekdays span{font-size:.72rem}.calendar-day{min-height:65px;border-radius:8px;padding-top:7px;font-size:.88rem}.calendar-avatar,.calendar-count{width:27px;height:27px}.calendar-avatar-fallback{font-size:16px}.calendar-navigation{gap:7px}.calendar-navigation strong{min-width:125px;font-size:.9rem}}



/* Días anteriores a hoy */
.calendar-day.calendar-day-past {
  background: #efedf1;
  border-color: #e0dce4;
  color: #a29ba9;
  opacity: .78;
}
.calendar-day.calendar-day-past.has-bets {
  background: #efedf1;
  border-color: #e0dce4;
}
.calendar-day-past .calendar-avatar {
  filter: grayscale(1);
  opacity: .55;
}
.calendar-day-past .calendar-avatar-fallback {
  filter: grayscale(1);
  opacity: .6;
}
.calendar-past-mark {
  position: absolute;
  top: 2px;
  right: 5px;
  color: #99919f;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.calendar-day-past .calendar-count {
  background: #aaa3b0;
  color: #fff;
}
.calendar-day-past.has-bets:hover,
.calendar-day-past.has-bets:focus-visible {
  background: #e5e1e9;
  border-color: #bdb4c6;
}


/* X grande para los días pasados */
.calendar-day.calendar-day-past {
  position: relative;
  overflow: hidden;
}
.calendar-day-past .calendar-past-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(115, 106, 125, .34);
  z-index: 2;
  pointer-events: none;
}
.calendar-day-past > *:not(.calendar-past-mark) {
  position: relative;
  z-index: 1;
}


/* La predicción ocupa todo el ancho */
#apuesta {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}


/* Mini calendario para elegir fechas de apuesta */
.mini-bet-picker{max-width:560px;margin:14px 0 20px;padding:14px;background:#fcf9ff;border:1px solid #e6d9f8;border-radius:16px}
.mini-bet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mini-bet-heading strong{text-transform:capitalize}
.mini-bet-weekdays,.mini-bet-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mini-bet-weekdays span{text-align:center;color:var(--muted);font-size:.82rem;font-weight:800;padding:5px}
.mini-bet-day{min-width:0;min-height:48px;padding:5px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#e7f6ec;color:#24643b;border:1px solid #c6e7d0;border-radius:9px;font-size:.9rem}
.mini-bet-day small{font-size:.63rem;font-weight:700}
.mini-bet-day:hover:not(:disabled){filter:brightness(.96)}
.mini-bet-day.mini-bet-selected{background:#8e59f2;border-color:#7540d6;color:#fff}
.mini-bet-day.mini-bet-full{background:#e8e5eb;border-color:#d6d1da;color:#99919f;cursor:not-allowed;position:relative;opacity:.8}
.mini-bet-day.mini-bet-full::after{content:"×";position:absolute;font-size:2.2rem;font-weight:300;color:#88808f;opacity:.45;pointer-events:none}
.mini-bet-day.mini-bet-past:not(.mini-bet-selected){background:#f0edf2;color:#9b94a1;border-color:#e1dce4}
.mini-bet-empty{min-height:48px}
@media(max-width:520px){.mini-bet-picker{padding:9px}.mini-bet-weekdays,.mini-bet-days{gap:3px}.mini-bet-day{min-height:42px;font-size:.82rem}.mini-bet-day small{font-size:.58rem}}


/* Distribución lateral del selector de fechas y el formulario */
.mini-bet-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}
.mini-bet-sidebar {
  min-width: 0;
}
.mini-bet-sidebar .mini-bet-picker {
  position: sticky;
  top: 18px;
  max-width: none;
  margin: 0;
}
.mini-bet-fields {
  min-width: 0;
}
.mini-bet-fields .field:first-child {
  margin-top: 0;
}
.mini-bet-fields button[type="submit"] {
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .mini-bet-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .mini-bet-sidebar .mini-bet-picker {
    position: static;
  }
}

/* Días posteriores a la fecha prevista */
.mini-bet-day.mini-bet-after-due,
.mini-bet-day.mini-bet-after-due:disabled {
  background: #e8e5eb;
  border-color: #d6d1da;
  color: #99919f;
  cursor: not-allowed;
  opacity: .7;
  position: relative;
}
.mini-bet-day.mini-bet-after-due::after {
  content: "×";
  position: absolute;
  font-size: 2.2rem;
  font-weight: 300;
  color: #88808f;
  opacity: .45;
  pointer-events: none;
}


/* Fecha prevista del parto en el calendario familiar */
.calendar-day-due {
  border: 2px solid #8e59f2 !important;
  background: #f4edff !important;
  box-shadow: 0 0 0 2px rgba(142, 89, 242, .12);
}
.calendar-stork {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-top: 2px;
}
@media (max-width: 520px) {
  .calendar-stork {
    width: 27px;
    height: 27px;
  }
}