/* elpros.ec — Identidad ELPRÖS */
:root{
  /* Identidad ELPRÖS: turquesa + carbón + gris acero */
  --noche:#24262B; --noche-2:#30333A; --borde:#454A53;
  --cian:#00B2CA; --cian-osc:#00788A; --ambar:#4A5460; --hielo:#F3F5F7;
  --texto-2:#B9C0C9; --texto-claro-2:#4A5460; --blanco:#FFFFFF; --carbon:#2B2D33;
  --radio:18px; --sombra:0 8px 28px rgba(36,38,43,.10);
  --f-titulo:'Outfit',sans-serif; --f-texto:'Figtree',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-texto);color:var(--noche);background:var(--hielo);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cian-osc)}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.1;margin:0 0 .4em;letter-spacing:-.02em}
.contenedor{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--f-texto);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-cian{background:var(--cian);color:var(--noche)}
.btn-cian:hover{background:#22C3D8}
.btn-borde{background:transparent;color:var(--hielo);border-color:var(--hielo)}
.btn-noche{background:var(--noche);color:var(--hielo)}
.btn-ambar{background:var(--ambar);color:var(--blanco)}
.btn-ambar:hover{background:#3B434D}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* Header */
.header{background:var(--blanco);color:var(--carbon);position:sticky;top:0;z-index:1000;border-bottom:1px solid #E1E5EA;box-shadow:0 2px 12px rgba(36,38,43,.05)}
.header .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;color:var(--carbon);text-decoration:none;font-family:var(--f-titulo);font-weight:800;font-size:25px;letter-spacing:.06em;text-transform:uppercase}
.marca .pin{display:block;flex:0 0 auto}
.footer .marca{color:var(--blanco)}
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--texto-claro-2);text-decoration:none;font-weight:500;padding:10px 12px;border-radius:10px}
.nav a:hover,.nav a.activo{color:var(--carbon);background:#EBEEF2}
.nav .btn{margin-left:6px;min-height:42px;padding:8px 18px}
.nav a.btn-cian,.nav a.btn-cian:hover{color:var(--noche);background:var(--cian)}

/* Hero */
.hero{background:var(--noche);color:var(--hielo);padding:56px 0 64px}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:800;max-width:780px}
.hero h1 em{font-style:normal;color:var(--cian)}
.hero p.lead{font-size:clamp(17px,2vw,21px);color:var(--texto-2);max-width:620px;margin:0 0 28px}
.buscador{display:flex;gap:12px;flex-wrap:wrap;background:var(--noche-2);border:1px solid var(--borde);border-radius:20px;padding:14px;max-width:820px}
.campo{display:flex;flex-direction:column;gap:4px;flex:1 1 200px}
.campo label{font-size:13px;font-weight:700;color:var(--texto-2);letter-spacing:.04em;text-transform:uppercase}
.campo select,.campo input,.campo textarea{font:inherit;font-size:16px;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--borde);background:var(--noche);color:var(--hielo)}
.buscador .btn{align-self:flex-end;flex:0 0 auto}
.hero-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--texto-2);font-size:15px}
.hero-badges b{color:var(--hielo)}

/* Secciones */
.seccion{padding:64px 0}
.seccion-titulo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.seccion-titulo h2{font-size:clamp(28px,4vw,40px);margin:0}
.muted{color:var(--texto-claro-2)}
.oscura{background:var(--noche);color:var(--hielo)}
.oscura .muted{color:var(--texto-2)}

/* Mapa + listado */
.explorar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
#mapa{height:560px;border-radius:var(--radio);box-shadow:var(--sombra);z-index:1}
.lista{display:flex;flex-direction:column;gap:14px;max-height:560px;overflow-y:auto;padding-right:4px}
.tarjeta{display:flex;gap:16px;background:var(--blanco);border-radius:var(--radio);padding:14px;box-shadow:var(--sombra);text-decoration:none;color:inherit;border:2px solid transparent;transition:border-color .15s}
.tarjeta:hover,.tarjeta.resaltada{border-color:var(--cian)}
.tarjeta .foto{flex:0 0 120px;height:110px;border-radius:12px;background:var(--noche-2) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.tarjeta .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tarjeta h3{font-size:19px;margin:0}
.tarjeta .ciudad{font-size:14px;color:var(--texto-claro-2)}
.precio{font-family:var(--f-titulo);font-weight:700;font-size:20px}
.precio small{font-family:var(--f-texto);font-weight:400;font-size:14px;color:var(--texto-claro-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--hielo);color:var(--noche)}
.chip-cian{background:var(--noche);color:var(--cian)}
.chip-ambar{background:#DDF5F8;color:#005866}
.vacio{background:var(--blanco);border-radius:var(--radio);padding:32px;text-align:center;box-shadow:var(--sombra)}
.vacio h3{font-size:22px}

/* Pasos */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.paso{background:var(--noche-2);border:1px solid var(--borde);border-radius:var(--radio);padding:24px}
.paso .num{width:44px;height:44px;border-radius:12px;background:var(--cian);color:var(--noche);font-family:var(--f-titulo);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.paso h3{font-size:21px}
.paso p{margin:0;color:var(--texto-2)}
.panel{background:var(--blanco);border-radius:var(--radio);padding:28px;box-shadow:var(--sombra)}
.panel ul{padding-left:20px;margin:12px 0 20px}
.panel li{margin-bottom:6px}

/* Ficha del patio */
.ficha-hero{background:var(--noche);color:var(--hielo);padding:36px 0}
.galeria{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:20px}
.galeria div{border-radius:14px;background:var(--noche-2) center/cover no-repeat;min-height:150px}
.galeria div:first-child{grid-row:span 2;min-height:310px}
.ficha{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.espacio{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #DCE2EE}
.espacio:last-child{border-bottom:0}
.espacio h3{font-size:18px;margin:0 0 4px}
.reserva-box{position:sticky;top:88px}
#mapa-ficha{height:260px;border-radius:14px;margin-top:16px;z-index:1}
.aviso{font-size:14px;background:#DDF5F8;color:#004A55;border-radius:12px;padding:12px 14px;margin-top:12px}

/* Formulario claro */
.form-claro .campo label{color:var(--texto-claro-2)}
.form-claro .campo select,.form-claro .campo input,.form-claro .campo textarea{background:var(--blanco);color:var(--noche);border-color:#C8D0E0}
.form-claro textarea{min-height:110px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .ancho{grid-column:1/-1}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border:2px solid #C8D0E0;border-radius:12px;cursor:pointer;font-weight:700;text-transform:none;letter-spacing:0;font-size:16px;color:var(--noche)}
.radios input{accent-color:var(--cian-osc);width:18px;height:18px}
.radios label:has(input:checked){border-color:var(--cian);background:#DDF5F8}
.msg{margin-top:14px;padding:14px;border-radius:12px;font-weight:500;display:none}
.msg.ok{display:block;background:#DFF6E8;color:#0F5132}
.msg.error{display:block;background:#FDE2E1;color:#8A1C1C}

/* Footer */
.footer{background:var(--noche);color:var(--texto-2);padding:40px 0;border-top:1px solid var(--borde)}
.footer .contenedor{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer a{color:var(--hielo)}

/* Leaflet popup */
.leaflet-popup-content{font-family:var(--f-texto);margin:12px 14px}
.leaflet-popup-content b{font-family:var(--f-titulo);font-size:16px}
.pin-elpros{background:none;border:0}

/* ---------- Fase 3: cuenta, paneles y reservas ---------- */
.btn-sm{min-height:38px;padding:6px 14px;font-size:14px;border-radius:10px}
.btn-linea{background:var(--blanco);color:var(--carbon);border-color:#C8D0E0}
.btn-linea:hover{border-color:var(--carbon)}
.btn-peligro{background:var(--blanco);color:#A61B1B;border-color:#F1B9B6}
.btn-peligro:hover{background:#FDE2E1}
.pagina-titulo{background:var(--noche);color:var(--hielo);padding:32px 0 28px}
.pagina-titulo h1{font-size:clamp(28px,4.5vw,42px);margin:0}
.pagina-titulo p{color:var(--texto-2);margin:6px 0 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.tabs button,.tabs a{font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:8px 16px;border-radius:12px;border:1px solid var(--borde);background:var(--noche-2);color:var(--texto-2);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.tabs .activo,.tabs button[aria-selected="true"]{background:var(--cian);color:var(--noche);border-color:var(--cian)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack>*{flex:none}
.fila{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #DCE2EE}
.fila:last-child{border-bottom:0}
.fila h3{font-size:18px;margin:0 0 4px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.estado{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:99px;background:#EBEEF2;color:var(--carbon)}
.estado-pendiente_pago,.estado-en_revision{background:#FFF1D6;color:#7A4B00}
.estado-confirmada,.estado-en_curso,.estado-publicado{background:#DDF5F8;color:#005866}
.estado-completada{background:#DFF6E8;color:#0F5132}
.estado-cancelada,.estado-rechazada,.estado-no_show,.estado-suspendido{background:#FDE2E1;color:#8A1C1C}
.cuenta-caja{max-width:460px;margin:0 auto}
.check{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer;min-height:40px}
.check input{width:18px;height:18px;accent-color:var(--cian-osc)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 16px}
/* Reserva: selector de horario */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-top:8px;max-height:260px;overflow-y:auto;padding:2px}
.slot{font:inherit;font-size:14px;font-weight:700;min-height:40px;border-radius:10px;border:1px solid #C8D0E0;background:var(--blanco);color:var(--carbon);cursor:pointer}
.slot:hover:not([disabled]){border-color:var(--cian)}
.slot[disabled]{background:#EEF1F4;color:#9AA3AE;text-decoration:line-through;cursor:not-allowed}
.slot[aria-pressed="true"]{background:var(--cian);border-color:var(--cian);color:var(--noche)}
.resumen{border-top:1px solid #DCE2EE;margin-top:14px;padding-top:12px;font-size:15px}
.resumen div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.resumen .total{font-family:var(--f-titulo);font-weight:800;font-size:20px;border-top:1px solid #DCE2EE;margin-top:6px;padding-top:8px}
/* Editor del patio */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.foto-item{position:relative;border-radius:12px;overflow:hidden;background:var(--noche-2);aspect-ratio:4/3}
.foto-item img{width:100%;height:100%;object-fit:cover}
.foto-item .acciones{position:absolute;left:6px;right:6px;bottom:6px;justify-content:space-between}
.foto-item .principal{position:absolute;top:6px;left:6px}
.horario{display:grid;grid-template-columns:120px 1fr 1fr;gap:6px 10px;align-items:center}
.horario select{font:inherit;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid #C8D0E0;background:var(--blanco)}
#mapa-editor{height:320px;border-radius:14px;z-index:1;margin-top:6px}
.subpanel{background:var(--hielo);border-radius:14px;padding:16px;margin-top:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.kpi{background:var(--blanco);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.kpi b{display:block;font-family:var(--f-titulo);font-size:30px}
dialog.modal{border:0;border-radius:var(--radio);padding:24px;max-width:640px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(36,38,43,.55)}
[hidden]{display:none!important}

/* Responsive */
@media (max-width:900px){
  .explorar,.ficha,.grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  #mapa{height:380px}
  .lista{max-height:none;overflow:visible}
  .reserva-box{position:static}
}
@media (max-width:600px){
  .nav{width:100%;justify-content:space-between}
  .nav a{padding:8px}
  .nav .btn{margin-left:0}
  .tarjeta .foto{flex-basis:90px;height:90px}
  .form-grid{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr}
  .galeria div:first-child{min-height:220px}
  .seccion{padding:44px 0}
}