:root{--bg:#f5fbff;--card:#ffffff;--border:#d6e6ff;--muted:#5b7ca6;--text:#0b2542;--primary:#2a7df0;--primary-2:#7cc6ff;--accent:#00d0ff;--green:#22c55e;--amber:#f59e0b;--blue:#3b82f6;--red:#ef4444;--shadow:0 12px 34px rgba(15,90,160,.12)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;color:var(--text);background:radial-gradient(1000px 500px at 10% -10%, #e6f5ff, transparent),radial-gradient(1200px 600px at 90% 0%, #e8f7ff, transparent),var(--bg);min-height:100vh;line-height:1.5}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(90deg,#e6f1ff,#ffffff);border-bottom:1px solid var(--border);box-shadow:0 3px 14px rgba(0,0,0,.03)}
.brand{display:flex;gap:8px;align-items:center;font-size:18px;font-weight:800;color:#0e3a6f}.logo{font-size:28px}.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.link{padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:#f6fbff;transition:.2s}.link:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.outline{background:#fff}.pill{background:linear-gradient(90deg,var(--primary-2),#e6f1ff);border:0}
.eco-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(90deg,#e8f7ff,#f5fbff);border-bottom:1px dashed var(--border);color:#145494;font-weight:600}
.container{max-width:1100px;margin:18px auto;padding:0 12px}.grid{display:grid;gap:12px}@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
h1,h2{margin:0 0 8px 0}h1{font-size:24px}h2{font-size:18px}p.muted{color:var(--muted);margin-top:-2px}
.row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.row.two{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:720px){.row.two{grid-template-columns:1fr 1fr}}
input,textarea,select{background:#ffffff;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:12px;outline:none;font-size:14px}
input:focus,textarea:focus,select:focus{border-color:#b3d7ff;box-shadow:0 0 0 3px #e6f5ff}
.btn{background:linear-gradient(90deg,#b8e1ff,#7cc6ff,#e6f5ff);border:0;color:#0b2542;padding:12px 14px;border-radius:14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}.btn:hover{transform:translateY(-1px)}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.tab{padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:#ffffff;cursor:pointer}.tab.active{background:linear-gradient(90deg,#e6f5ff,#ffffff);color:#0b2542;font-weight:800}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}.badge.green{background:rgba(34,197,94,.10);border-color:#a6efc2}.badge.amber{background:rgba(245,158,11,.10);border-color:#ffd699}.badge.blue{background:rgba(59,130,246,.10);border-color:#b3d7ff}.badge.red{background:rgba(239,68,68,.10);border-color:#ffc1c1}
.list{display:flex;flex-direction:column;gap:10px}.item{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:10px}
.footer{color:var(--muted);text-align:center;padding:18px}
#calendar{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:8px}
.note{border-left:4px solid var(--blue);padding:8px;background:#ffffff;border:1px solid var(--border);border-radius:10px}
.note.success{border-left-color:#22c55e}.note.info{border-left-color:#3b82f6}.note.warning{border-left-color:#f59e0b}
.auth-box{max-width:480px;margin:36px auto}.center{text-align:center}
@media (max-width:480px){.link,.btn,input,textarea,select{font-size:16px} .topbar{padding:10px} .eco-banner{padding:8px 12px}}
/* ==== Fix de viewport para PWA (iOS/Android standalone) ==== */
:root { --vh: 1vh; }
/* Tu CSS ya ponía min-height:100vh; mejor usamos la variable para que no “corte” en PWA */
html, body {
  min-height: calc(var(--vh) * 100);
}

/* ==== Calendario más fluido y legible en móvil ==== */
#calendar { padding: 0; } /* ya tienes padding en el card, aquí lo quitamos */

.fc { --fc-border-color: var(--border); }
.fc .fc-toolbar { gap: 8px; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 18px; }

@media (max-width: 700px) {
  .fc .fc-toolbar-title { font-size: 16px; }
  .fc .fc-button { padding: 4px 8px; font-size: 12px; }
  .fc .fc-col-header-cell-cushion { font-size: 12px; }
  .fc .fc-daygrid-day-number { font-size: 12px; }
}

/* Base mínima para que no se quede “bajito” en teléfonos */
@media (max-width: 480px) {
  #calendar { min-height: 520px; }
}