/* ====================================================================
   COLINAS DEL RÍO  ·  Estilos
   ==================================================================== */

:root{
  --verde:#2f6d4f;        --verde-osc:#1e4d38;    --verde-claro:#e7f1e9;
  --rio:#3a8fb7;          --rio-claro:#e3f0f5;
  --arena:#f6f4ee;        --carta:#ffffff;
  --texto:#283028;        --suave:#7c857c;        --borde:#e4e2d8;
  --sol:#d98c3f;          --sol-claro:#fbeedd;
  --rojo:#c0504d;         --rojo-claro:#f7e4e3;
  --sombra:0 2px 10px rgba(40,48,40,.07);
  --sombra-alta:0 8px 28px rgba(40,48,40,.16);
  --r:14px;
  --cw:42px;              /* ancho de columna del calendario */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--arena); color:var(--texto);
  -webkit-text-size-adjust:100%; line-height:1.45;
}
button,input,select,textarea{font-family:inherit;font-size:1rem}
button{cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--rio)}

.pantalla-carga{
  display:flex;align-items:center;justify-content:center;
  height:100vh;color:var(--suave);font-size:1.05rem;
}

/* ---------- Pantalla de acceso ------------------------------------- */
.acceso{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:linear-gradient(160deg,#264e3a 0%,#2f6d4f 55%,#3a8fb7 140%);
}
.acceso-carta{
  background:var(--carta);border-radius:20px;box-shadow:var(--sombra-alta);
  width:100%;max-width:400px;padding:30px 26px;
}
.acceso-logo{text-align:center;margin-bottom:6px}
.acceso-logo svg{width:62px;height:62px}
.acceso-logo img{width:170px;height:auto;max-width:80%;display:inline-block}
.acceso-titulo{text-align:center;font-size:1.45rem;color:var(--verde-osc);font-weight:700}
.acceso-sub{text-align:center;color:var(--suave);font-size:.9rem;margin-bottom:20px}

.pestanas{display:flex;background:var(--arena);border-radius:10px;padding:4px;margin-bottom:20px}
.pestanas button{flex:1;padding:9px;border-radius:8px;font-weight:600;color:var(--suave)}
.pestanas button.activa{background:var(--carta);color:var(--verde-osc);box-shadow:var(--sombra)}

/* ---------- Formularios -------------------------------------------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.82rem;font-weight:600;color:var(--verde-osc);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 12px;border:1.5px solid var(--borde);
  border-radius:10px;background:var(--carta);color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-claro);
}
.campo textarea{resize:vertical;min-height:70px}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 18px;border-radius:11px;font-weight:700;font-size:.95rem;
  background:var(--verde);color:#fff;transition:transform .05s,filter .15s;
}
.btn:active{transform:scale(.98)}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:default}
.btn-bloque{width:100%}
.btn-fantasma{background:var(--arena);color:var(--verde-osc)}
.btn-rio{background:var(--rio)}
.btn-sol{background:var(--sol)}
.btn-peligro{background:var(--rojo)}
.btn-chico{padding:8px 13px;font-size:.85rem;border-radius:9px}

.mensaje-error{
  background:var(--rojo-claro);color:var(--rojo);border-radius:10px;
  padding:10px 12px;font-size:.86rem;margin-bottom:14px;
}
.mensaje-ok{
  background:var(--verde-claro);color:var(--verde-osc);border-radius:10px;
  padding:10px 12px;font-size:.86rem;margin-bottom:14px;
}

/* ---------- Estructura de la app ----------------------------------- */
.app-cab{
  background:var(--verde-osc);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));
  position:sticky;top:0;z-index:30;
}
.app-cab .marca{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem}
.app-cab .marca svg{width:30px;height:30px}
.app-cab .marca img{width:34px;height:34px;object-fit:cover;border-radius:7px;background:#fff}
.app-cab .usuario{display:flex;align-items:center;gap:10px;font-size:.82rem}
.app-cab .usuario .quien{text-align:right;line-height:1.2}
.app-cab .usuario .rol{opacity:.7;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px}
.btn-salir{background:rgba(255,255,255,.15);color:#fff;padding:7px 11px;border-radius:9px;font-size:.8rem;font-weight:600}

.contenido{
  max-width:1080px;margin:0 auto;padding:18px 16px 100px;
}

/* navegación */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--carta);border-top:1px solid var(--borde);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px;color:var(--suave);font-size:.7rem;font-weight:600;
}
.nav button .ico{font-size:1.25rem;line-height:1}
.nav button.activa{color:var(--verde)}
.nav button.activa .ico{transform:translateY(-1px)}

/* ---------- Títulos de sección ------------------------------------- */
.seccion-tope{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
.seccion-titulo{font-size:1.25rem;font-weight:700;color:var(--verde-osc)}
.seccion-fecha{color:var(--suave);font-size:.85rem}

/* ---------- Resumen (chips) ---------------------------------------- */
.resumen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.resumen .chip{
  background:var(--carta);border:1px solid var(--borde);border-radius:30px;
  padding:6px 13px;font-size:.82rem;font-weight:600;box-shadow:var(--sombra);
}
.resumen .chip b{font-size:1rem}

/* ---------- Tarjetas de cabaña (panel) ----------------------------- */
.rejilla-cabanas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px;
}
.cabana{
  background:var(--carta);border-radius:var(--r);box-shadow:var(--sombra);
  padding:16px;border-left:6px solid var(--borde);
}
.cabana.libre{border-left-color:var(--verde)}
.cabana.ocupada{border-left-color:var(--rio)}
.cabana.entra{border-left-color:var(--sol)}
.cabana.sale{border-left-color:var(--sol)}
.cabana.limpiar{border-left-color:var(--rojo)}
.cabana-tope{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cabana-nombre{font-weight:700;font-size:1.05rem}
.cabana-nombre small{display:block;font-weight:500;color:var(--suave);font-size:.74rem}

.etiqueta{
  font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
}
.et-libre{background:var(--verde-claro);color:var(--verde-osc)}
.et-ocupada{background:var(--rio-claro);color:var(--rio)}
.et-entra,.et-sale{background:var(--sol-claro);color:var(--sol)}
.et-limpiar{background:var(--rojo-claro);color:var(--rojo)}

.cabana-detalle{font-size:.86rem;color:var(--texto)}
.cabana-detalle .huesped{font-weight:700}
.cabana-detalle .linea{display:flex;align-items:center;gap:6px;color:var(--suave);margin-top:3px}
.cabana-vacia{color:var(--suave);font-size:.86rem;font-style:italic}
.cabana-acciones{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* etiquetas de pago */
.pago{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:6px}
.pago-pagada{background:var(--verde-claro);color:var(--verde-osc)}
.pago-abonada{background:var(--sol-claro);color:var(--sol)}
.pago-pendiente{background:var(--rojo-claro);color:var(--rojo)}

/* ---------- Lista de reservas -------------------------------------- */
.filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.filtros button{
  background:var(--carta);border:1px solid var(--borde);border-radius:20px;
  padding:6px 13px;font-size:.82rem;font-weight:600;color:var(--suave);
}
.filtros button.activa{background:var(--verde);color:#fff;border-color:var(--verde)}
.buscador{
  width:100%;padding:11px 14px;border:1.5px solid var(--borde);
  border-radius:11px;margin-bottom:14px;background:var(--carta);
}

.lista{display:flex;flex-direction:column;gap:10px}
.reserva{
  background:var(--carta);border-radius:var(--r);box-shadow:var(--sombra);
  padding:13px 15px;display:flex;align-items:center;gap:13px;
  border-left:5px solid var(--rio);cursor:pointer;
}
.reserva:hover{box-shadow:var(--sombra-alta)}
.reserva.cancelada{opacity:.55;border-left-color:var(--suave)}
.reserva.finalizada{border-left-color:var(--verde)}
.reserva-cab{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  background:var(--verde-claro);color:var(--verde-osc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;line-height:1;
}
.reserva-cab small{font-size:.58rem;font-weight:600;opacity:.7}
.reserva-cab b{font-size:1.2rem}
.reserva-info{flex:1;min-width:0}
.reserva-info .nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserva-info .meta{font-size:.81rem;color:var(--suave);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.reserva-lado{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}

/* ---------- Calendario (línea de tiempo) --------------------------- */
.cal-tope{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cal-mes{font-weight:700;font-size:1.1rem;color:var(--verde-osc);min-width:150px;text-align:center;text-transform:capitalize}
.cal-nav{
  width:36px;height:36px;border-radius:50%;background:var(--carta);
  box-shadow:var(--sombra);font-size:1.1rem;font-weight:700;color:var(--verde-osc);
  display:flex;align-items:center;justify-content:center;
}

.cal-marco{
  background:var(--carta);border-radius:var(--r);box-shadow:var(--sombra);
  overflow:hidden;display:flex;
}
.cal-etiquetas{flex-shrink:0;border-right:1px solid var(--borde);background:var(--carta);z-index:5}
.cal-etiquetas .esquina{height:46px;border-bottom:1px solid var(--borde)}
.cal-etiquetas .et-cab{
  height:60px;display:flex;flex-direction:column;justify-content:center;
  padding:0 12px;border-bottom:1px solid var(--borde);font-weight:700;
  font-size:.84rem;color:var(--verde-osc);
}
.cal-etiquetas .et-cab small{font-weight:500;color:var(--suave);font-size:.68rem}
.cal-etiquetas .et-cab:last-child{border-bottom:none}

.cal-scroll{overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch}
.cal-rejilla{position:relative}
.cal-dias{display:flex;height:46px;border-bottom:1px solid var(--borde)}
.cal-dia{
  width:var(--cw);flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-right:1px solid var(--arena);
  font-size:.7rem;color:var(--suave);
}
.cal-dia b{font-size:.92rem;color:var(--texto)}
.cal-dia.finde{background:var(--arena)}
.cal-dia.hoy{background:var(--verde-osc);color:#fff}
.cal-dia.hoy b{color:#fff}

.cal-fila{display:flex;height:60px;position:relative;border-bottom:1px solid var(--borde)}
.cal-fila:last-child{border-bottom:none}
.cal-celda{width:var(--cw);flex-shrink:0;border-right:1px solid var(--arena)}
.cal-celda.finde{background:var(--arena)}
.cal-celda.hoy{background:rgba(47,109,79,.09)}

.cal-barra{
  position:absolute;top:9px;height:42px;border-radius:8px;
  padding:4px 8px;color:#fff;font-size:.73rem;font-weight:700;
  overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);
  display:flex;flex-direction:column;justify-content:center;
}
.cal-barra small{font-weight:500;opacity:.85;font-size:.66rem}
.cal-barra.pago-pagada{background:var(--verde)}
.cal-barra.pago-abonada{background:var(--sol)}
.cal-barra.pago-pendiente{background:var(--rojo)}
.cal-barra.finalizada{background:var(--suave)}

.leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.78rem;color:var(--suave)}
.leyenda span{display:flex;align-items:center;gap:5px}
.leyenda i{width:13px;height:13px;border-radius:4px;display:inline-block}

/* ---------- Limpieza ----------------------------------------------- */
.bloque-titulo{
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--suave);margin:18px 0 9px;
}
.bloque-titulo:first-child{margin-top:0}
.tarea{
  background:var(--carta);border-radius:var(--r);box-shadow:var(--sombra);
  padding:14px 15px;border-left:5px solid var(--sol);
}
.tarea.en_proceso{border-left-color:var(--rio)}
.tarea.completado{border-left-color:var(--verde);opacity:.7}
.tarea-tope{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tarea-cab{font-weight:700;color:var(--verde-osc)}
.tarea-cuerpo{font-size:.86rem;margin-top:7px}
.tarea-cuerpo .dato{display:flex;gap:6px;color:var(--suave);margin-top:3px}
.tarea-notas{
  background:var(--sol-claro);border-radius:9px;padding:8px 10px;
  font-size:.84rem;margin-top:9px;
}
.tarea-notas.sin{background:var(--arena);color:var(--suave);font-style:italic}
.tarea-acciones{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.alerta-plazo{color:var(--rojo);font-weight:700}

/* ---------- Estado vacío ------------------------------------------- */
.vacio{
  text-align:center;padding:50px 20px;color:var(--suave);
}
.vacio .emoji{font-size:2.6rem;display:block;margin-bottom:8px}

/* ---------- Modal -------------------------------------------------- */
.modal-fondo{
  position:fixed;inset:0;z-index:50;background:rgba(30,40,32,.55);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;animation:aparecer .15s ease;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--carta);width:100%;max-width:540px;
  border-radius:20px 20px 0 0;max-height:92vh;overflow-y:auto;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  animation:subir .2s ease;
}
@keyframes subir{from{transform:translateY(40px)}to{transform:translateY(0)}}
.modal-tope{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;position:sticky;top:0;background:var(--carta);
}
.modal-titulo{font-size:1.15rem;font-weight:700;color:var(--verde-osc)}
.modal-cerrar{
  width:34px;height:34px;border-radius:50%;background:var(--arena);
  font-size:1.1rem;color:var(--suave);display:flex;align-items:center;justify-content:center;
}
.modal-pie{display:flex;gap:10px;margin-top:8px}
.modal-pie .btn{flex:1}

.detalle-fila{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--borde);font-size:.9rem;
}
.detalle-fila:last-child{border-bottom:none}
.detalle-fila .et{color:var(--suave)}
.detalle-fila .vl{font-weight:600;text-align:right}

/* ---------- Avisos flotantes --------------------------------------- */
.avisos{position:fixed;left:0;right:0;bottom:78px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.aviso{
  background:var(--verde-osc);color:#fff;padding:11px 18px;border-radius:24px;
  font-size:.86rem;font-weight:600;box-shadow:var(--sombra-alta);
  animation:aparecer .2s ease;max-width:90%;
}
.aviso.error{background:var(--rojo)}
.aviso.ok{background:var(--verde)}

/* ---------- Aviso de configuración --------------------------------- */
.config-aviso{
  max-width:560px;margin:50px auto;background:var(--carta);
  border-radius:var(--r);box-shadow:var(--sombra);padding:26px;
}
.config-aviso h2{color:var(--verde-osc);margin-bottom:10px}
.config-aviso p{margin-bottom:9px;font-size:.92rem}
.config-aviso code{background:var(--arena);padding:2px 6px;border-radius:5px;font-size:.85rem}

/* ---------- Escritorio --------------------------------------------- */
@media(min-width:760px){
  :root{--cw:48px}
  .nav{
    position:static;border-top:none;border-bottom:1px solid var(--borde);
    max-width:1080px;margin:0 auto;
  }
  .nav button{flex-direction:row;gap:7px;font-size:.92rem;padding:14px 18px}
  .nav button .ico{font-size:1.05rem}
  .nav button.activa{box-shadow:inset 0 -3px 0 var(--verde)}
  .contenido{padding-bottom:40px}
  .modal-fondo{align-items:center;padding:24px}
  .modal{border-radius:20px}
}

/* Tablas para la vista Admin */
.tabla-marco{background:var(--carta);border-radius:14px;box-shadow:var(--sombra);overflow:auto;margin-top:12px}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;padding:10px 14px;background:var(--arena);color:var(--verde-osc);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.3px;position:sticky;top:0}
.tabla td{padding:12px 14px;border-top:1px solid rgba(0,0,0,.06);vertical-align:top}
.tabla tr:hover td{background:rgba(0,0,0,.02)}
.tabla select{padding:6px 8px;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:#fff}
.tabla .chip{background:var(--verde);color:#fff;padding:1px 8px;border-radius:6px;font-size:.7rem;font-weight:600;margin-left:6px;vertical-align:middle}

/* Solicitudes pendientes en la vista Admin */
.bloque-solicitudes{
  background:var(--sol-claro);border:1.5px solid var(--sol);border-radius:14px;
  padding:14px 16px;margin:12px 0 8px;
}
.bloque-solicitudes-tope{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--verde-osc);font-size:1rem}
.bloque-solicitudes-tope .chip{background:var(--sol);color:#fff;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700}
.solicitud{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--carta);border-radius:10px;padding:11px 13px;margin-top:8px;flex-wrap:wrap;
}
.solicitud-acciones{display:flex;gap:6px}