/* =====================================================================
 *  Tema de Lissette Salgado — tonos claros y rosados, acogedor.
 *  Se carga después del estilo común: aquí solo va lo que cambia.
 *
 *  Paleta (texto sobre fondo con contraste suficiente para leer bien):
 *    rosa principal  #b4567c   botones, enlaces, día elegido
 *    rosa profundo   #94405f   botón al pasar el mouse
 *    rubor           #fde8ef   días y horas libres
 *    fondo           #fff7f9   casi blanco, con un toque rosado
 *    texto           #4b3a42   ciruela muy oscuro, más cálido que el negro
 * ===================================================================== */

:root {
  color-scheme: light;          /* siempre claro, también con el celular en modo oscuro */
  --fondo:        #fff7f9;
  --tarjeta:      #ffffff;
  --texto:        #4b3a42;
  --texto-suave:  #7a6570;
  --borde:        #f3dde5;
  --primario:     #b4567c;
  --primario-osc: #94405f;
  --libre:        #fde8ef;
  --libre-borde:  #efb3c8;
  --libre-texto:  #8c3b5a;
  --gris:         #f8eef2;
  --error:        #a3304f;
  --error-fondo:  #fde6ec;
  --ok:           #5e7d4f;
  --ok-fondo:     #eef6e8;
  --info-fondo:   #fcedf2;
  --radio:        18px;
}

/* El estilo común trae colores para el modo oscuro: aquí se mantiene el claro. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #fff7f9; --tarjeta: #ffffff; --texto: #4b3a42; --texto-suave: #7a6570;
    --borde: #f3dde5; --primario: #b4567c; --primario-osc: #94405f;
    --libre: #fde8ef; --libre-borde: #efb3c8; --libre-texto: #8c3b5a;
    --gris: #f8eef2; --error: #a3304f; --error-fondo: #fde6ec;
    --ok: #5e7d4f; --ok-fondo: #eef6e8; --info-fondo: #fcedf2;
  }
  .estado-pendiente { background: #fdf0dc; color: #8a5a1c; }
}

/* ---- Fondo: rubor suave con dos manchas de luz, quieto y sin distraer ---- */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(248, 200, 218, .45), transparent 42%),
    radial-gradient(circle at 92% 30%, rgba(255, 222, 210, .40), transparent 38%),
    var(--fondo);
  background-attachment: fixed;
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---- Títulos con un toque más cálido ---- */
h1, h2, .marca {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 600;
  letter-spacing: .2px;
}
h1 { color: var(--primario-osc); }

/* ---- Barra superior translúcida ---- */
.barra {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.marca { color: var(--primario); font-size: 20px; }

/* ---- Tarjetas: más redondeadas y con sombra rosada muy suave ---- */
.tarjeta {
  border: 1px solid var(--borde);
  box-shadow: 0 10px 30px rgba(180, 86, 124, .08);
}

/* ---- Botones tipo píldora ---- */
.btn-primario, .btn-chico, .pestana { border-radius: 999px; }
.btn-primario {
  background: linear-gradient(135deg, #bb5f86, var(--primario));
  box-shadow: 0 4px 14px rgba(180, 86, 124, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primario:hover {
  background: linear-gradient(135deg, var(--primario), var(--primario-osc));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(180, 86, 124, .32);
}

/* ---- Campos ---- */
input[type=email], input[type=text], input[type=tel] { border-radius: 12px; border-color: var(--borde); }
input:focus { outline-color: var(--primario); }
input[type=checkbox] { accent-color: var(--primario); }

/* ---- Calendario ---- */
.cal-celda { border-radius: 14px; }
.cal-celda.disponible { transition: transform .12s ease, box-shadow .12s ease; }
.cal-celda.disponible:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(180, 86, 124, .18); border-width: 1px; }
.cal-celda.elegido { outline-color: var(--primario); }
.cal-nav { border-color: var(--borde); background: #fff; }

/* ---- Horas ---- */
.bloque { border-radius: 999px; }
a.bloque.libre { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
a.bloque.libre:hover { background: #fbd6e3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180, 86, 124, .18); padding: 10px 0; border-width: 1px; }

/* ---- Estados y avisos en la misma familia de colores ---- */
.estado-confirmada { background: #eef6e8; color: #4f6b42; }
.aviso { border-radius: 14px; }
.btn-confirmar { background: #5f7f4e; }
.btn-confirmar:hover { background: #4e6b40; }
.btn-rechazar { background: #ad4f6c; }
.btn-rechazar:hover { background: #8f3f58; }
.contador { background: var(--primario); }

/* Quien prefiere menos movimiento en su teléfono, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-primario:hover, .cal-celda.disponible:hover, a.bloque.libre:hover { transform: none; }
}