/* ============================================================
   HURACANCITO — ESTILOS GLOBALES
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #111; min-height: 100vh; padding: 14px; font-family: Arial, sans-serif; color: #e0e0e0; }

/* LOGIN */
#loginScreen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
#loginScreen h1 { font-size:28px; font-weight:700; color:#fff; letter-spacing:3px; margin-bottom:6px; }
#loginScreen p  { color:#888; font-size:13px; margin-bottom:24px; }
.login-card { background:#1a1a1a; border:1px solid #333; border-radius:14px; padding:22px; width:100%; max-width:340px; }
.login-card h2 { font-size:15px; font-weight:700; color:#fff; margin-bottom:16px; text-align:center; }
.login-user-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.login-user-btn { padding:13px 5px; font-size:13px; font-weight:700; border:2px solid #444; border-radius:8px; background:#222; color:#aaa; cursor:pointer; text-align:center; user-select:none; }
.login-user-btn.sel { background:#1565c0; border-color:#4fc3f7; color:#fff; }
.login-user-btn.super { border-color:#7b1fa2; color:#ce93d8; }
.login-user-btn.super.sel { background:#7b1fa2; border-color:#ce93d8; color:#fff; }
.login-pass-input { width:100%; padding:12px 11px; font-size:14px; font-weight:600; background:#fff; color:#111; border:2px solid #333; border-radius:6px; margin-bottom:10px; }
.login-error { color:#ef5350; font-size:12px; text-align:center; margin-top:6px; display:none; }

/* HEADER */
h1   { font-size:24px; font-weight:700; color:#fff; letter-spacing:3px; text-align:center; }
.reloj { font-size:23px; font-weight:700; color:#4fc3f7; text-align:center; margin-top:4px; letter-spacing:2px; }
.fecha { font-size:12px; color:#888; text-align:center; margin-top:2px; }
.dia-badge { text-align:center; margin-top:4px; }
.dia-badge span { display:inline-block; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; background:#1b5e20; color:#a5d6a7; }
.wake-bar  { display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0; }
.wake-dot  { width:9px; height:9px; border-radius:50%; background:#555; }
.wake-dot.on { background:#4caf50; }
.wake-label { font-size:11px; color:#888; }
.usuario-bar   { text-align:center; margin:5px 0; }
.usuario-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:700; background:#1565c0; color:#fff; }
.usuario-badge.super { background:#7b1fa2; }
.btn-cerrar-sesion { padding:4px 10px; font-size:11px; font-weight:700; background:#333; color:#aaa; border:none; border-radius:20px; cursor:pointer; margin-left:8px; }

/* BANNERS */
.banner { display:none; text-align:center; padding:9px 12px; font-size:12px; font-weight:700; border-radius:6px; margin:3px 0; cursor:pointer; animation:pulse 1s infinite; }
.banner.visible   { display:block; }
.banner.alerta    { background:#7b1fa2; color:#fff; }
.banner.limpieza  { background:#e65100; color:#fff; }
.banner.negra     { background:#b71c1c; color:#fff; animation:pulse 0.7s infinite; }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:0.45} }

/* TABS */
.tabs { display:flex; gap:0; margin:10px 0 14px; border-radius:8px; overflow:hidden; border:1px solid #333; }
.tab  { flex:1; padding:10px 1px; font-size:10px; font-weight:700; text-align:center; background:#1a1a1a; color:#888; cursor:pointer; text-transform:uppercase; }
.tab.active { background:#1565c0; color:#fff; }
.section { display:none; }
.section.active { display:block; }

/* FORM */
.field { margin-bottom:12px; }
.field label { display:block; font-size:11px; color:#aaa; margin-bottom:4px; text-transform:uppercase; letter-spacing:1px; }
.field select, .field input[type=number], .field input[type=text], .field input[type=time], .field input[type=password] {
  width:100%; padding:12px 11px; font-size:14px; font-weight:600; background:#fff; color:#111; border:2px solid #333; border-radius:6px;
}
.field select:focus, .field input:focus { border-color:#4fc3f7; outline:none; }
.horas-box { display:none; background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:10px; margin-top:-6px; margin-bottom:12px; }
.horas-box.visible { display:block; }
.horas-box .hlabel { font-size:11px; color:#4fc3f7; text-transform:uppercase; margin-bottom:7px; display:block; }
.horas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.hora-btn { padding:10px 3px; font-size:12px; font-weight:700; border:2px solid #444; border-radius:6px; background:#222; color:#ccc; cursor:pointer; text-align:center; }
.hora-btn.sel { background:#1565c0; border-color:#4fc3f7; color:#fff; }
.toggle-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tog { padding:12px; font-size:13px; font-weight:700; border:2px solid #444; border-radius:6px; background:#222; color:#aaa; cursor:pointer; text-align:center; text-transform:uppercase; }
.tog.si { background:#1b5e20; border-color:#4caf50; color:#a5d6a7; }
.tog.no { background:#b71c1c; border-color:#ef5350; color:#ffcdd2; }
.dni-row { display:flex; gap:8px; }
.dni-row input { flex:1; padding:12px 11px; font-size:14px; font-weight:600; background:#fff; color:#111; border:2px solid #333; border-radius:6px; }
.btn-buscar { padding:12px 14px; font-size:12px; font-weight:700; background:#1565c0; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.vuelto-display { text-align:center; font-size:20px; font-weight:700; color:#4fc3f7; padding:10px; background:#0d1b2a; border-radius:6px; border:1px solid #1565c0; margin-bottom:12px; }
.vuelto-display span { font-size:11px; color:#888; font-weight:400; display:block; margin-bottom:1px; }
.divider { border:none; border-top:1px solid #2a2a2a; margin:12px 0; }
.pago-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.pago-btn { padding:12px 3px; font-size:12px; font-weight:700; border:2px solid #444; border-radius:6px; background:#222; color:#aaa; cursor:pointer; text-align:center; }
.pago-btn.ef-on { background:#1b5e20; border-color:#4caf50; color:#a5d6a7; }
.pago-btn.yp-on { background:#4a148c; border-color:#9c27b0; color:#e1bee7; }
.pago-btn.db-on { background:#e65100; border-color:#ff9800; color:#ffe0b2; }

/* BOTONES */
.btn-full   { width:100%; padding:14px; font-size:14px; font-weight:700; border:none; border-radius:8px; cursor:pointer; text-transform:uppercase; letter-spacing:1px; margin-top:8px; }
.btn-blue   { background:#1565c0; color:#fff; }
.btn-purple { background:#6a1b9a; color:#fff; }
.btn-green  { background:#1b5e20; color:#a5d6a7; }
.btn-red    { background:#b71c1c; color:#ffcdd2; }
.btn-orange { background:#e65100; color:#fff; }
.btn-dark-purple { background:#4a148c; color:#ce93d8; }
.btn-full:active { opacity:0.85; }

/* HABITACIONES */
.legend { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.leg { font-size:10px; padding:3px 7px; border-radius:4px; font-weight:700; }
.leg.libre    { background:#1b2e1b; color:#4caf50; }
.leg.limpieza { background:#3e1a00; color:#ff9800; }
.leg.ocupado  { background:#2e1b1b; color:#ef5350; }
.leg.debe     { background:#3e3000; color:#fdd835; }
.leg.yape     { background:#2a0a40; color:#ce93d8; }
.leg.reservado{ background:#1a1040; color:#9c6fff; }
.leg.alerta   { background:#2e2010; color:#ff9800; }
.leg.vencido  { background:#3e0000; color:#ef5350; }
.leg.noche    { background:#0d2040; color:#4fc3f7; }
.room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.room-card { border:2px solid #333; border-radius:10px; padding:10px 5px; text-align:center; background:#1a1a1a; cursor:pointer; }
.room-card.libre        { border-color:#4caf50; background:#1b2e1b; }
.room-card.limpieza     { border-color:#ff9800; background:#3e1a00; animation:pulse 1.5s infinite; }
.room-card.ocupado      { border-color:#ef5350; background:#2e1b1b; }
.room-card.yape         { border-color:#9c27b0; background:#2a0a40; }
.room-card.debe         { border-color:#fdd835; background:#3e3000; }
.room-card.reservado    { border-color:#9c6fff; background:#1a1040; }
.room-card.alerta       { border-color:#ff9800; background:#2e2010; animation:pulse 1s infinite; }
.room-card.vencido      { border-color:#ef5350; background:#3e0000; animation:pulse 0.5s infinite; }
.room-card.noche        { border-color:#4fc3f7; background:#0d2040; }
.room-card.noche-alerta { border-color:#fdd835; background:#1a1a00; animation:pulse 0.8s infinite; }
.room-num   { font-size:18px; font-weight:700; color:#fff; }
.room-tipo  { font-size:9px; color:#aaa; margin-top:1px; }
.room-estado{ font-size:10px; font-weight:700; margin-top:2px; }
.room-timer { font-size:11px; font-weight:700; color:#ff9800; margin-top:2px; }
.btn-limpiar-room { margin-top:6px; padding:5px 8px; font-size:10px; font-weight:700; background:#ff9800; color:#111; border:none; border-radius:5px; cursor:pointer; width:88%; }

/* TARJETAS CLIENTES */
.cliente-card { background:#1a1a1a; border:2px solid #333; border-radius:10px; padding:13px; margin-bottom:10px; }
.cliente-card.vencido-card      { border-color:#ef5350; animation:pulse 0.8s infinite; }
.cliente-card.alerta-card       { animation:pulse 1.2s infinite; border-color:#ff9800; }
.cliente-card.noche-alerta-card { border-color:#fdd835; animation:pulse 0.8s infinite; }
.cliente-card.debe-card         { border-color:#fdd835; }
.cliente-card.yape-card         { border-color:#9c27b0; }
.cliente-card.noche-card        { border-color:#4fc3f7; }
.cliente-card.reservado-card    { border-color:#9c6fff; }
.badge    { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; background:#1565c0; color:#fff; margin-bottom:5px; margin-right:3px; }
.badge.db { background:#f9a825; color:#111; }
.badge.yp { background:#7b1fa2; color:#fff; }
.badge.ok { background:#1b5e20; color:#a5d6a7; }
.badge.nc { background:#0277bd; color:#fff; }
.badge.rv { background:#6a1b9a; color:#fff; }
.cname    { font-size:15px; font-weight:700; color:#fff; }
.cmeta    { font-size:11px; color:#aaa; margin-top:2px; line-height:1.5; }
.ctimer   { font-size:13px; font-weight:700; margin-top:5px; }
.tbar     { height:4px; border-radius:2px; background:#333; margin-top:5px; overflow:hidden; }
.tfill    { height:100%; border-radius:2px; transition:width 1s linear; }
.cactions { display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; }
.cactions button { padding:8px 9px; font-size:10px; font-weight:700; border-radius:5px; border:none; cursor:pointer; white-space:nowrap; }
.b-ticket  { background:#333; color:#fff; }
.b-extend  { background:#1565c0; color:#fff; }
.b-pay     { background:#f9a825; color:#111; }
.b-noche   { background:#0277bd; color:#fff; }
.b-sant    { background:#ff6f00; color:#fff; }
.b-reclamo { background:#c62828; color:#fff; }
.b-irse    { background:#b71c1c; color:#ffcdd2; }
.b-llego   { background:#6a1b9a; color:#fff; }

/* CAJA */
.caja-card { background:#1a1a1a; border:1px solid #222; border-radius:6px; padding:9px 11px; margin-bottom:7px; }
.caja-card .cc-top  { display:flex; justify-content:space-between; align-items:center; }
.caja-card .cc-left { font-size:12px; color:#e0e0e0; }
.caja-card .cc-right{ font-size:13px; font-weight:700; }
.caja-card .cc-meta { font-size:10px; color:#666; margin-top:2px; }
.cc-ef { color:#4caf50; }
.cc-yp { color:#ce93d8; }
.cc-db { color:#fdd835; }
.turno-box    { background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:11px; margin-bottom:10px; }
.turno-box .tb-name { font-size:14px; font-weight:700; color:#fff; }
.turno-box .tb-meta { font-size:11px; color:#888; margin-top:2px; }

/* STATS */
.stats-grid   { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.stat         { background:#1a1a1a; border-radius:8px; padding:12px; text-align:center; border:1px solid #333; }
.stat-num     { font-size:24px; font-weight:700; color:#fff; }
.stat-label   { font-size:11px; color:#888; margin-top:2px; }
.pago-resumen { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-bottom:12px; }
.pr-box   { background:#1a1a1a; border-radius:7px; padding:9px; text-align:center; border:1px solid #333; }
.pr-num   { font-size:17px; font-weight:700; }
.pr-label { font-size:10px; color:#888; margin-top:1px; }

/* LOG */
.log-box  { max-height:200px; overflow-y:auto; margin-bottom:12px; }
.log-row  { font-size:11px; color:#aaa; padding:4px 0; border-bottom:1px solid #1a1a1a; }
.log-row.reg      { color:#4fc3f7; }
.log-row.checkout { color:#a5d6a7; }
.log-row.limpieza { color:#ff9800; }
.log-row.problema { color:#ef5350; }
.log-row.noche    { color:#ce93d8; }
.log-row.caja     { color:#fdd835; }
.log-row.sistema  { color:#888; }
.log-row.recojo   { color:#4caf50; }

/* HISTORIAL */
.hist-dia       { background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:10px; margin-bottom:8px; }
.hist-dia .hd-fecha  { font-size:13px; font-weight:700; color:#4fc3f7; margin-bottom:6px; }
.hist-dia .hd-turno  { font-size:11px; color:#aaa; padding:4px 0; border-bottom:1px solid #222; }

/* LISTA NEGRA */
.negro-card       { background:#1a0000; border:1px solid #b71c1c; border-radius:7px; padding:10px; margin-bottom:8px; }
.negro-card .nc-name { font-size:14px; font-weight:700; color:#ef5350; }
.negro-card .nc-meta { font-size:11px; color:#aaa; margin-top:3px; }

/* MISC */
.sec-title { font-size:12px; font-weight:700; color:#aaa; text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; margin-top:12px; }
.empty     { text-align:center; padding:24px; color:#555; font-size:13px; }
.spin      { animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* MODALES */
.modal-bg  { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.93); z-index:999; align-items:flex-start; justify-content:center; padding-top:30px; overflow-y:auto; }
.modal-bg.open { display:flex; }
.modal-box { background:#1a1a1a; border:1px solid #444; border-radius:14px; padding:18px; width:92%; max-width:380px; margin-bottom:30px; }
.modal-box h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:14px; text-align:center; }
.modal-btn-row { display:flex; gap:8px; margin-top:12px; }
.modal-btn-row button { flex:1; padding:12px; font-size:12px; font-weight:700; border:none; border-radius:8px; cursor:pointer; text-transform:uppercase; }
.btn-cancel { background:#333; color:#aaa; }
.btn-confirm { background:#1565c0; color:#fff; }
.btn-confirm-purple { background:#6a1b9a; color:#fff; }

/* CALIFICACION */
.calif-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:12px 0; }
.calif-btn  { padding:14px 3px; font-size:12px; font-weight:700; border:2px solid #444; border-radius:8px; background:#222; color:#aaa; cursor:pointer; text-align:center; }
.calif-btn.bueno      { background:#1b5e20; border-color:#4caf50; color:#a5d6a7; }
.calif-btn.regular    { background:#e65100; border-color:#ff9800; color:#ffe0b2; }
.calif-btn.malo       { background:#b71c1c; border-color:#ef5350; color:#ffcdd2; }

/* RESPONSIVE */
@media (max-width:400px) {
  body { padding:10px; }
  .room-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .room-num  { font-size:16px; }
}