> ## Documentation Index
> Fetch the complete documentation index at: https://ayuda.pxsol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Plano de ocupacion

<div style={{borderRadius:'20px',overflow:'hidden',border:'1px solid #e2e8f0',background:'#fff',boxShadow:'0 20px 60px rgba(15,23,42,.12)',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif',margin:'0 0 24px'}}>
  <div style={{background:'linear-gradient(135deg,#0f172a,#1e293b 60%,#334155)',color:'#fff',padding:'46px 40px'}}>
    <div style={{fontSize:'12px',letterSpacing:'.18em',textTransform:'uppercase',color:'#94a3b8',fontWeight:700}}>Mithras · Guía de uso</div>
    <div style={{fontSize:'42px',lineHeight:1.08,fontWeight:800,margin:'12px 0 8px'}}>Plano de Ocupación</div>
    <div style={{fontSize:'16px',color:'#cbd5e1',maxWidth:'580px'}}>Todo lo nuevo y lo que mejoró: más rápido, más claro y más completo. Cómo usar cada función, paso a paso.</div>

    <div style={{display:'flex',flexWrap:'wrap',gap:'8px',marginTop:'24px'}}>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Carga más rápida</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Cambio de establecimiento</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Búsqueda global</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Intercambiar habitaciones</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Huésped por habitación</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Correo y plantillas</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Días festivos</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Modo claro / oscuro</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Forma de la pastilla</span>
      <span style={{fontSize:'11px',fontWeight:700,padding:'4px 10px',borderRadius:'999px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',color:'#e2e8f0'}}>Cambio de sábanas</span>
    </div>
  </div>

  <div style={{padding:'20px 40px',color:'#64748b',fontSize:'12.5px'}}>Guía de uso y novedades · <b style={{color:'#0f172a'}}>Julio 2026</b></div>
</div>

## Contenido

1. Qué es y qué cambió
2. Carga más rápida
3. Cambiar de establecimiento
4. Búsqueda global
5. Barra superior
6. Filtros
7. Rango de fechas
8. La grilla y su diseño
9. La pastilla de reserva
10. Detalle de la reserva
11. Bloqueos
12. Mover e intercambiar
13. Indicadores del día
14. Reservas sin asignar
15. Tamaño y forma de la vista
16. Colores de las reservas
17. Días festivos
18. Estado de limpieza
19. Crear reservas y bloqueos
20. Correo y plantillas
21. Modo claro / oscuro
22. ¿Quién ve mis cambios?
23. Probalo a tu ritmo

***

## 1. Qué es y qué cambió

El Plano de Ocupación es la vista de calendario donde ves todas tus habitaciones y reservas, y gestionás el día a día.

Esta es una versión renovada: **más rápida, más clara y más completa**. Mantiene todo lo que ya conocías y suma varias funciones nuevas.

<table style={{width:'100%',borderCollapse:'collapse',margin:'10px 0',fontSize:'12.5px',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <tbody>
    <tr><th style={{textAlign:'left',padding:'7px 9px',borderBottom:'1px solid #e2e8f0',background:'#f8fafc',fontSize:'11px',textTransform:'uppercase',letterSpacing:'.04em',color:'#64748b'}}>Tema</th><th style={{textAlign:'left',padding:'7px 9px',borderBottom:'1px solid #e2e8f0',background:'#f8fafc',fontSize:'11px',textTransform:'uppercase',letterSpacing:'.04em',color:'#64748b'}}>Antes</th><th style={{textAlign:'left',padding:'7px 9px',borderBottom:'1px solid #e2e8f0',background:'#f8fafc',fontSize:'11px',textTransform:'uppercase',letterSpacing:'.04em',color:'#64748b'}}>Ahora</th></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Velocidad</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Recarga la página</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Carga al instante y se actualiza solo <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#dcfce7',color:'#15803d',border:'1px solid #bbf7d0'}}>MEJORA</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Cambiar de hotel</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Salir y volver a entrar</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Selector rápido en el plano <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Intercambiar habitaciones</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Dos movimientos manuales</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Un paso, arrastrando <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Huésped en la reserva</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Solo el titular</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Muestra el huésped de cada habitación <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Correo</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Básico</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Redactor con plantillas y adjuntos <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Días festivos</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>—</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Nacionales y propios, en el plano <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Apariencia</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Una sola</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Diseño nuevo + modo claro / oscuro <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#e0f2fe',color:'#0369a1',border:'1px solid #bae6fd'}}>NUEVO</span></td></tr>
    <tr><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Cambio de sábanas</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Manual, habitación por habitación</td><td style={{padding:'7px 9px',borderBottom:'1px solid #e2e8f0',verticalAlign:'top'}}>Se confirma al marcar Limpia, desde el plano <span style={{fontSize:'10px',fontWeight:800,padding:'2px 8px',borderRadius:'999px',background:'#dcfce7',color:'#15803d',border:'1px solid #bbf7d0'}}>MEJORA</span></td></tr>
  </tbody>
</table>

***

## 2. Carga más rápida — MEJORA

El plano abre mucho más rápido y se siente fluido aunque tengas cientos de habitaciones y meses de reservas. Y lo mejor: **cuanto más grande es el hotel, mayor es la diferencia**.

<div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'10px',margin:'16px 0',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <div style={{border:'1px solid #bbf7d0',borderRadius:'12px',padding:'15px 12px',textAlign:'center',background:'linear-gradient(180deg,#f0fdf4,#fff)'}}><div style={{fontSize:'29px',fontWeight:800,color:'#15803d',lineHeight:1,letterSpacing:'-.02em'}}>−96%</div><div style={{fontSize:'11px',color:'#64748b',marginTop:'7px',fontWeight:600,lineHeight:1.35}}>menos elementos dibujados en pantalla\*</div></div>
  <div style={{border:'1px solid #bbf7d0',borderRadius:'12px',padding:'15px 12px',textAlign:'center',background:'linear-gradient(180deg,#f0fdf4,#fff)'}}><div style={{fontSize:'29px',fontWeight:800,color:'#15803d',lineHeight:1,letterSpacing:'-.02em'}}>\< 0,5 s</div><div style={{fontSize:'11px',color:'#64748b',marginTop:'7px',fontWeight:600,lineHeight:1.35}}>para cambiar de fecha (antes 2–5 s)</div></div>
  <div style={{border:'1px solid #bbf7d0',borderRadius:'12px',padding:'15px 12px',textAlign:'center',background:'linear-gradient(180deg,#f0fdf4,#fff)'}}><div style={{fontSize:'29px',fontWeight:800,color:'#15803d',lineHeight:1,letterSpacing:'-.02em'}}>0</div><div style={{fontSize:'11px',color:'#64748b',marginTop:'7px',fontWeight:600,lineHeight:1.35}}>recargas de página al operar</div></div>
  <div style={{border:'1px solid #bbf7d0',borderRadius:'12px',padding:'15px 12px',textAlign:'center',background:'linear-gradient(180deg,#f0fdf4,#fff)'}}><div style={{fontSize:'29px',fontWeight:800,color:'#15803d',lineHeight:1,letterSpacing:'-.02em'}}>\~70%</div><div style={{fontSize:'11px',color:'#64748b',marginTop:'7px',fontWeight:600,lineHeight:1.35}}>menos descarga al abrir\*</div></div>
</div>

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{fontSize:'12.5px',fontWeight:700,color:'#0f172a',margin:'2px 0 8px'}}>Elementos dibujados en pantalla <span style={{color:'#64748b',fontWeight:600}}>— cuánto tiene que dibujar el navegador</span></div>
    <div style={{display:'flex',gap:'16px',fontSize:'10.5px',color:'#64748b',fontWeight:600,margin:'0 0 10px'}}><span><i style={{display:'inline-block',width:'11px',height:'11px',borderRadius:'3px',background:'#dc2626',verticalAlign:'-1px',marginRight:'5px'}} />Antes</span><span><i style={{display:'inline-block',width:'11px',height:'11px',borderRadius:'3px',background:'#16a34a',verticalAlign:'-1px',marginRight:'5px'}} />Ahora</span></div>

    <div style={{display:'flex',alignItems:'center',gap:'10px',margin:'10px 0'}}>
      <span style={{width:'104px',fontSize:'11px',fontWeight:700,color:'#0f172a',flex:'none',lineHeight:1.2}}>Hotel mediano<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9.5px'}}>50 hab × 60 días</small></span>

      <span style={{flex:1,position:'relative',background:'#f1f5f9',borderRadius:'6px',height:'24px',overflow:'hidden',display:'block'}}>
        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'24.7%',background:'linear-gradient(90deg,#f87171,#dc2626)'}} />

        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'1.8%',background:'linear-gradient(90deg,#34d399,#16a34a)',boxShadow:'2px 0 0 #fff'}} />
      </span>

      <span style={{width:'120px',flex:'none',textAlign:'right',fontSize:'11.5px',color:'#64748b',fontWeight:700,lineHeight:1.25}}><b style={{color:'#0f172a',fontWeight:800}}>\~21.000 → \~1.500</b><span style={{display:'inline-block',marginTop:'3px',fontSize:'10.5px',fontWeight:800,color:'#15803d',background:'#dcfce7',border:'1px solid #bbf7d0',borderRadius:'999px',padding:'0 7px'}}>−93%</span></span>
    </div>

    <div style={{display:'flex',alignItems:'center',gap:'10px',margin:'10px 0'}}>
      <span style={{width:'104px',fontSize:'11px',fontWeight:700,color:'#0f172a',flex:'none',lineHeight:1.2}}>Hotel grande<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9.5px'}}>100 hab × 120 días</small></span>

      <span style={{flex:1,position:'relative',background:'#f1f5f9',borderRadius:'6px',height:'24px',overflow:'hidden',display:'block'}}>
        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'100%',background:'linear-gradient(90deg,#f87171,#dc2626)'}} />

        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'3.5%',background:'linear-gradient(90deg,#34d399,#16a34a)',boxShadow:'2px 0 0 #fff'}} />
      </span>

      <span style={{width:'120px',flex:'none',textAlign:'right',fontSize:'11.5px',color:'#64748b',fontWeight:700,lineHeight:1.25}}><b style={{color:'#0f172a',fontWeight:800}}>\~85.000 → \~3.000</b><span style={{display:'inline-block',marginTop:'3px',fontSize:'10.5px',fontWeight:800,color:'#15803d',background:'#dcfce7',border:'1px solid #bbf7d0',borderRadius:'999px',padding:'0 7px'}}>−96%</span></span>
    </div>
  </div>
</div>

*Cada barra muestra **todo lo que dibujaba el plano viejo** (rojo) y, encima, **lo poco que dibuja el nuevo** (verde). Las dos comparten escala: el viejo **crece** con el tamaño del hotel, mientras el nuevo se mantiene en un hilito.*

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{fontSize:'12.5px',fontWeight:700,color:'#0f172a',margin:'2px 0 8px'}}>Cambiar de fecha o rango</div>
    <div style={{display:'flex',gap:'16px',fontSize:'10.5px',color:'#64748b',fontWeight:600,margin:'0 0 10px'}}><span><i style={{display:'inline-block',width:'11px',height:'11px',borderRadius:'3px',background:'#dc2626',verticalAlign:'-1px',marginRight:'5px'}} />Antes</span><span><i style={{display:'inline-block',width:'11px',height:'11px',borderRadius:'3px',background:'#16a34a',verticalAlign:'-1px',marginRight:'5px'}} />Ahora</span></div>

    <div style={{display:'flex',alignItems:'center',gap:'10px',margin:'10px 0'}}>
      <span style={{width:'104px',fontSize:'11px',fontWeight:700,color:'#0f172a',flex:'none',lineHeight:1.2}}>Tiempo de respuesta</span>

      <span style={{flex:1,position:'relative',background:'#f1f5f9',borderRadius:'6px',height:'24px',overflow:'hidden',display:'block'}}>
        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'100%',background:'linear-gradient(90deg,#f87171,#dc2626)'}} />

        <span style={{position:'absolute',left:0,top:0,height:'100%',width:'10%',background:'linear-gradient(90deg,#34d399,#16a34a)',boxShadow:'2px 0 0 #fff'}} />
      </span>

      <span style={{width:'120px',flex:'none',textAlign:'right',fontSize:'11.5px',color:'#64748b',fontWeight:700,lineHeight:1.25}}><b style={{color:'#0f172a',fontWeight:800}}>2–5 s → \< 0,5 s</b><span style={{display:'inline-block',marginTop:'3px',fontSize:'10.5px',fontWeight:800,color:'#15803d',background:'#dcfce7',border:'1px solid #bbf7d0',borderRadius:'999px',padding:'0 7px'}}>−90%</span></span>
    </div>
  </div>
</div>

*La barra completa (rojo) es lo que tardaba antes recargando todo el plano; el tramo verde, lo que tarda ahora actualizándose al instante, sin recargar.*

### Qué lo hace más rápido

* **Dibuja solo lo que ves** — aunque haya muchísimas habitaciones y fechas, prepara solo lo visible. Por eso no se pone lento en hoteles grandes.
* **Arranca liviano** — al abrir baja mucho menos; las pantallas pesadas (crear reserva, correo, configuración) se cargan recién cuando las usás.
* **Se actualiza en vivo** — cuando entra o cambia una reserva, se refresca solo, sin recargar la página.
* **Acciones al instante** — mover, intercambiar o cambiar de fecha se ven de inmediato.
* **Recuerda lo que cargó** — al volver a una vista, evita esperas repetidas.

*\* Valores de referencia para un hotel grande (≈100 habitaciones × 120 días). Los conteos de elementos surgen del propio sistema; los tiempos y el peso de descarga son estimaciones según la arquitectura. En todos los casos, la diferencia crece cuanto más grande es el establecimiento.*

***

## 3. Cambiar de establecimiento — NUEVO

Si administrás varios hoteles, saltá de uno a otro sin salir del plano.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',alignItems:'flex-start',gap:'8px'}}>
      <span style={{width:'34px',height:'34px',borderRadius:'8px',border:'1px solid #e2e8f0',background:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',flex:'none'}}>📅</span>

      <div style={{position:'relative'}}>
        <span style={{height:'32px',display:'inline-flex',alignItems:'center',justifyContent:'space-between',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a',minWidth:'190px'}}>Hotel Costa Azul <span style={{color:'#64748b'}}>▾</span></span>

        <div style={{position:'absolute',top:'38px',left:0,width:'200px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'9px',boxShadow:'0 10px 28px rgba(0,0,0,.14)',padding:'6px',fontSize:'12.5px',zIndex:2}}>
          <div style={{display:'flex',alignItems:'center',padding:'8px 9px',borderRadius:'6px',background:'#f1f5f9',fontWeight:700,color:'#0f172a'}}>Hotel Costa Azul</div>
          <div style={{display:'flex',alignItems:'center',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>Posada del Lago</div>
          <div style={{display:'flex',alignItems:'center',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>Cabañas El Bosque</div>
        </div>
      </div>
    </div>

    <div style={{height:'70px'}} />
  </div>
</div>

*Selector de establecimiento junto al logo. Cambiás de hotel y el plano se actualiza al toque.*

***

## 4. Búsqueda global — RENOVADA

Un buscador único para encontrar de todo: reservas, contactos, empresas, correos, informes. Se abre con el botón ⌘ o un atajo de teclado.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{maxWidth:'380px',margin:'0 auto',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'12px',boxShadow:'0 12px 30px rgba(0,0,0,.12)',overflow:'hidden'}}>
      <div style={{display:'flex',alignItems:'center',gap:'9px',padding:'11px 13px',borderBottom:'1px solid #eef2f7',color:'#94a3b8',fontSize:'13px'}}>🔍 Buscar reservas, contactos, empresas…</div>
      <div style={{padding:'7px',fontSize:'12px'}}><div style={{padding:'8px 10px',borderRadius:'7px',background:'#f8fafc'}}>📅 Reserva #48213 — García, Lucía</div><div style={{padding:'8px 10px',color:'#334155'}}>👤 Contacto — Martín Pérez</div><div style={{padding:'8px 10px',color:'#334155'}}>🏢 Empresa — Viajes del Sur</div></div>
    </div>
  </div>
</div>

*Escribís una vez y encontrás cualquier cosa del sistema, sin cambiar de pantalla.*

También hay un **buscador de filas** dentro del plano para resaltar habitaciones, huéspedes, país o número de reserva sobre la grilla.

***

## 5. Barra superior

Reúne las acciones principales y se acomoda sola al tamaño de tu pantalla.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap'}}>
      <span style={{width:'34px',height:'34px',borderRadius:'8px',border:'1px solid #e2e8f0',background:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',flex:'none'}}>📅</span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Hotel Costa Azul <span style={{color:'#64748b'}}>▾</span></span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#64748b'}}>⌘</span>

      <span style={{flex:1}} />

      <span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#64748b'}}>⚙️</span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:700,background:'#dc2626',color:'#fff'}}>Hoy</span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:700,background:'#dc2626',color:'#fff'}}>＋</span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:700,background:'#dc2626',color:'#fff'}}>＋ Nueva reserva</span>
    </div>
  </div>
</div>

*Logo, selector de hotel, búsqueda, configuración, "Hoy", menú "＋" y "Nueva reserva".*

* **Hoy** — vuelve la vista al día actual.
* **Nueva reserva** — abre la carga de una reserva.
* **Menú "＋"** — creación rápida: bloqueo, presupuesto, consulta o correo.
* **Configuración** — tamaño de la vista, colores, indicadores y festivos.
* En pantallas chicas las acciones se agrupan en un menú ☰.

***

## 6. Filtros

Mostrá solo las habitaciones que te interesan. Cuando hay filtros activos aparece "Limpiar filtros".

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap'}}>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>🔍 Buscar…</span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Categoría <span style={{color:'#64748b'}}>▾</span></span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Piso <span style={{color:'#64748b'}}>▾</span></span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Estado <span style={{color:'#64748b'}}>▾</span></span>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Ocupación <span style={{color:'#64748b'}}>▾</span></span>
    </div>
  </div>
</div>

*Filtrá por categoría, piso, estado de limpieza u ocupación del día. En el celular, los filtros se abren en un panel.*

***

## 7. Rango de fechas

Define qué fechas ves. Resalta en **azul** para encontrarlo fácil: es navegación, no un filtro más.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap'}}>
      <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Categoría <span style={{color:'#64748b'}}>▾</span></span>

      <span style={{flex:1}} />

      <span style={{height:'36px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:700,border:'1px solid rgba(37,99,235,.45)',background:'rgba(37,99,235,.10)',color:'#0f172a'}}><span style={{color:'#2563eb'}}>📅</span> 1 jun – 30 jun 2026 <span style={{color:'#2563eb'}}>▾</span></span>
    </div>
  </div>
</div>

*Al abrirlo trae atajos (esta semana, 30/60/90/120 días) y un calendario doble. Hasta 120 días a la vez.*

***

## 8. La grilla y su diseño — NUEVO DISEÑO

Habitaciones en filas, fechas en columnas. Diseño renovado, más limpio y legible.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{border:'1px solid #e2e8f0',borderRadius:'8px',overflow:'hidden',fontSize:'11px',background:'#fff'}}>
      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)'}}>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Habitación</div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Mié<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>13</small></div>
        <div style={{fontWeight:800,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2,background:'rgba(173,217,255,.5)'}}>Jue<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>14 · hoy</small></div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Vie<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>15</small></div>
        <div style={{fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2,background:'rgba(226,226,226,.5)'}}>Sáb<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>16</small></div>
        <div style={{fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2,background:'rgba(226,226,226,.5)'}}>Dom<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>17</small></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:600,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#4d842c',flex:'none'}} />101 <span style={{color:'rgba(15,23,42,.6)',fontWeight:700,fontSize:'8.5px',textTransform:'uppercase'}}>DBL</span></div>

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',background:'rgba(173,217,255,.45)'}} />

        <div style={{gridColumn:'span 3',padding:'4px',borderBottom:'1px solid rgba(15,23,42,.12)'}}><div style={{background:'#10b981',color:'#0b3b2e',width:'100%',height:'30px',display:'flex',alignItems:'center',padding:'0 12px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)'}}>García, Lucía</div></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:600,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#FF2600',flex:'none'}} />102 <span style={{color:'rgba(15,23,42,.6)',fontWeight:700,fontSize:'8.5px',textTransform:'uppercase'}}>SGL</span></div>
        <div style={{gridColumn:'span 2',padding:'4px',borderBottom:'1px solid rgba(15,23,42,.12)'}}><div style={{width:'100%',height:'30px',display:'flex',alignItems:'center',gap:'7px',padding:'0 12px',borderRadius:'7px',background:'#f1c40f',color:'#fff',fontWeight:800,fontSize:'12px',textShadow:'0 1px 2px rgba(0,0,0,.45)',textTransform:'uppercase'}}>⛔ Mantenim.</div></div>

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',background:'rgba(173,217,255,.45)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',background:'rgba(226,226,226,.45)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',background:'rgba(226,226,226,.45)'}} />
      </div>
    </div>
  </div>
</div>

*Hoy y los fines de semana se tiñen (también festivos). Cada habitación muestra su estado de limpieza y categoría.*

* **Encabezado de fechas y columna de habitaciones fijos** al desplazar.
* **Hoy, fin de semana y festivos** con color de fondo suave.
* **Seleccionar fechas libres** arrastrando abre un menú para crear bloqueo, reserva o presupuesto ahí mismo.

***

## 9. La pastilla de reserva — MÁS MODERNA

Cada reserva es una pastilla con forma moderna (bordes inclinados) y toda la info de un vistazo.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',justifyContent:'center',padding:'8px 0'}}>
      <div style={{background:'#10b981',color:'#0b3b2e',minWidth:'320px',height:'46px',display:'flex',flexDirection:'column',justifyContent:'center',gap:'3px',padding:'5px 22px',fontWeight:800,fontSize:'12px',clipPath:'polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)'}}>
        <span style={{textTransform:'uppercase',lineHeight:1,fontWeight:800,display:'flex',alignItems:'center',gap:'6px'}}>García, Lucía</span>

        <span style={{display:'flex',alignItems:'center',gap:'6px',fontSize:'10px',fontWeight:700,lineHeight:1}}>
          <span style={{background:'#dc2626',color:'#fff',borderRadius:'3px',width:'15px',height:'15px',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:'9px'}}>
            {'$'}
          </span>

          <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} />

          <span style={{width:'15px',height:'11px',borderRadius:'2px',overflow:'hidden',display:'inline-flex',flexDirection:'column'}}>
            <span style={{height:'50%',background:'#74acdf'}} />

            <span style={{height:'50%',background:'#fff'}} />
          </span>

          <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} />

          👥 3

          <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} />

          🌙 2

          <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} />

          Booking
        </span>
      </div>
    </div>
  </div>
</div>

*Nombre del huésped + iconos: impago, país, huéspedes, noches y canal de venta.*

<div style={{borderRadius:'12px',padding:'14px 16px',margin:'14px 0',border:'1px solid #bae6fd',background:'#f0f9ff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <h4 style={{margin:'0 0 6px',fontSize:'14px'}}>🆕 El huésped de cada habitación</h4>
  <p style={{margin:'6px 0'}}>Una reserva puede tener un <b>huésped principal por habitación</b>. El plano lo aprovecha: si una reserva ocupa varias habitaciones, <b>cada pastilla muestra al huésped que se aloja en esa habitación</b> (no siempre el titular). Así sabés de un vistazo quién está en cada cuarto. Antes todas mostraban solo al titular.</p>
</div>

* **Pasá el mouse** y la pastilla se agranda para mostrar todo el detalle.
* **Puntas más oscuras** con early check-in / late check-out (entrada o salida a mitad de día). · **NUEVO**
* **Un click** abre el menú; **doble click** abre la reserva directo.
* **Candado** cuando la habitación está bloqueada o la reserva no se puede mover.
* Al buscar, la reserva queda **resaltada con un halo**.
* **Elegí su forma**: paralelogramo (por defecto) o rectangular redondeada como el plano anterior, desde Configuración (ver sección 15). · **NUEVO**

***

## 10. Detalle de la reserva

Un click → "Ver Detalle" abre un panel lateral con el resumen completo, sin salir del plano.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{maxWidth:'330px',margin:'0 auto',border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',fontSize:'12px',boxShadow:'0 12px 30px rgba(0,0,0,.10)'}}>
      <div style={{display:'flex',alignItems:'center',gap:'11px',borderBottom:'1px solid #e2e8f0',padding:'11px 13px'}}><span style={{width:'28px',height:'28px',border:'1px solid #e2e8f0',borderRadius:'6px',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#0f172a'}}>✕</span><span style={{fontSize:'15px',fontWeight:600}}>Reserva #48213</span></div>

      <div style={{padding:'13px'}}>
        <div style={{display:'flex',gap:'8px',alignItems:'center',background:'rgba(100,116,139,.08)',border:'1px solid #e2e8f0',borderRadius:'8px',padding:'8px 10px',color:'#64748b',fontSize:'11px',marginBottom:'12px'}}>💡 Atajo: doble click sobre la reserva en el plano para abrirla.</div>
        <div style={{fontSize:'12px',fontWeight:700,color:'#0f172a',margin:'12px 0 7px'}}>Titular</div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Nombre y apellido</span><span style={{fontWeight:700,textAlign:'right'}}>García, Lucía</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Nacionalidad</span><span style={{fontWeight:700,textAlign:'right'}}>🇦🇷 Argentina</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Email</span><span style={{fontWeight:700,textAlign:'right'}}>[lucia@correo.com](mailto:lucia@correo.com)</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Teléfono</span><span style={{fontWeight:700,textAlign:'right'}}>+54 9 11 5555</span></div>

        <div style={{height:'1px',background:'#e2e8f0',margin:'10px 0'}} />

        <div style={{fontSize:'12px',fontWeight:700,color:'#0f172a',margin:'12px 0 7px'}}>Reserva</div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Ingreso</span><span style={{fontWeight:700,textAlign:'right'}}>14/6/2026</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Salida</span><span style={{fontWeight:700,textAlign:'right'}}>16/6/2026</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Noches</span><span style={{fontWeight:700,textAlign:'right'}}>2</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Total</span><span style={{fontWeight:700,textAlign:'right'}}>{'$ 120.000'}</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Pagado</span><span style={{fontWeight:700,textAlign:'right'}}>{'$ 80.000'}</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Impago</span><span style={{fontWeight:700,textAlign:'right',color:'#dc2626'}}>{'$ 40.000'}</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Instancia</span><span style={{fontSize:'10px',fontWeight:800,textTransform:'uppercase',letterSpacing:'.04em',borderRadius:'999px',padding:'2px 10px',color:'#0b3b2e',background:'#10b981'}}>Confirmada</span></div>

        <div style={{height:'1px',background:'#e2e8f0',margin:'10px 0'}} />

        <div style={{fontSize:'12px',fontWeight:700,color:'#0f172a',margin:'12px 0 7px'}}>Habitación</div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Nombre</span><span style={{fontWeight:700,textAlign:'right'}}>101</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Categoría</span><span style={{fontWeight:700,textAlign:'right'}}>Doble</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>ECI / LCO</span><span style={{fontWeight:700,textAlign:'right'}}>No / Sí</span></div>
        <div style={{display:'flex',justifyContent:'space-between',gap:'10px',padding:'4px 0'}}><span style={{color:'#64748b'}}>Distribución</span><span style={{fontWeight:700,textAlign:'right'}}>🛏 1</span></div>
      </div>

      <div style={{borderTop:'1px solid #e2e8f0',padding:'13px'}}><span style={{width:'100%',height:'38px',borderRadius:'9px',background:'#dc2626',color:'#fff',fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center',gap:'7px'}}>↗ Ir a la reserva</span></div>
    </div>
  </div>
</div>

*Panel a la derecha con bloques Titular / Reserva / Habitación / Notas, y el botón "Ir a la reserva" abajo.*

**Ver Detalle** = este resumen rápido en el plano · **Ver Reserva** (o doble click) = la ficha completa.

***

## 11. Bloqueos

Habitaciones bloqueadas por mantenimiento u otros motivos.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',gap:'12px',justifyContent:'center',flexWrap:'wrap'}}>
      <div style={{height:'34px',display:'inline-flex',alignItems:'center',gap:'7px',padding:'0 12px',borderRadius:'7px',background:'#f1c40f',color:'#fff',fontWeight:800,fontSize:'12px',textShadow:'0 1px 2px rgba(0,0,0,.45)',textTransform:'uppercase'}}>⛔ Mantenimiento</div>
      <div style={{height:'34px',display:'inline-flex',alignItems:'center',gap:'7px',padding:'0 12px',borderRadius:'7px',background:'#e74c3c',color:'#fff',fontWeight:800,fontSize:'12px',textShadow:'0 1px 2px rgba(0,0,0,.45)',textTransform:'uppercase'}}>⛔ Fuera de servicio</div>
    </div>
  </div>
</div>

*Amarillo para bloqueo común, rojo para fuera de servicio. Al click: ver, editar o eliminar.*

* **Bloqueo de medio día** — para medias jornadas (mañana o tarde).
* **Bloquear varias habitaciones** a la vez — elegís el rango y marcás todas las que quieras.

***

## 12. Mover e intercambiar habitaciones

Reorganizá reservas arrastrándolas.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:'18px'}}>
      <div style={{textAlign:'center'}}><div style={{background:'#10b981',color:'#0b3b2e',minWidth:'120px',height:'32px',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)'}}>García</div><div style={{fontSize:'10px',color:'#64748b',marginTop:'4px'}}>Hab. 101</div></div>
      <div style={{fontSize:'22px',color:'#2563eb'}}>⇅</div>
      <div style={{textAlign:'center'}}><div style={{background:'#0ea5e9',color:'#062c3a',minWidth:'120px',height:'32px',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)'}}>Pérez</div><div style={{fontSize:'10px',color:'#64748b',marginTop:'4px'}}>Hab. 102</div></div>
    </div>
  </div>
</div>

*Arrastrar a una habitación libre = mover. Arrastrar sobre otra reserva = intercambiar.*

* **Mover**: al arrastrar ves un aviso verde (se puede) o rojo (no se puede). Si la habitación destino es de otra categoría, te avisa antes de confirmar.
* **Intercambiar** · **NUEVO**: si la soltás sobre otra reserva de la misma categoría, se abre una confirmación y se **cambian de habitación las dos a la vez**.

***

## 13. Indicadores del día — MÁS DETALLES

Arriba de la grilla, una fila por indicador y una columna por día. Ahora con mucha más información.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{border:'1px solid #e2e8f0',borderRadius:'8px',overflow:'hidden',fontSize:'11px',background:'#fff'}}>
      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)',textAlign:'center'}}>
        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1'}} />

        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a'}}>Mié</div>
        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',background:'rgba(239,68,68,.15)'}}>Jue</div>
        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a'}}>Vie</div>
        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a'}}>Sáb</div>
        <div style={{fontWeight:700,padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',background:'rgba(239,68,68,.15)'}}>Dom</div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)',textAlign:'center'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:700,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)',color:'#dc2626'}}>Sin asignar ›</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#94a3b8'}}>0</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#dc2626',fontWeight:800,background:'rgba(239,68,68,.15)'}}>2</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#94a3b8'}}>0</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#94a3b8'}}>0</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#dc2626',fontWeight:800,background:'rgba(239,68,68,.15)'}}>1</div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)',textAlign:'center'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:600,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)'}}>Hab. libres 📌</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#059669'}}>8</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#059669',background:'rgba(239,68,68,.15)'}}>5</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#059669'}}>9</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#059669'}}>7</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',color:'#059669',background:'rgba(239,68,68,.15)'}}>6</div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)',textAlign:'center'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:600,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)'}}>Ocupación</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px'}}>72%</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',background:'rgba(239,68,68,.15)'}}>81%</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px'}}>64%</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px'}}>70%</div>
        <div style={{borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',lineHeight:'38px',background:'rgba(239,68,68,.15)'}}>78%</div>
      </div>
    </div>
  </div>
</div>

*Sin asignar, libres, ingresos, salidas, huéspedes, ocupación y disponibilidad por categoría.*

### Columnas con reservas sin asignar — NUEVO

Cuando una fecha tiene reservas sin asignar, se pinta **toda su columna en rojo claro** (Jue y Dom en el ejemplo) para que constantemente se vea que ahí hay algo para revisar. El "Sin asignar" se muestra en rojo y te lleva al panel con un click. Si no hay sin-asignar, todo vuelve a la normalidad.

### Fijar filas: Hab. libres y Categorías libres — NUEVO

Las filas **Hab. libres** y **Categorías libres** tienen un ícono de chincheta 📌 en su etiqueta para decidir si quedan a la vista cuando ocultás el panel de indicadores:

* **Fijada** (chincheta marcada, por defecto) → la fila queda **siempre visible**, aunque ocultes el resto del panel. Ideal para tener la disponibilidad siempre a mano.
* **Desfijada** → la fila se **oculta junto con las demás** al cerrar el panel.

Es una preferencia **por usuario**: cada quien fija o desfija lo que le sirve y se guarda para la próxima vez.

***

## 14. Reservas sin asignar — NUEVO

Reservas que todavía no tienen habitación. Imposible que se te pasen: tres formas de avisarte.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',gap:'18px',alignItems:'flex-start',flexWrap:'wrap',justifyContent:'center'}}>
      <div style={{textAlign:'center'}}><span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'7px',fontSize:'12px',fontWeight:700,background:'#dc2626',color:'#fff',boxShadow:'0 1px 3px rgba(0,0,0,.18)'}}>⚠️ Sin asignar <span style={{background:'#fbbf24',color:'#b91c1c',borderRadius:'5px',fontWeight:800,fontSize:'11px',padding:'1px 6px'}}>3</span> ▾</span><div style={{fontSize:'10px',color:'#64748b',marginTop:'6px'}}>Botón en la barra</div></div>

      <div style={{width:'300px',border:'1px solid rgba(239,68,68,.3)',borderRadius:'12px',background:'#fff',boxShadow:'0 12px 40px rgba(0,0,0,.18)',padding:'14px',display:'flex',gap:'11px'}}>
        <span style={{width:'36px',height:'36px',borderRadius:'50%',background:'rgba(239,68,68,.15)',color:'#dc2626',display:'inline-flex',alignItems:'center',justifyContent:'center',flex:'none'}}>⚠️</span>
        <div style={{flex:1}}><div style={{fontWeight:800,fontSize:'13px'}}>Recibiste 3 reservas sin asignar</div><div style={{fontSize:'11.5px',color:'#64748b'}}>Todavía no tienen una habitación asignada.</div><span style={{marginTop:'9px',display:'inline-flex',height:'30px',alignItems:'center',padding:'0 12px',borderRadius:'6px',background:'#dc2626',color:'#fff',fontSize:'11px',fontWeight:700}}>Ver reservas</span></div>
        <span style={{marginLeft:'auto',color:'#64748b',alignSelf:'flex-start'}}>✕</span>
      </div>
    </div>
  </div>
</div>

*Botón rojo/amarillo + alerta que aparece sola + panel con el listado completo.*

* **Botón en la barra** — rojo con el número.
* **Alerta** — aparece al abrir el plano o cuando llega una nueva. Se cierra cuando querés o al abrir el panel.
* **Panel** — listado con huésped, fechas y pagos; click para abrir cada una.

***

## 15. Tamaño y forma de la vista — PREVIEW EN VIVO

Elegí cuántas habitaciones ver de golpe: desde muy compacto (más filas) hasta cómodo.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',gap:'18px',alignItems:'center',flexWrap:'wrap'}}>
      <div style={{flex:1,minWidth:'180px'}}><div style={{fontSize:'11px',color:'#64748b',marginBottom:'8px'}}>Compacto ◀ ──●──────── ▶ Cómodo</div><div style={{display:'flex',flexDirection:'column',gap:'3px'}}><div style={{height:'14px',background:'#e2e8f0',borderRadius:'3px'}} /><div style={{height:'14px',background:'#e2e8f0',borderRadius:'3px'}} /><div style={{height:'14px',background:'#e2e8f0',borderRadius:'3px'}} /></div></div>
      <div style={{flex:1,minWidth:'160px',border:'1px dashed #cbd5e1',borderRadius:'8px',padding:'10px',textAlign:'center'}}><div style={{background:'#10b981',color:'#0b3b2e',height:'38px',display:'inline-flex',alignItems:'center',justifyContent:'center',padding:'0 18px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)'}}>García, L.</div><div style={{fontSize:'10px',color:'#64748b',marginTop:'8px'}}>Vista previa — se actualiza al instante</div></div>
    </div>
  </div>
</div>

*Movés el control y una vista previa te muestra al toque cómo queda, sin guardar.*

Esta preferencia es **tuya**: cada operador elige su tamaño y no afecta al resto.

### Forma de la pastilla — NUEVO

¿Preferís las pastillas rectangulares, como en el plano anterior? Ahora elegís la forma en la misma pantalla, junto a la vista previa:

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'16px'}}>
      <div style={{display:'inline-flex',gap:'3px',border:'1px solid #e2e8f0',background:'#f1f5f9',borderRadius:'8px',padding:'3px'}}>
        <span style={{display:'inline-flex',alignItems:'center',gap:'6px',background:'#fff',borderRadius:'6px',padding:'4px 10px',boxShadow:'0 1px 2px rgba(0,0,0,.12)',fontSize:'11px',fontWeight:700,color:'#0f172a'}}><span style={{width:'20px',height:'10px',background:'#64748b',display:'inline-block',clipPath:'polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)'}} />Paralelogramo</span>
        <span style={{display:'inline-flex',alignItems:'center',gap:'6px',borderRadius:'6px',padding:'4px 10px',fontSize:'11px',fontWeight:700,color:'#64748b',opacity:.7}}><span style={{width:'20px',height:'10px',background:'#94a3b8',display:'inline-block',borderRadius:'4px'}} />Redondeada</span>
      </div>

      <div style={{display:'flex',gap:'14px',flexWrap:'wrap',justifyContent:'center'}}>
        <div style={{textAlign:'center'}}>
          <div style={{background:'#10b981',color:'#0b3b2e',minWidth:'188px',height:'40px',display:'flex',alignItems:'center',padding:'0 22px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)'}}>García, Lucía</div>
          <div style={{fontSize:'10px',color:'#64748b',marginTop:'6px'}}>Paralelogramo — por defecto</div>
        </div>

        <div style={{textAlign:'center'}}>
          <div style={{background:'#10b981',color:'#0b3b2e',minWidth:'188px',height:'40px',display:'flex',alignItems:'center',padding:'0 14px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',borderRadius:'10px'}}>García, Lucía</div>
          <div style={{fontSize:'10px',color:'#64748b',marginTop:'6px'}}>Redondeada — estilo clásico</div>
        </div>
      </div>
    </div>
  </div>
</div>

*El selector está al lado de la vista previa: elegís la forma y la ves aplicada al instante, antes de guardar.*

* **Paralelogramo** (por defecto) — bordes inclinados, el diseño del plano nuevo.
* **Redondeada** — rectangular con bordes redondeados, como el plano anterior y los bloqueos; deja menos espacio entre pastillas contiguas.

También es una preferencia **por usuario**: cada operador elige su forma y queda guardada para la próxima vez.

***

## 16. Colores de las reservas

Cada estado de reserva tiene su color. Se renovó la paleta para que todos sean fáciles de distinguir.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',flexWrap:'wrap',gap:'8px'}}>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#3b82f6'}} />Preventa / Nueva</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#10b981'}} />Venta / Confirmada</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#0ea5e9'}} />Arribos</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#14b8a6'}} />In House</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#f97316'}} />Salidas</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#8b5cf6'}} />Postventa</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#475569'}} />No shows</span>
      <span style={{display:'inline-flex',alignItems:'center',gap:'7px',fontSize:'11px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'7px',padding:'5px 9px'}}><i style={{width:'15px',height:'15px',borderRadius:'4px',display:'inline-block',background:'#ffb86a'}} />Sin asignar</span>
    </div>
  </div>
</div>

*Antes algunos compartían color (Arribos y Venta, Salidas e In House). Ahora cada uno es único.*

### Cómo cambiarlos

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',display:'flex',justifyContent:'center',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{width:'220px',border:'1px solid #e2e8f0',borderRadius:'10px',background:'#fff',boxShadow:'0 12px 30px rgba(0,0,0,.14)',overflow:'hidden'}}>
      <div style={{height:'120px',position:'relative',background:'linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,#10b981)'}}>
        <span style={{position:'absolute',right:'42px',top:'32px',width:'13px',height:'13px',borderRadius:'50%',border:'2px solid #fff',boxShadow:'0 0 2px rgba(0,0,0,.5)'}} />
      </div>

      <div style={{padding:'11px'}}>
        <div style={{height:'12px',borderRadius:'6px',marginBottom:'10px',position:'relative',background:'linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00)'}}>
          <span style={{position:'absolute',left:'40%',top:'-2px',width:'15px',height:'15px',borderRadius:'50%',border:'2px solid #fff',boxShadow:'0 0 2px rgba(0,0,0,.5)'}} />
        </div>

        <div style={{display:'flex',alignItems:'center',gap:'8px'}}><span style={{width:'32px',height:'32px',borderRadius:'7px',border:'1px solid #e2e8f0',background:'#10b981'}} /><span style={{flex:1,height:'32px',border:'1px solid #e2e8f0',borderRadius:'7px',display:'flex',alignItems:'center',padding:'0 9px',fontFamily:'ui-monospace,Menlo,monospace',fontSize:'13px'}}>#10B981</span></div>
      </div>
    </div>
  </div>
</div>

*Selector con paleta visual (mover a gusto) y campo para pegar el código de color. Se aplican **para todo el hotel**.*

### Color del texto de la pastilla — NUEVO

Junto a cada color de fondo ahora podés elegir el **color del texto** de la pastilla. Por defecto el plano lo **detecta solo** según el brillo del fondo (el punto rojo marca el que elige automáticamente). Si querés, lo fijás a mano con el control **Aa**: **Blanco** o **Negro**. Así el nombre del huésped y los datos se leen siempre bien, sea cual sea el color que elegiste.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'16px'}}>
      <div style={{display:'inline-flex',gap:'3px',border:'1px solid #e2e8f0',background:'#f1f5f9',borderRadius:'8px',padding:'3px'}}>
        <span style={{position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',background:'#fff',borderRadius:'6px',padding:'3px 8px',boxShadow:'0 1px 2px rgba(0,0,0,.12)'}}><span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',background:'#3f3f46',color:'#fff',borderRadius:'4px',fontSize:'11px',fontWeight:700,lineHeight:1,padding:'2px 5px'}}>Aa</span><span style={{position:'absolute',top:'-3px',right:'-3px',width:'8px',height:'8px',borderRadius:'50%',background:'#dc2626'}} /></span>
        <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',borderRadius:'6px',padding:'3px 8px',opacity:.55}}><span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',background:'#e4e4e7',color:'#18181b',borderRadius:'4px',fontSize:'11px',fontWeight:700,lineHeight:1,padding:'2px 5px'}}>Aa</span></span>
      </div>

      <div style={{display:'flex',gap:'14px',flexWrap:'wrap',justifyContent:'center'}}>
        <div style={{background:'#ffb86a',color:'#3a2a12',minWidth:'188px',height:'46px',display:'flex',flexDirection:'column',justifyContent:'center',gap:'3px',padding:'5px 22px',fontWeight:800,fontSize:'12px',clipPath:'polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)'}}><span style={{textTransform:'uppercase',lineHeight:1,fontWeight:800}}>Pérez, Juan</span><span style={{display:'flex',alignItems:'center',gap:'6px',fontSize:'10px',fontWeight:700,lineHeight:1}}>👥 2 <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} /> 🌙 3</span></div>
        <div style={{background:'#475569',color:'#fff',minWidth:'188px',height:'46px',display:'flex',flexDirection:'column',justifyContent:'center',gap:'3px',padding:'5px 22px',fontWeight:800,fontSize:'12px',clipPath:'polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)'}}><span style={{textTransform:'uppercase',lineHeight:1,fontWeight:800}}>Gómez, Ana</span><span style={{display:'flex',alignItems:'center',gap:'6px',fontSize:'10px',fontWeight:700,lineHeight:1}}>👥 2 <span style={{width:'1px',height:'9px',background:'currentColor',opacity:.3}} /> 🌙 1</span></div>
      </div>
    </div>
  </div>
</div>

*El control "Color del texto" (Blanco / Negro) está al lado de cada color. El punto rojo indica el que elige la detección automática. Como los colores, se aplica para todo el hotel.*

***

## 17. Días festivos — NUEVO

Marcá los días especiales para tenerlos siempre a la vista.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{border:'1px solid #e2e8f0',borderRadius:'8px',overflow:'hidden',fontSize:'11px',background:'#fff'}}>
      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)'}}>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Habitación</div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Mié<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>24</small></div>
        <div style={{fontWeight:800,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2,background:'rgba(168,85,247,.2)'}}>Jue<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>25 · feriado</small></div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Vie<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>26</small></div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Sáb<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>27</small></div>
        <div style={{background:'#fff',fontWeight:700,textAlign:'center',padding:'5px 2px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid #cbd5e1',color:'#0f172a',lineHeight:1.2}}>Dom<small style={{display:'block',color:'#64748b',fontWeight:600,fontSize:'9px'}}>28</small></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'96px repeat(5,1fr)'}}>
        <div style={{height:'38px',background:'#fff',fontWeight:600,display:'flex',alignItems:'center',gap:'7px',paddingLeft:'9px',borderRight:'1px solid #cbd5e1',borderBottom:'1px solid rgba(15,23,42,.12)'}}>101 <span style={{color:'rgba(15,23,42,.6)',fontWeight:700,fontSize:'8.5px',textTransform:'uppercase'}}>DBL</span></div>

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)',background:'rgba(168,85,247,.14)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)'}} />

        <div style={{height:'38px',borderRight:'1px solid rgba(15,23,42,.12)',borderBottom:'1px solid rgba(15,23,42,.12)'}} />
      </div>
    </div>
  </div>
</div>

*Los feriados tiñen la columna y muestran su nombre al pasar el mouse.*

* **Feriados nacionales** — según el país, se pueden traer automáticamente.
* **Feriados propios** del hotel o la ciudad — los cargás vos, con su color.
* Podés cargar un **día puntual o un rango** (ej. una semana de evento).

***

## 18. Estado de limpieza — MEJORA

El estado de housekeeping de cada habitación, a la vista.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'flex',flexDirection:'column',gap:'6px',maxWidth:'280px'}}>
      <div style={{height:'32px',display:'inline-flex',alignItems:'center',justifyContent:'flex-start',gap:'9px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#4d842c'}} />101 · Limpia</div>
      <div style={{height:'32px',display:'inline-flex',alignItems:'center',justifyContent:'flex-start',gap:'9px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#8b4513'}} />102 · Sucia</div>
      <div style={{height:'32px',display:'inline-flex',alignItems:'center',justifyContent:'flex-start',gap:'9px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#6e6e6e'}} />103 · Fuera de servicio</div>
    </div>
  </div>
</div>

*Un punto de color por estado. Cambiás el estado y dejás observaciones desde la misma fila.*

### Cambio de sábanas al marcar "Limpia" — MEJORA

Al pasar una habitación a **"Limpia"** o **"Limpia e inspeccionada"** desde "Editar habitación", el plano te pregunta en la misma ventana si también se cambiaron las sábanas / blancos. Se acabó el tener que ir después a Estado de habitaciones a corregirlo habitación por habitación.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',display:'flex',justifyContent:'center',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{width:'310px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'10px',boxShadow:'0 10px 28px rgba(0,0,0,.14)',overflow:'hidden',fontSize:'12px'}}>
      <div style={{padding:'12px 14px',borderBottom:'1px solid #e2e8f0',fontWeight:800,color:'#0f172a'}}>Editar habitación <span style={{color:'#64748b',fontWeight:600}}>102</span></div>

      <div style={{padding:'12px 14px',display:'flex',flexDirection:'column',gap:'10px'}}>
        <div>
          <div style={{fontSize:'10.5px',fontWeight:700,color:'#64748b',marginBottom:'4px',textTransform:'uppercase',letterSpacing:'.04em'}}>Estado de housekeeping</div>
          <div style={{height:'32px',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 11px',borderRadius:'8px',border:'1px solid #e2e8f0',fontWeight:600,color:'#0f172a'}}><span style={{display:'inline-flex',alignItems:'center',gap:'8px'}}><span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#4d842c',display:'inline-block'}} />Limpia</span><span style={{color:'#64748b'}}>▾</span></div>
        </div>

        <div style={{border:'1px solid #e2e8f0',borderRadius:'8px',padding:'10px 11px',display:'flex',flexDirection:'column',gap:'7px',background:'#fbfdff'}}>
          <div style={{color:'#64748b'}}>Cambio de sábanas pendiente: <b style={{color:'#dc2626'}}>Sí</b></div>
          <div style={{display:'flex',alignItems:'center',gap:'8px',fontWeight:600,color:'#0f172a'}}><span style={{width:'15px',height:'15px',borderRadius:'4px',background:'#0f172a',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:'10px',flexShrink:0}}>✓</span>Se realizó el cambio de sábanas / blancos</div>
          <div style={{fontSize:'10.5px',color:'#94a3b8'}}>Al confirmar, el indicador pasa a No; si no, se mantiene como está.</div>
        </div>

        <div style={{display:'flex',justifyContent:'flex-end',gap:'8px'}}><span style={{height:'28px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'11px',fontWeight:700,border:'1px solid #e2e8f0',color:'#334155'}}>Cancelar</span><span style={{height:'28px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'11px',fontWeight:700,background:'#dc2626',color:'#fff'}}>Guardar</span></div>
      </div>
    </div>
  </div>
</div>

*Al elegir "Limpia" o "Limpia e inspeccionada" aparece el recuadro: estado actual del cambio de sábanas y la casilla para confirmarlo, todo en la misma ventana.*

* **Si confirmás** — el indicador "Cambio de sábanas" pasa a **No** y se registra la fecha del cambio. El módulo Estado de habitaciones se actualiza solo, sin tocar nada más.
* **Si no confirmás** — el valor queda tal como estaba; nada cambia en silencio.
* El sistema vuelve a marcar **Sí** automáticamente según los días entre cambios de sábanas configurados para tu hotel.
* Con otros estados (Sucia, Bloqueada, Fuera de servicio) la pregunta no aparece.
* Funciona igual en la computadora y en el celular, y también al cambiar el estado desde el plano anterior o la app de housekeeping.

***

## 19. Crear reservas y bloqueos

Desde el botón "＋", desde "Nueva reserva" o seleccionando fechas libres en la grilla.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',display:'flex',justifyContent:'center',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{width:'210px',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'9px',boxShadow:'0 10px 28px rgba(0,0,0,.14)',padding:'6px',fontSize:'12.5px'}}>
      <div style={{display:'flex',alignItems:'center',gap:'9px',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>🔒 Nuevo bloqueo</div>
      <div style={{display:'flex',alignItems:'center',gap:'9px',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>🧮 Nuevo presupuesto</div>
      <div style={{display:'flex',alignItems:'center',gap:'9px',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>💬 Nueva consulta</div>
      <div style={{display:'flex',alignItems:'center',gap:'9px',padding:'8px 9px',borderRadius:'6px',color:'#334155'}}>✉️ Nuevo correo</div>
    </div>
  </div>
</div>

*Reserva, bloqueo, presupuesto, consulta o correo — todo desde el plano.*

### Cargar reserva = un asistente guiado

* **Huésped** — buscás un contacto existente o creás uno nuevo (nombre, documento, país, teléfono, email).
* **Datos** — ingreso / salida, early check-in / late check-out, tarifario, moneda, idioma y notas.
* **Habitaciones** — cantidad, selección entre las disponibles, tarifa diaria o total y distribución de camas.

***

## 20. Correo y plantillas — NUEVO

Desde el plano podés redactar y enviar correos, con plantillas reutilizables.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{maxWidth:'380px',margin:'0 auto',background:'#fff',border:'1px solid #e2e8f0',borderRadius:'10px',overflow:'hidden',fontSize:'12px'}}>
      <div style={{background:'#0f172a',color:'#fff',padding:'9px 12px',fontWeight:700,display:'flex',alignItems:'center',gap:'8px'}}>✉️ Redactar correo</div>

      <div style={{padding:'11px 12px',display:'flex',flexDirection:'column',gap:'7px'}}>
        <div style={{display:'flex',gap:'8px',alignItems:'center'}}><span style={{color:'#94a3b8',width:'48px'}}>Plantilla</span><span style={{height:'32px',display:'inline-flex',alignItems:'center',justifyContent:'space-between',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',flex:1}}>Confirmación de reserva <span style={{color:'#64748b'}}>▾</span></span></div>
        <div style={{display:'flex',gap:'8px',alignItems:'center'}}><span style={{color:'#94a3b8',width:'48px'}}>Para</span><span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',flex:1}}>[lucia@correo.com](mailto:lucia@correo.com)</span></div>
        <div style={{display:'flex',gap:'8px',alignItems:'center'}}><span style={{color:'#94a3b8',width:'48px'}}>Asunto</span><span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',flex:1}}>Tu reserva en Hotel Costa Azul</span></div>
        <div style={{border:'1px solid #e2e8f0',borderRadius:'7px',height:'40px',color:'#94a3b8',padding:'7px 9px'}}>Escribí tu mensaje…</div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{color:'#64748b',fontSize:'11px'}}>📎 Adjuntar archivo</span><span style={{height:'28px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'11px',fontWeight:700,background:'#dc2626',color:'#fff'}}>Enviar</span></div>
      </div>
    </div>
  </div>
</div>

*Elegís una plantilla, completás destinatario y asunto, adjuntás archivos y enviás. Podés guardar borradores.*

* **Plantillas reutilizables** — confirmaciones, marketing, encuestas, comprobantes, etc.
* **Editor de plantillas** — con contenido dinámico (datos de la reserva), por idioma e instancia.
* **Adjuntos** y **guardar borrador** para retomar después.

***

## 21. Modo claro / oscuro — NUEVO

El plano se adapta para trabajar cómodo de día o de noche.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'14px'}}>
      <div style={{border:'1px solid #e2e8f0',borderRadius:'9px',overflow:'hidden'}}><div style={{background:'#fff',padding:'12px'}}><div style={{background:'#10b981',color:'#0b3b2e',height:'30px',display:'inline-flex',alignItems:'center',justifyContent:'center',padding:'0 16px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)'}}>García</div></div><div style={{fontSize:'10px',textAlign:'center',color:'#64748b',padding:'5px'}}>Claro</div></div>
      <div style={{border:'1px solid #334155',borderRadius:'9px',overflow:'hidden'}}><div style={{background:'#0f172a',padding:'12px'}}><div style={{background:'#10b981',color:'#0b3b2e',height:'30px',display:'inline-flex',alignItems:'center',justifyContent:'center',padding:'0 16px',fontWeight:800,fontSize:'12px',textTransform:'uppercase',clipPath:'polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)'}}>García</div></div><div style={{fontSize:'10px',textAlign:'center',color:'#94a3b8',padding:'5px',background:'#0f172a'}}>Oscuro</div></div>
    </div>
  </div>
</div>

*Las reservas conservan su color; el fondo y los textos se ajustan al tema.*

***

## 22. ¿Quién ve mis cambios?

Algunas preferencias son personales y otras se comparten con todo el hotel.

<div style={{borderRadius:'12px',padding:'14px 16px',margin:'14px 0',border:'1px solid #fde68a',background:'#fffbeb',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <h4 style={{margin:'0 0 6px',fontSize:'14px'}}>🔑 Para tener claro</h4>

  <ul style={{margin:'6px 0',paddingLeft:'20px'}}>
    <li style={{margin:'3px 0'}}><b>Tuyo (solo vos):</b> el <b>tamaño de la vista</b> y qué <b>indicadores</b> mostrás. Cada operador tiene su configuración.</li>
    <li style={{margin:'3px 0'}}><b>Del hotel (todos lo ven):</b> los <b>colores</b> de las reservas y los <b>días festivos</b>. Si los cambiás, cambian para todo el establecimiento.</li>
  </ul>
</div>

Además, algunas acciones dependen de tus permisos: si no tenés habilitada una función, el botón aparece pero te avisa que no tenés acceso.

***

## 23. Probalo a tu ritmo — NUEVO

Durante esta etapa el plano nuevo es **opcional y personal**: lo activás —o volvés al anterior— **solo para tu usuario**, sin afectar a tus compañeros. A partir del **1 de septiembre de 2026** pasa a ser la versión oficial.

<div style={{borderRadius:'12px',padding:'14px 16px',margin:'14px 0',border:'1px solid #bae6fd',background:'#f0f9ff',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <h4 style={{margin:'0 0 6px',fontSize:'14px'}}>👋 La primera vez</h4>
  <p style={{margin:'6px 0'}}>Al entrar te recibimos con una pantalla de bienvenida. Tocá <b>"Empezar"</b> y ya estás usando el plano nuevo. Cada operador decide por su cuenta: tu elección <b>no cambia nada</b> para el resto del hotel.</p>
</div>

### ¿Querés volver al plano anterior?

Usá el botón **"Plano anterior"**, arriba a la derecha en la barra superior. El cambio es **solo para vos** y podés volver al nuevo cuando quieras.

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',display:'flex',justifyContent:'flex-end',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <span style={{height:'32px',display:'inline-flex',alignItems:'center',gap:'6px',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>↩ Plano anterior</span>
  </div>
</div>

*El botón "Plano anterior" está siempre visible en la barra superior, a la derecha; si hay poco espacio se reduce a solo su ícono de volver.*

<div style={{borderRadius:'12px',padding:'14px 16px',margin:'14px 0',border:'1px solid #fde68a',background:'#fffbeb',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
  <h4 style={{margin:'0 0 6px',fontSize:'14px'}}>💬 Tu opinión nos ayuda a mejorar</h4>
  <p style={{margin:'6px 0'}}>Al volver, te pedimos un comentario corto con el <b>motivo del cambio</b>. Contanos qué echaste en falta o qué problema encontraste: con eso ajustamos el plano nuevo a las necesidades de tu hotel. Es lo que más nos sirve para mejorarlo.</p>
</div>

<div style={{border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',margin:'14px 0 4px'}}>
  <div style={{height:'26px',background:'#f1f5f9',borderBottom:'1px solid #e2e8f0',display:'flex',alignItems:'center',gap:'5px',padding:'0 10px'}}>
    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />

    <span style={{width:'9px',height:'9px',borderRadius:'50%',background:'#cbd5e1',display:'inline-block'}} />
  </div>

  <div style={{padding:'16px',background:'#fbfdff',display:'flex',justifyContent:'center',fontFamily:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif'}}>
    <div style={{maxWidth:'360px',width:'100%',border:'1px solid #e2e8f0',borderRadius:'12px',overflow:'hidden',background:'#fff',fontSize:'12px',boxShadow:'0 12px 30px rgba(0,0,0,.1)'}}>
      <div style={{borderBottom:'1px solid #e2e8f0',padding:'11px 13px'}}><span style={{fontSize:'15px',fontWeight:600}}>¿Desea continuar?</span></div>

      <div style={{padding:'13px'}}>
        <div style={{display:'flex',gap:'9px',border:'1px solid #fde68a',background:'#fffbeb',borderRadius:'10px',padding:'10px 12px',marginBottom:'12px'}}><span style={{color:'#d97706',flex:'none'}}>⚠️</span><div><div style={{fontWeight:800,fontSize:'12px'}}>Tu feedback nos ayuda a mejorar.</div><div style={{fontSize:'11px',color:'#64748b',marginTop:'2px'}}>¿Qué te hizo volver al plano anterior? Contanos qué echaste en falta o qué problema encontraste.</div></div></div>
        <div style={{fontSize:'12px',fontWeight:700,color:'#0f172a',margin:'0 0 7px'}}>Motivo del cambio</div>
        <div style={{border:'1px solid #e2e8f0',borderRadius:'8px',background:'#fff',padding:'9px 10px',minHeight:'54px',color:'#64748b',fontSize:'11.5px'}}>Ej: Falta funcionalidad de X, encontré un error al hacer Y…</div>
      </div>

      <div style={{borderTop:'1px solid #e2e8f0',padding:'13px',display:'flex',gap:'8px',justifyContent:'flex-end'}}><span style={{height:'32px',display:'inline-flex',alignItems:'center',padding:'0 11px',borderRadius:'8px',fontSize:'12px',fontWeight:600,border:'1px solid #e2e8f0',background:'#fff',color:'#0f172a'}}>Cancelar</span><span style={{display:'inline-flex',alignItems:'center',height:'32px',padding:'0 14px',borderRadius:'7px',background:'#dc2626',color:'#fff',fontSize:'12px',fontWeight:700}}>Confirmar</span></div>
    </div>
  </div>
</div>

*Al volver al plano anterior te pedimos el motivo. Es un campo obligatorio y breve, y va directo al equipo que mejora el plano.*

***

*Mithras · Plano de Ocupación · Guía de uso · Julio 2026*