@import url('fonts/fuentes.css');

/* Mismos colores y tipografía que farmaciarepublicaargentina.com */
:root{
  --verde-900:#053f2e; --verde-700:#047857; --verde-600:#059669; --verde-500:#10b981;
  --verde-050:#ecfdf5; --verde-100:#d1fae5;
  --rojo:#b42318; --rojo-050:#fef3f2; --ambar-050:#fffaeb; --ambar:#93370d;
  --tinta:#0d1b16; --tinta-2:#3f5a50; --tinta-3:#6b8279;
  --linea:#e2ebe7; --fondo:#ffffff; --fondo-2:#f6faf8;
  --radio:18px; --radio-s:12px;
  --sombra:0 1px 2px rgba(5,63,46,.05), 0 8px 24px -12px rgba(5,63,46,.18);
  --max:1160px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo-2); color:var(--tinta);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1}
a{color:var(--verde-700)}
a:hover{color:var(--verde-900)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(1.6rem, 4vw, 2.2rem); letter-spacing:-.01em}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
code{background:var(--verde-050); padding:.1em .35em; border-radius:6px; font-size:.9em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
.estrecho{max-width:720px; margin:0 auto; padding:36px 16px 56px}
.tenue{color:var(--tinta-3)}
.peq{font-size:.88rem}
.nowrap{white-space:nowrap}
:focus-visible{outline:3px solid var(--verde-500); outline-offset:2px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.75em 1.4em; border-radius:999px; font-weight:600; font-size:1rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  line-height:1.2; font-family:inherit; transition:background .15s, border-color .15s;
}
.btn-primario{background:var(--verde-700); color:#fff}
.btn-primario:hover{background:var(--verde-900); color:#fff}
.btn-fantasma{background:#fff; color:var(--verde-900); border-color:var(--linea)}
.btn-fantasma:hover{border-color:var(--verde-500); background:var(--verde-050)}
.btn-peligro{background:#fff; color:var(--rojo); border-color:#f5c2bd}
.btn-peligro:hover{background:var(--rojo-050)}
.btn-grande{padding:1em 2em; font-size:1.06rem}
.btn-peq{padding:.45em .9em; font-size:.88rem}

/* ---------- Barra superior ---------- */
.barra{background:#fff; border-bottom:1px solid var(--linea)}
.barra-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta)}
.marca-cruz{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--verde-700); color:#fff; flex:none}
.marca-txt{display:flex; flex-direction:column; line-height:1.15}
.marca-txt strong{font-size:1.02rem}
.marca-txt span{font-size:.85rem; color:var(--tinta-3)}
.barra-link{font-size:.92rem; font-weight:600; color:var(--verde-700); text-decoration:none; background:none; border:0; cursor:pointer; font-family:inherit; padding:0}
.barra-link:hover{text-decoration:underline}

/* ---------- Portada ---------- */
.portada{background:linear-gradient(160deg, var(--verde-900), var(--verde-700)); color:#fff; padding:44px 0 92px}
.portada h1{color:#fff}
.antetitulo{text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700; color:var(--verde-100); margin-bottom:.6em}
.entradilla{max-width:56ch; color:#d9f3e8; margin:0}
.columnas{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:28px; margin-top:-56px; padding-bottom:56px}
.titulo-seccion{font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3); margin:28px 0 12px}
.columnas .principal > section:first-child .titulo-seccion{color:#fff; margin-top:0}

.tarjeta{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:22px}
.lista-tarjetas, .lista-personas, .lista-opciones, .lista-horas{list-style:none; margin:0; padding:0}
.lista-tarjetas, .lista-personas{display:grid; gap:14px}
.tarjeta.servicio, .tarjeta.persona{display:flex; align-items:center; gap:18px}
.tarjeta-cuerpo{flex:1; min-width:0}
.tarjeta-cuerpo p{color:var(--tinta-2); margin:.2em 0 .4em; font-size:.96rem}
.tarjeta-cuerpo h3{margin:0}
.meta{display:flex; gap:14px; flex-wrap:wrap; font-size:.9rem; color:var(--tinta-3); margin:0}
.precio{font-weight:700; color:var(--verde-700)}
.avatar{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--verde-050); color:var(--verde-700); font-weight:700; font-size:1.2rem; flex:none}

.lateral .tarjeta h2{font-size:1.15rem}
.lateral h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3); margin:18px 0 4px}
.lateral p{margin:0; font-size:.96rem}
.horario{width:100%; border-collapse:collapse; font-size:.94rem}
.horario th{text-align:left; font-weight:500; text-transform:capitalize; padding:3px 0}
.horario td{text-align:right; padding:3px 0}
.horario tr.hoy{font-weight:700; color:var(--verde-700)}

/* ---------- Reserva ---------- */
.reserva{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:28px; padding-top:28px; padding-bottom:56px; align-items:start}
.volver{display:inline-block; margin-bottom:14px; text-decoration:none; font-weight:600; font-size:.95rem}
.pasos{display:flex; gap:6px 18px; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 22px; font-size:.88rem; color:var(--tinta-3)}
.pasos li{display:flex; align-items:center; gap:7px}
.pasos span{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--linea); font-weight:700; font-size:.78rem; background:#fff}
.pasos .actual{color:var(--tinta); font-weight:600}
.pasos .actual span{background:var(--verde-700); border-color:var(--verde-700); color:#fff}
.pasos .hecho span{background:var(--verde-100); border-color:var(--verde-100); color:var(--verde-900)}

.lista-opciones{display:grid; gap:10px}
.opcion{display:flex; flex-direction:column; gap:2px; padding:16px 20px; background:#fff; border:1.5px solid var(--linea); border-radius:var(--radio-s); text-decoration:none; color:var(--tinta)}
.opcion span{color:var(--tinta-2); font-size:.93rem}
.opcion:hover{border-color:var(--verde-500); background:var(--verde-050); color:var(--tinta)}
.opcion.destacada{border-color:var(--verde-100)}

.resumen{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:22px; position:sticky; top:16px}
.resumen h2{font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3)}
.resumen-negocio{font-size:.94rem; color:var(--tinta-2)}
.resumen-negocio strong{color:var(--tinta)}
.resumen-fila{display:flex; flex-direction:column; font-size:.94rem; margin-bottom:.8em}
.resumen-fila span{color:var(--tinta-3); font-size:.82rem}
.resumen-serv{display:flex; flex-direction:column; padding:12px 0; border-top:1px solid var(--linea); font-size:.94rem}
.resumen-serv span{color:var(--tinta-3)}
.resumen-total{display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid var(--linea); margin:0}
.nota-pago{font-size:.85rem; color:var(--tinta-3); margin:.5em 0 0}

.calendario-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:18px; max-width:460px}
.cal-cabecera{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-cabecera h2{margin:0; font-size:1.08rem}
.cal-nav{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; text-decoration:none; font-size:1.4rem; color:var(--tinta); border:1px solid var(--linea)}
.cal-nav:hover{background:var(--verde-050)}
.cal-nav.off{opacity:.3}
.cal-rejilla{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center}
.cal-dsem{font-size:.75rem; color:var(--tinta-3); text-transform:uppercase; padding:4px 0}
.cal-dia{display:grid; place-items:center; aspect-ratio:1; border-radius:50%; font-size:.95rem; color:#b5c4be}
a.cal-dia{color:var(--verde-900); background:var(--verde-050); font-weight:600; text-decoration:none}
a.cal-dia:hover{background:var(--verde-100)}
.cal-dia.hoy{box-shadow:inset 0 0 0 1.5px var(--verde-500)}
.cal-dia.sel, a.cal-dia.sel{background:var(--verde-700); color:#fff}

.horas{margin-top:26px}
.horas h3{font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3); margin:16px 0 8px}
.lista-horas{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px}
.hora{display:block; text-align:center; padding:10px 0; border:1.5px solid var(--linea); border-radius:10px; background:#fff; text-decoration:none; color:var(--tinta); font-weight:600}
.hora:hover{border-color:var(--verde-600); background:var(--verde-050); color:var(--verde-900)}

/* ---------- Formularios ---------- */
.formulario{display:flex; flex-direction:column; gap:4px; max-width:560px}
.formulario label{font-weight:600; font-size:.94rem; margin-top:12px}
.formulario input:not([type=checkbox]), .formulario textarea, .formulario select,
.agenda-filtros input, .agenda-filtros select, .fila-form input{
  font:inherit; font-size:1rem; padding:.65em .8em; border:1.5px solid var(--linea); border-radius:10px; background:#fff; color:var(--tinta); width:100%;
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus{border-color:var(--verde-500); outline:none; box-shadow:0 0 0 3px var(--verde-100)}
.formulario [aria-invalid=true]{border-color:var(--rojo)}
.formulario .casilla{display:flex; gap:10px; align-items:flex-start; font-weight:400}
.casilla input{margin-top:.3em; width:18px; height:18px; accent-color:var(--verde-700); flex:none}
.formulario button{margin-top:18px; align-self:flex-start}
.opcional{font-weight:400; color:var(--tinta-3)}
.ayuda{font-size:.86rem; color:var(--tinta-3); margin:2px 0 0}
.error{color:var(--rojo); font-size:.9rem; margin:2px 0 0}
.info-rgpd{font-size:.82rem; color:var(--tinta-3); margin-top:14px; line-height:1.5}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aviso{background:var(--ambar-050); color:var(--ambar); border:1px solid #fedf89; border-radius:var(--radio-s); padding:12px 16px}
.aviso-error{background:var(--rojo-050); color:var(--rojo); border-color:#fecdca}
.aviso-ok{background:var(--verde-050); color:var(--verde-900); border-color:var(--verde-100)}

/* ---------- Página de la cita ---------- */
.exito{display:flex; gap:16px; align-items:flex-start; margin-bottom:20px}
.exito-icono{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--verde-700); color:#fff; font-size:1.5rem; font-weight:700; flex:none}
.ficha dl{display:grid; grid-template-columns:max-content 1fr; gap:8px 20px; margin:0}
.ficha dt{color:var(--tinta-3)}
.ficha dd{margin:0; font-weight:600}
.ficha.tachada dd{text-decoration:line-through; color:var(--tinta-3)}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.confirmar-cancelar{margin-top:22px; padding:20px; border:1px solid #fecdca; background:var(--rojo-050); border-radius:var(--radio)}
.confirmar-cancelar .btn{margin:4px 8px 0 0}

.texto-legal h2{font-size:1.08rem; margin-top:1.6em}
.texto-legal p{color:var(--tinta-2)}

/* ---------- Pie ---------- */
.pie{background:#fff; border-top:1px solid var(--linea); padding:24px 0; font-size:.9rem; color:var(--tinta-2)}
.pie p{margin:0 0 .4em}
.pie-legal{display:flex; flex-wrap:wrap; gap:6px 18px}
.pie-legal span{color:var(--tinta-3)}

/* ---------- Panel ---------- */
.panel-nav{display:flex; gap:4px; overflow-x:auto; padding-bottom:0}
.panel-nav a{padding:10px 14px; text-decoration:none; color:var(--tinta-2); font-weight:600; font-size:.93rem; border-bottom:3px solid transparent; white-space:nowrap}
.panel-nav a[aria-current=page]{color:var(--verde-700); border-color:var(--verde-700)}
.panel-main{padding-top:24px; padding-bottom:56px}
.panel h2{margin-top:1.4em}
.agenda-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.agenda-cab h1{margin-bottom:.1em}
.agenda-filtros{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.agenda-filtros input, .agenda-filtros select{width:auto; padding:.4em .6em; font-size:.92rem}
.vacio{padding:28px; text-align:center; color:var(--tinta-3); background:#fff; border:1px dashed var(--linea); border-radius:var(--radio)}
.tabla-envoltura{overflow-x:auto; background:#fff; border:1px solid var(--linea); border-radius:var(--radio); margin-bottom:18px}
.tabla{width:100%; border-collapse:collapse; font-size:.93rem}
.tabla th, .tabla td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--linea)}
.tabla thead th{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); background:var(--fondo-2)}
.tabla tr:last-child td{border-bottom:0}
.tabla tr.cancelada td{color:var(--tinta-3)}
.tabla tr.cancelada td:not(:last-child){text-decoration:line-through}
.tabla .fila-dia th{background:var(--verde-050); color:var(--verde-900)}
.form-cancelar{display:flex; gap:8px; align-items:center}
.mini{font-size:.82rem; color:var(--tinta-3); display:flex; gap:4px; align-items:center}
.etiqueta{display:inline-block; font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--fondo-2); color:var(--tinta-3); margin:2px 0}
.est-enviado{background:var(--verde-050); color:var(--verde-700)}
.est-fallido, .est-caducado{background:var(--rojo-050); color:var(--rojo)}
.est-pendiente{background:var(--ambar-050); color:var(--ambar)}
.rejilla-form{display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; max-width:860px; margin-bottom:18px}
.rejilla-form .ancho, .rejilla-form h2{grid-column:1 / -1}
.rejilla-form h2{margin:14px 0 0; font-size:1.05rem}
.rejilla-form fieldset{border:1px solid var(--linea); border-radius:var(--radio-s); padding:10px 16px 14px; margin-top:12px}
.rejilla-form legend{font-weight:600; padding:0 6px}
.rejilla-form .casilla{align-self:end; margin-bottom:10px}
.tabla-horario{border-collapse:collapse}
.tabla-horario th{text-align:left; padding:4px 14px 4px 0; font-weight:500}
.tabla-horario td{padding:4px 14px 4px 0; white-space:nowrap}
.formulario .hora-campo{width:5.2em; text-align:center; padding:.45em .3em}
.fila-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.fila-form input{width:auto; min-width:260px}
.salir{margin:0}

@media (max-width: 900px){
  .columnas, .reserva{grid-template-columns:1fr}
  .resumen{position:static; order:-1}
  .reserva .resumen{order:0}
  .columnas{margin-top:-56px}
}
@media (max-width: 600px){
  body{font-size:16px}
  .barra-link{font-size:.85rem; text-align:right; max-width:9em}
  .tarjeta.servicio, .tarjeta.persona{flex-wrap:wrap}
  .tarjeta.servicio .btn, .tarjeta.persona .btn{width:100%}
  .rejilla-form{grid-template-columns:1fr}
  .ficha dl{grid-template-columns:1fr; gap:0}
  .ficha dd{margin-bottom:10px}
  .fila-form input{min-width:0}
}