/* Temas con alto contraste y acentos diferenciados */

/* ===== SLATE+ (por defecto) ===== */
:root{
  --bg:#0e1116; --card:#171a21; --muted:#a3a8b3; --text:#f6f7fb; --tint:#4da3ff;
  --ok:#2ed573; --warn:#ffc857; --danger:#ff5c8a;
  --border:rgba(255,255,255,0.14); --shadow:0 12px 36px rgba(0,0,0,0.45);
  --radius:22px; --radius-sm:14px;
  --ios-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"SF Pro Text","SF Pro Display","SF Pro",sans-serif;
}
:root[data-theme="slate"]{
  --bg:#0e1116; --card:#171a21; --muted:#a3a8b3; --text:#f6f7fb; --tint:#4da3ff;
  --ok:#2ed573; --warn:#ffc857; --danger:#ff5c8a;
  --border:rgba(255,255,255,0.14); --shadow:0 12px 36px rgba(0,0,0,0.45);
}

/* ===== INDIGO GRAPHITE ===== */


/* ===== EVERGREEN ===== */


/* ===== LIGHT ===== */
:root[data-theme="light"]{
  --bg:#f5f7fb; --card:#ffffff; --muted:#5c667a; --text:#0d1321; --tint:#2563eb;
  --ok:#16a34a; --warn:#ca8a04; --danger:#e11d48;
  --border:rgba(0,0,0,0.14); --shadow:0 8px 24px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;height:100%; background:var(--bg); color:var(--text);
  font-family:var(--ios-font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
#app{height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;}

.header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg, rgba(20,22,28,0.95), rgba(20,22,28,0.75) 60%, transparent);
  backdrop-filter: blur(12px);
  padding:14px 16px 8px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
:root[data-theme="light"] .header{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.80) 60%, transparent);
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.h1{font-size:22px;font-weight:700;letter-spacing:.2px;}
.sub{font-size:13px;color:var(--muted)}

.nav{display:flex;gap:8px;margin-top:10px;}
.button{
  flex:1; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  border:1px solid var(--border);
  border-radius:16px; padding:10px 12px; text-align:center; font-size:14px;
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .button{ background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02)); }
.button.active{
  outline:2px solid rgba(77,163,255,.35);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 18%, transparent), rgba(0,0,0,0.06));
}
:root[data-theme="light"] .button.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, transparent), rgba(0,0,0,0.01));
}

.theme-control{display:flex;align-items:center;gap:8px;margin-top:10px;}
.theme-label{font-size:12px;color:var(--muted)}
.theme-select{
  appearance:none; -webkit-appearance:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));
  color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:8px 10px; font-size:13px;
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .theme-select{ background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); }

.content{padding:12px;display:flex;flex-direction:column;gap:12px;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}

.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.weekdays span{font-size:11px;color:var(--muted);text-align:center;letter-spacing:.2px;}

.day{
  aspect-ratio:1/1.1;
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:6px;gap:4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08));
  position:relative;overflow:hidden; cursor:pointer;
}
:root[data-theme="light"] .day{ background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04)); }
.day .num{font-size:14px;}
.day .dots{display:flex;gap:4px;margin-top:auto}
.dot{width:6px;height:6px;border-radius:50%; background: var(--tint) !important;}

.day.today{outline:2px solid color-mix(in srgb, var(--tint) 45%, transparent)}
.day.muted{opacity:.55}

/* >>> Contorno coloreado para fines de semana asignados <<< */
.day.wk-assigned{
  border-color: var(--wk-color, var(--tint));
  border-width: 2px;
}

/* >>> Iniciales del familiar (centradas, ligeramente bajas) <<< */
.day .wk-initials{
  position:absolute;
  top:70%; left:50%;
  transform: translate(-50%, -50%);
  font-weight:500;
  font-size:14px;
  letter-spacing:.6px;
  color: var(--wk-color, var(--tint));
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  pointer-events:none;
  opacity:.96;
}

/* (Badge interior ya no se usa, pero lo dejamos por si acaso) */
.weekend-badge{
  position:absolute;bottom:6px;left:6px;right:6px;
  padding:5px 10px;border-radius:10px;
  font-size:11px;text-align:center;color:white;opacity:.98;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.12);
}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.toolbar .month{font-size:16px;font-weight:700;letter-spacing:.2px;}
.iconbtn{
  width:38px;height:38px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  display:grid;place-items:center;font-size:18px; box-shadow:var(--shadow);
}
:root[data-theme="light"] .iconbtn{ background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); }

.form label{display:block;font-size:12px;color:var(--muted);margin:6px 0 4px}
.input, select, textarea{
  width:100%;padding:12px;border-radius:14px;border:1px solid var(--border);
  background:#12161e;color:var(--text);font-size:14px;
}
:root[data-theme="light"] .input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{ background:#f9fafb; }

.row{display:flex;gap:10px}.row > *{flex:1}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,0.04)
}
:root[data-theme="light"] .badge{ background:rgba(0,0,0,0.03); }
.badge .swatch{width:10px;height:10px;border-radius:50%}

.list{display:flex;flex-direction:column;gap:8px}
.item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
}
:root[data-theme="light"] .item{ background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); }

.notice{font-size:12px;color:var(--muted);text-align:center}

.status-ok{color:#2ed573}
.status-bad{color:#ff5c8a}
.debugbar{
  position:sticky;top:0;margin:8px 0;padding:8px 10px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255, 56, 86, 0.10);color:#ff3b50;font-size:12px;
}
:root[data-theme="light"] .debugbar{ background:rgba(255,56,86,0.12); }

.modal-overlay{position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: flex-end; justify-content: center; z-index: 999;}
.modal-card{width:100%; max-width:480px; background: var(--card); border:1px solid var(--border); border-top-left-radius:22px; border-top-right-radius:22px; box-shadow:var(--shadow); padding:14px; max-height:70vh; overflow-y:auto;}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.modal-title{font-size:16px; font-weight:700}
.modal-section{margin:10px 0;}
.closebtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06)); display:grid;place-items:center;font-size:18px; cursor:pointer;}
:root[data-theme="light"] .closebtn{ background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); }
.modal-chip{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,0.05); font-size:13px;}
:root[data-theme="light"] .modal-chip{ background: rgba(0,0,0,0.03); }
.modal-dot{width:10px; height:10px; border-radius:50%;}

.landscape-warning{display:none}
@media screen and (orientation:landscape){
  .landscape-warning{display:block;padding:12px;text-align:center;color:var(--muted)}
  .content{display:none}
}
/* ===== Aviso flotante para Pull-to-Refresh ===== */
.ptr-toast{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  display: none;
  opacity: 0;
  padding: 10px 12px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  background:
    color-mix(in oklab, var(--card, #11161e) 85%, var(--tint, #0a84ff) 15%);
  color: var(--on-card, #fff);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none; /* no bloquea toques */
}
.ptr-toast.show{
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ptr-row{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.ptr-spin{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: ptrSpin 700ms linear infinite;
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* --- Login overlay con logo arriba y formulario centrado --- */

.lock-overlay {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #0e1116;
  z-index: 9999;
}
.lock-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
}
.lock-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
}
.lock-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lock-card {
  width: min(420px, 90vw);
  background: #151a21;
  border: 1px solid #252b36;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.lock-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; }


/* --- Opción B: logo encima del card (solo CSS) --- */
.lock-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0e1116; z-index: 9999;
}
.lock-center {
  display: flex;
  flex-direction: column;       /* apila logo encima del card */
  align-items: center;
  gap: 16px;                    /* espacio entre logo y card */
  padding: 24px;
}
.lock-logo {
  height: 96px;                 /* ajusta tamaño del logo */
  width: auto;
  object-fit: contain;
}
@media (max-height: 640px) {
  .lock-logo { height: 72px; }
}


/* Punto rojo exclusivo para citas de tipo Pastillas */
.dot--pastillas{ background:#ff3b30 !important; }