/* ==========================================================
   style.css – Estilos globales App Lavandería
   ========================================================== */

/* ---------- Variables de marca ---------- */
:root{
  --brand:        #62b9a9;
  --brand-600:    #4aa899;
  --brand-700:    #2f8f83;
  --brand-dark:   #0b2a2a;
  --brand-soft:   #e6f5f2;

  --ok:           #16a34a;   /* libre */
  --busy:         #e11d48;   /* ocupada */
  --offline:      #64748b;   /* desconectada */

  --text:         #0f172a;
  --muted:        #6b7280;
  --bg:           #f7f7fb;
  --card:         #ffffff;

  --ring:         rgba(98,185,169,.35);
  --shadow:       0 8px 20px rgba(2, 8, 23, .06);
  --radius:       16px;

  /* ====== Equipos (colores de íconos y estado) ====== */
  --lavadora-color: #60a5fa;   /* azul suave */
  --secadora-color: #f97316;   /* naranja */
  --libre:          var(--ok);     /* puntito verde */
  --ocupada:        var(--busy);   /* puntito rojo  */
}

/* Reset suave */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* Utilidades */
.container{max-width:1150px;margin:0 auto;padding:24px}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.shadow-sm{box-shadow:0 4px 12px rgba(2,8,23,.06)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.p-2{padding:1rem}.p-3{padding:1.5rem}.p-4{padding:2rem}
.text-muted{color:var(--muted)}
.text-brand{color:var(--brand)}
.badge{
  display:inline-block;
  font-size:.75rem;
  padding:.25rem .5rem;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-700);
}
.badge-ok{background:#dcfce7;color:#166534}
.badge-busy{background:#ffe4e6;color:#be123c}
.badge-offline{background:#e5e7eb;color:#374151}

/* ---------- Navbar (responsive con drawer) ---------- */
:root{ --navH: 56px; } /* alto mínimo de la barra; JS lo actualizará */

/* Usa el mismo gradiente del botón de login */
.app-navbar{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
  color:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.app-navbar .inner{
  max-width:1150px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:12px 20px; min-height:56px;
}
.app-navbar .brand{display:flex; align-items:center; gap:10px; font-weight:700}
.app-navbar .brand img{width:28px; height:28px; border-radius:8px}

/* Enlaces con alto contraste */
.app-navbar a{
  color:#f2fffc;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.app-navbar a:hover{background: rgba(255,255,255,.10)}
.app-navbar a.active{
  background: rgba(255,255,255,.16);
  color:#ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.20) inset;
}
.app-navbar .spacer{flex:1}
.app-navbar .user{font-size:.9rem; opacity:.95; text-shadow:0 1px 0 rgba(0,0,0,.15)}

/* Botón hamburguesa (oculto en desktop) */
.app-navbar .menu-toggle{
  display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.06); cursor:pointer;
  align-items:center; justify-content:center; gap:4px
}
.app-navbar .menu-toggle span{display:block; width:18px; height:2px; background:#f2fffc}

/* Footer del drawer */
.app-navbar .nav-footer{display:none; margin-top:8px; gap:10px; align-items:center}
.app-navbar .nav-footer .user-inline{color:#f2fffc}

/* ---- Comportamiento responsive ---- */

@media (min-width: 881px){
  .app-navbar nav{
    position:static; transform:none; opacity:1; pointer-events:auto;
    display:flex; flex-direction:row; gap:14px; margin-left:12px;
    flex-wrap:wrap; /* permite 2 filas si no cabe todo */
  }
  .app-navbar .menu-toggle{display:none}
}

/* Botón de cerrar sesión (rojo, alto contraste) */
.btn-logout{
  background: linear-gradient(180deg,#ef4444,#dc2626);
  color:#fff !important;
  border:1px solid rgba(0,0,0,.08);
  font-weight:700;
  padding:8px 12px;
  border-radius:12px;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.btn-logout:hover{ filter: brightness(1.03); }

/* ---------- Login con burbujas ---------- */
.login-wrap{
  position:relative;min-height:100vh;display:grid;place-items:center;
  background: radial-gradient(1200px 800px at 10% -10%, #0b2a2a 0%, #123a3a 25%, #0b2a2a 60%, #0b2a2a 100%);
  overflow:hidden;
}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubble{
  position:absolute;bottom:-120px;opacity:.45;border-radius:50%;
  background:radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05) 70%);
  filter:blur(0.5px);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1);opacity:.0}
  8%{opacity:.45}
  100%{transform:translateY(-120vh) scale(1.1);opacity:0}
}
/* 12 burbujas con tamaños/velocidades distintas */
.bubble:nth-child(1){left:5%; width:80px;height:80px; animation-duration:18s}
.bubble:nth-child(2){left:15%;width:50px;height:50px; animation-duration:22s; animation-delay:2s}
.bubble:nth-child(3){left:26%;width:120px;height:120px; animation-duration:28s; animation-delay:4s}
.bubble:nth-child(4){left:35%;width:70px;height:70px; animation-duration:24s; animation-delay:1s}
.bubble:nth-child(5){left:45%;width:40px;height:40px; animation-duration:20s; animation-delay:3s}
.bubble:nth-child(6){left:55%;width:100px;height:100px; animation-duration:26s; animation-delay:6s}
.bubble:nth-child(7){left:62%;width:60px;height:60px; animation-duration:21s; animation-delay:4s}
.bubble:nth-child(8){left:70%;width:140px;height:140px; animation-duration:30s; animation-delay:2s}
.bubble:nth-child(9){left:78%;width:55px;height:55px; animation-duration:19s; animation-delay:5s}
.bubble:nth-child(10){left:85%;width:85px;height:85px; animation-duration:27s; animation-delay:1s}
.bubble:nth-child(11){left:92%;width:45px;height:45px; animation-duration:23s; animation-delay:3s}
.bubble:nth-child(12){left:50%;width:110px;height:110px; animation-duration:29s; animation-delay:7s}

.login-card{
  width:min(420px, 92vw);
  background:rgba(255,255,255,.98);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  padding:28px 26px;
  backdrop-filter: blur(6px);
}
.login-card .logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-card .logo img{width:28px;height:28px;border-radius:8px}
.login-card h1{margin:6px 0 16px;font-size:1.6rem;color:#0f1e1e}
.login-card label{display:block;font-size:.86rem;color:#475569;margin:12px 2px 6px}
.login-card input{
  width:100%;padding:12px 12px 12px 14px;border-radius:12px;
  border:1px solid #dbe3e1;background:#fff;outline:none;transition:.2s;
}
.login-card input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.btn-brand{
  width:100%;margin-top:14px;padding:12px 14px;border:none;border-radius:12px;
  background:linear-gradient(180deg, var(--brand), var(--brand-700));
  color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(98,185,169,.35);
  transition:transform .04s ease, filter .2s ease;
}
.btn-brand:hover{filter:brightness(1.03)}
.btn-brand:active{transform:translateY(1px)}
.flash{
  margin-top:12px;padding:10px 12px;border-radius:12px;
  background:#fff0f0;color:#a4002a;font-size:.9rem;border:1px solid #ffd0d6;
}

/* ---------- Tablero de máquinas (grid alternativo) ---------- */
.page-machine .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.page-machine .info{font-size:.92rem;color:var(--muted)}
.page-machine .legend{display:flex;gap:8px;align-items:center}
.page-machine .legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px}
.dot-ok{background:var(--ok)} .dot-busy{background:var(--busy)} .dot-off{background:var(--offline)}

.machine-grid{display:grid;gap:14px;grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );}
.machine-card{position:relative;display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow);border:1px solid #eef2f2;transition:box-shadow .2s, transform .05s;}
.machine-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.08)}
.machine-card .machine-icon{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.1rem;flex:0 0 58px;border:2px solid rgba(255,255,255,.25);}
.machine-card .tipo-lavadora{background:linear-gradient(160deg, #60a5fa, #2563eb)}
.machine-card .tipo-secadora{background:linear-gradient(160deg, #f97316, #ea580c)}
.machine-card .machine-body{flex:1 1 auto}
.machine-card .machine-id{font-weight:700}
.machine-card .machine-meta{font-size:.85rem;color:var(--muted)}
.machine-card .machine-actions{display:flex;gap:8px;align-items:center}
.state-free{box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.state-busy{box-shadow:0 0 0 3px rgba(225,29,72,.18)}
.state-offline{opacity:.75}

/* Botones base */
.btn{padding:9px 12px;border-radius:10px;border:1px solid transparent;background:#f3f4f6;color:#111827;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.04)}
.btn-outline{background:#fff;border-color:#e5e7eb}
.btn-start{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff}
.btn-stop{background:linear-gradient(180deg,#f97316,#ea580c);color:#fff}
.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.15);border-top-color:#000;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Formularios y tablas */
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
input[type=text],input[type=number],input[type=email],select{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff
}
input:focus,select:focus{outline:none;box-shadow:0 0 0 3px var(--ring);border-color:var(--brand)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eef2f2}
th{font-size:.86rem;color:#475569;text-align:left}

/* Responsive utilitario general */
@media (max-width: 720px){
  .app-navbar .inner{padding:10px 14px}
  .app-navbar nav{gap:8px}
}

/* ---------- EQUIPOS (tiles e iconos SVG del index) ---------- */
.machine-tile{
  cursor:pointer; transition:transform .08s ease; border-radius:16px;
}
.machine-tile:hover{ transform:translateY(-1px); }
.machine-icon{
  width:56px; height:56px; display:block; margin:0 auto;
  /* Los SVG usan currentColor (se define via style="color: ...") */
}
.state-dot{
  width:12px; height:12px; border-radius:50%; display:inline-block; margin-top:6px;
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
}

/* ==== Equipos – tiles más grandes y claros ==== */
.machine-tile { min-height: 180px; border-radius: 16px; }
.machine-tile .card-body { padding: 20px; }
.machine-icon { width: 72px; height: 72px; display: inline-block; }
.state-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.06); }

/* Fix: botón rojo de Cerrar sesión en la navbar */
.app-navbar .btn-logout{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  background: linear-gradient(180deg,#ef4444,#dc2626) !important;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 14px rgba(220,38,38,.25);
  text-decoration:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.app-navbar .btn-logout:hover{ filter: brightness(1.05); }

/* ======= Estado de encargos – chips accesibles ======= */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; letter-spacing:.2px;
  padding:.28rem .6rem; border-radius:999px;
  line-height:1; border:1px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.status-badge.is-pendiente{
  color:#92400e; background:#fef3c7; border-color:#fde68a; /* amber */
}
.status-badge.is-proceso{
  color:#1d4ed8; background:#dbeafe; border-color:#bfdbfe; /* blue */
}
.status-badge.is-completado{
  color:#166534; background:#dcfce7; border-color:#bbf7d0; /* green */
}
.status-badge.is-entregado{
  color:#334155; background:#e5e7eb; border-color:#cbd5e1; /* slate */
}

/* Botones de acciones en tablas: separarlos visualmente */
.table .btn{ border-radius:10px; }

/* ==== MÓVIL iOS/ANDROID PWA – Drawer 100% alto + scroll interno ==== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --navH: 56px; /* JS lo recalcula */
}

html{ height: -webkit-fill-available; }
body{
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Header nunca recorta al nav */
.app-navbar, .app-navbar .inner{ overflow: visible; position: sticky; top: 0; z-index: 1000; }

/* ====== Drawer ====== */
@media (max-width: 992px){
  .app-navbar .menu-toggle{ display:inline-flex; margin-left:auto }

  /* Drawer pegado al top bajo el header y hasta el borde inferior */
  #mainNav{
    position: fixed;
    inset: auto 0 0 0;       /* left:0; right:0; bottom:0; */
    top: var(--navH);        /* bajo el header real */
    z-index: 1100;

    /* Alto fijo → hace que overflow funcione SIEMPRE */
    height: calc(100dvh - var(--navH) - var(--safe-top));
    /* Fallback iOS viejito */
    height: calc(-webkit-fill-available - var(--navH) - var(--safe-top));

    display: block;
    padding: 12px 16px max(16px, var(--safe-bottom));
    background: linear-gradient(180deg, var(--brand), var(--brand-700));

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
  }
  #mainNav.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Bloquea scroll del contenido al abrir el drawer */
  body.nav-open{ overflow: hidden; touch-action: none; }

  /* Oculta elementos de desktop cuando el ancho es móvil */
  .app-navbar .user-desktop{ display:none }
}

/* En modo PWA usa el viewport real */
@media (display-mode: standalone){
  #mainNav{ height: calc(100dvh - var(--navH) - var(--safe-top)); }
}