/* ===== Base (igual que index.css original) ===== */
:root {
  --azul-principal: #0d47a1;
  --azul-claro: #1976d2;
  --gris-oscuro: #333333;
  --gris-claro: #f5f5f5;
  --verde: #4caf50;
  --rojo: #e53935;
  --navy: #0A1733;
  --dorado: #b29a50;
  --dorado-hover: #a48c40;
  --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --fuente-ui: "Roboto", "Helvetica", "Arial", sans-serif;
  --sombra-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --sombra-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --sombra-3: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
  --sombra-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  --sombra-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  --sombra-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  font-family: var(--fuente-principal);
  background-color: var(--gris-claro);
  color: var(--gris-oscuro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h3, h5, h6, button, input, textarea, table, .alert, .snackbar { font-family: var(--fuente-ui); }
.app { position: relative; min-height: 100vh; padding: 30px; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 6px 16px; border: 0; border-radius: 4px; cursor: pointer;
  font-size: .875rem; font-weight: 500; line-height: 1.75; letter-spacing: .02857em; text-transform: uppercase;
  transition: background-color .25s, box-shadow .25s;
}
.btn--primary { background: #1976d2; color: #fff; box-shadow: var(--sombra-2); }
.btn--primary:hover { background: #1565c0; box-shadow: var(--sombra-4); }
.btn--text { background: transparent; color: #9c27b0; padding: 6px 8px; }
.btn--text:hover { background: rgba(156,39,176,.04); }
.btn--small { padding: 4px 10px; font-size: .8125rem; line-height: 1.75; letter-spacing: .02857em; }
.btn--gold { background: var(--dorado); color: var(--navy); font-weight: 700; padding: .8rem 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.btn--gold:hover { background: var(--dorado-hover); }
.btn__icon { width: 20px; height: 20px; fill: currentColor; margin: 0 8px 0 -4px; }

/* ===== Landing ===== */
.landing, .form-screen {
  min-height: 100vh; display: flex; justify-content: center; align-items: center;
  background: linear-gradient(135deg, #0A1733 60%, #b29a50 100%);
}
.landing { flex-direction: column; padding: 2rem; text-align: center; }
.landing__logo { width: 180px; height: auto; margin-bottom: 24px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,.5)); }
.landing__title { font-size: 3rem; font-weight: 700; line-height: 1.167; letter-spacing: -.00833em; color: #fff; margin-bottom: 8px; }
.landing__subtitle { font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: .0075em; color: #f1e7c6; margin-bottom: 32px; }

/* ===== Formulario ===== */
.form-screen { padding: 16px; }
#form-cita {
  background: #fff; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.3);
  padding: 32px; width: 100%; max-width: 420px; margin: 2rem auto;
}
.form__title { font-size: 1.5rem; font-weight: 700; line-height: 1.334; text-align: center; color: var(--navy); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field--last { margin-bottom: 24px; }
.field__root {
  position: relative; background: rgba(0,0,0,.06); border-radius: 4px 4px 0 0;
  border-bottom: 1px solid rgba(0,0,0,.42); transition: background-color .2s;
}
.field__root:hover { background: rgba(0,0,0,.09); }
.field__root::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 2px solid #1976d2;
  transform: scaleX(0); transition: transform .2s; pointer-events: none;
}
.field__root:focus-within::after { transform: scaleX(1); }
.field__input {
  display: block; width: 100%; padding: .75rem; margin-bottom: 1.25rem;
  border: 2px solid var(--azul-claro); border-radius: 6px; background: transparent;
  font-size: 1rem; line-height: 1.4375em; color: rgba(0,0,0,.87); outline: none;
  font-family: var(--fuente-ui); transition: border-color .3s ease;
}
.field__input:focus { border-color: var(--azul-principal); }
.field__input--multiline { margin: 0; border: 0; border-radius: 0; padding: 25px 12px 8px; resize: none; }
.field__label {
  position: absolute; left: 0; top: 0; max-width: calc(100% - 24px); pointer-events: none;
  transform: translate(12px, 16px) scale(1); transform-origin: top left;
  font-size: 1rem; line-height: 1.4375em; letter-spacing: .00938em; color: rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s, transform .2s, max-width .2s;
}
.field__root:focus-within .field__label,
.field__input:not(:placeholder-shown) + .field__label { transform: translate(12px, 7px) scale(.75); max-width: calc(133% - 32px); }
.field__root:focus-within .field__label { color: #1976d2; }

.terminos { display: flex; align-items: center; margin-bottom: 24px; }
.terminos input { margin-right: 8px; }
.terminos label { display: block; margin-bottom: .5rem; font-size: 14px; font-weight: 600; color: var(--azul-principal); }
.terminos a { color: #0000ee; }

.btn--submit {
  display: block; width: 100%; padding: .85rem 1.8rem; border: 0; border-radius: 30px; cursor: pointer;
  background: var(--verde); color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1.75;
  letter-spacing: .02857em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(17,7,201,.6);
  transition: background-color .3s ease;
}
.btn--submit:hover { background: #388e3c; box-shadow: 0 6px 15px rgb(56 142 60 / .7); }

/* ===== Calendario ===== */
.calendar-screen { display: flex; flex-direction: column; align-items: center; }
.calendar__title { font-size: 1.5rem; font-weight: 700; line-height: 1.334; color: var(--navy); margin: 24px 0; }
.embed {
  background: #fff; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.3);
  width: 100%; max-width: 1000px; padding: 32px; margin: 24px auto;
}
.embed__title { margin-bottom: .35em; }
.embed__frame { position: relative; overflow: hidden; padding-top: 75%; border-radius: 12px; }
.embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid #ccc; border-radius: 12px; }
.divider { height: 1px; margin: 16px 0; }
.tabla-wrap { width: 100%; }

/* Tabla de escritorio */
.mui-card { background: #fff; border-radius: 4px; box-shadow: var(--sombra-4); margin: 32px auto 0; width: 100%; max-width: 95%; overflow-x: auto; }
.mui-card--list { box-shadow: var(--sombra-3); margin: 0; max-width: none; }
.mui-card__content { padding: 16px; }
.mui-card__content:last-child { padding-bottom: 24px; }
.mui-card__title { font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: .0075em; text-align: center; margin-bottom: .35em; color: rgba(0,0,0,.87); }
.mui-paper { background: #fff; border-radius: 4px; box-shadow: var(--sombra-1); }
.mui-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.mui-table th, .mui-table td {
  padding: 16px; text-align: left; font-size: .875rem; line-height: 1.43; letter-spacing: .01071em;
  color: rgba(0,0,0,.87); border-bottom: 1px solid rgba(224,224,224,1);
}
.mui-table th { font-weight: 500; }
.mui-table .center { text-align: center; }
.mui-table td p { font-size: 1rem; line-height: 1.5; letter-spacing: .00938em; color: rgba(0,0,0,.6); }

/* Lista móvil */
.semana-mobile { display: none; flex-direction: column; gap: 16px; margin-top: 16px; }
.lista__fecha { font-size: 1rem; font-weight: 700; line-height: 1.75; letter-spacing: .00938em; margin-bottom: 8px; color: rgba(0,0,0,.87); }
.lista__vacio { font-size: 1rem; color: rgba(0,0,0,.6); }
.lista__horas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botón flotante */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000; width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: #1976d2; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-6); transition: background-color .25s, box-shadow .25s;
}
.fab:hover { background: #115293; box-shadow: var(--sombra-24); }
.fab svg { width: 24px; height: 24px; fill: currentColor; }
.fab__tooltip {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: rgba(97,97,97,.92); color: #fff; border-radius: 4px; padding: 4px 8px;
  font-size: .6875rem; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.fab:hover .fab__tooltip, .fab:focus-visible .fab__tooltip { opacity: 1; }

/* ===== Diálogo ===== */
.dialog { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); animation: fade .2s; }
.dialog__paper {
  display: flex; flex-direction: column; background: #fff; border-radius: 4px; box-shadow: var(--sombra-24);
  margin: 32px; width: calc(100% - 64px); max-width: 600px; max-height: calc(100% - 64px);
}
.dialog__title { padding: 16px 24px; font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: .0075em; font-family: var(--fuente-ui); color: rgba(0,0,0,.87); }
.dialog__content { padding: 0 24px 20px; overflow-y: auto; }
.dialog__actions { display: flex; justify-content: flex-end; align-items: center; padding: 8px; gap: 8px; }
.dialog__content th { width: 50%; }

/* ===== Snackbar / Alert ===== */
.snackbar { position: fixed; z-index: 1400; top: 8px; left: 8px; right: 8px; display: flex; justify-content: center; animation: fade .2s; }
.alert { display: flex; align-items: center; width: 100%; padding: 6px 16px; border-radius: 4px; font-size: .875rem; line-height: 1.43; letter-spacing: .01071em; box-shadow: var(--sombra-6); }
.alert--success { background: rgb(237,247,237); color: rgb(30,70,32); }
.alert--error { background: rgb(253,237,237); color: rgb(95,33,32); }
.alert__icon { display: flex; padding: 7px 0; margin-right: 12px; font-size: 22px; opacity: .9; }
.alert__icon svg { width: 22px; height: 22px; fill: currentColor; }
.alert--success .alert__icon { color: #2e7d32; }
.alert--error .alert__icon { color: #d32f2f; }
.alert__msg { padding: 8px 0; }
.alert__close { margin: 0 -8px 0 auto; padding: 5px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .7; cursor: pointer; display: flex; }
.alert__close:hover { background: rgba(0,0,0,.04); }
.alert__close svg { width: 20px; height: 20px; fill: currentColor; }
.alert > .alert__close { margin-left: auto; padding-left: 5px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== Responsive ===== */
@media (min-width: 600px) {
  .snackbar { top: 24px; left: 24px; right: 24px; }
  .alert { width: auto; min-width: 288px; max-width: 100%; }
}
@media (max-width: 599.95px) {
  .app { padding: 10px; }
  .semana-desktop { display: none; }
  .semana-mobile { display: flex; }
}
@media (max-width: 768px) {
  .embed { width: 95vw; max-width: none; padding: 16px; }
}