/* Panel de dirección de Melatte (app.melatte.coffee): barra lateral espresso, contenido crema y detalles en dorado */
body.app{background:#f6f0e6;--borde:#e8dfd0;--suave:#8a7a6a;--verde:#2f8a4c;--rojo:#c43d3d;--ambar:#b7791f}
.app-marco{display:flex;min-height:100vh}

/* Barra lateral */
.app-lado{position:sticky;top:0;height:100vh;width:248px;flex:0 0 248px;display:flex;flex-direction:column;background:linear-gradient(180deg,#2a1f17,#1c140f);color:#efe4d2;padding:18px 12px;overflow-y:auto;z-index:40}
.app-marca{display:flex;align-items:center;gap:11px;padding:4px 8px 18px;text-decoration:none;border-bottom:1px solid #ffffff14;margin-bottom:10px}
.app-marca img{width:40px;height:40px;border-radius:11px;object-fit:contain;background:#ffffff10;padding:3px}
.app-marca b{display:block;font:600 1.15rem/1.1 Fraunces,Georgia,serif;color:#fff}
.app-marca small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.app-nav{display:grid;gap:14px;flex:1}
.nav-titulo{display:flex;align-items:center;gap:9px;margin:0 0 4px;padding:0 10px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#b9a68e}
.nav-titulo svg{color:var(--acento)}
.app-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 37px;border-radius:10px;text-decoration:none;font-size:.93rem;color:#e4d8c6;transition:background .15s,color .15s}
.nav-grupo:first-child a{padding-left:10px;font-weight:600}
.app-nav a:hover{background:#ffffff0d;color:#fff}
.app-nav a[aria-current]{background:linear-gradient(90deg,#cf933238,#cf933212);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--acento)}
.app-salir{margin-top:14px;padding:10px;border-radius:10px;text-decoration:none;font-size:.88rem;color:#b9a68e;text-align:center;border:1px solid #ffffff1a}
.app-salir:hover{color:#fff;border-color:#ffffff40}

/* Contenido */
.app-cuerpo{flex:1;min-width:0}
.app-arriba{display:none}
.app-contenido.ancho{max-width:1240px;padding:28px 32px 64px}
.app-velo{display:none}

/* Móvil: menú que se abre desde la izquierda */
@media (max-width:900px){
  .app-lado{position:fixed;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .25s ease}
  body.menu-abierto .app-lado{transform:none;box-shadow:12px 0 40px #0005}
  body.menu-abierto .app-velo{display:block;position:fixed;inset:0;background:#0006;z-index:30}
  .app-arriba{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;padding:10px 16px;background:#2a1f17;color:#fff;font:600 1.05rem Fraunces,Georgia,serif}
  .app-boton-menu{border:0;background:#ffffff14;color:#fff;border-radius:10px;padding:7px;display:grid;place-items:center;cursor:pointer}
  .app-contenido.ancho{padding:18px 16px 56px}
}

/* Cabecera de la pantalla */
.saludo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.saludo h1{font-size:2.1rem;margin:0}
.sobre{margin:0 0 4px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);font-weight:600}
.reloj{margin:0;font:600 2rem/1 Fraunces,Georgia,serif;color:var(--acento);font-variant-numeric:tabular-nums}

/* Cifras grandes */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.kpi{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--borde);text-decoration:none;box-shadow:0 1px 2px #0000000a,0 10px 30px -18px #3b2f2640;transition:transform .15s,box-shadow .15s}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 1px 2px #0000000a,0 16px 34px -18px #3b2f2666}
.kpi>small:first-child{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:600}
.kpi>b{font:600 2rem/1.1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums}
.kpi .barra{margin:4px 0 2px}
.kpi-pie{font-size:.84rem;color:var(--suave)}
.kpi-pie.sube{color:var(--verde);font-weight:600}.kpi-pie.baja{color:var(--rojo);font-weight:600}
.kpi.destacado{background:linear-gradient(140deg,#2a1f17,#3d2c1f);border-color:#2a1f17;color:#fbf5ea}
.kpi.destacado>small:first-child,.kpi.destacado .kpi-pie{color:#d8c6ab}
.kpi.destacado>b{color:#fff;font-size:2.3rem}
.kpi.destacado .kpi-pie.sube{color:#7ed59a}.kpi.destacado .kpi-pie.baja{color:#ff9b9b}

/* Tarjetas */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.tarjeta{padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--borde);box-shadow:0 1px 2px #0000000a,0 10px 30px -18px #3b2f2640;min-width:0}
.tarjeta.ancha{grid-column:1/-1}
.tarjeta h2{margin:0;font-size:1.15rem}
.t-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
.t-cabeza a{font-size:.86rem;color:var(--ambar);text-decoration:none;font-weight:600}
.lista-limpia{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fila-lista{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none}
.fila-lista>span:first-child{display:grid;min-width:0}
.fila-lista small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:12px 0}
.fila-datos small{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);font-weight:600}
.fila-datos b{font-size:1.05rem}

/* Alertas */
.alertas{margin-bottom:18px;border-left:5px solid var(--rojo)}
.alertas h2{margin-bottom:10px}
.alertas ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alertas li a{display:block;padding:9px 12px;border-radius:10px;background:#fbf3e4;text-decoration:none;font-weight:500}
.alertas li.mal a{background:#fbe4e4;color:#7c1d1d}
.todo-bien{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:18px;border-left:5px solid var(--verde)}

/* Equipo de hoy */
.turnos-hoy li{display:grid;grid-template-columns:12px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.turnos-hoy .punto{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#d6cbbb}
.turnos-hoy li.ahora .punto{background:var(--verde);box-shadow:0 0 0 4px #2f8a4c26}
.turnos-hoy li.acabado{opacity:.5}
.turnos-hoy small{grid-column:2;color:var(--suave)}
.turnos-hoy .horas{grid-column:3;grid-row:1/3;font-variant-numeric:tabular-nums;font-weight:600;font-size:.92rem}

/* Vitrina y club */
.stock-grupo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.stock-grupo>b{width:100%;font-size:.9rem}
.stock{padding:4px 10px;border-radius:99px;background:#eef6ef;font-size:.85rem}
.stock b{margin-left:4px}
.stock.poco{background:#fdf1d8}.stock.cero{background:#fbe4e4;color:#7c1d1d}
.opinion p{margin:4px 0}
.estrellas{color:var(--acento);letter-spacing:2px;margin-right:8px}.estrellas i{font-style:normal;color:#e3d8c6}

/* Ventas por hora */
.grafico{display:grid;grid-template-columns:repeat(15,1fr);gap:6px;align-items:end;height:190px;padding-top:6px}
.g-col{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center}
.g-col small{font-size:.72rem;color:var(--suave);padding-top:4px}
.g-zona{position:relative;display:flex;align-items:flex-end;justify-content:center;background:#f7f1e7;border-radius:8px}
.g-barra{display:block;width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#e0ad55,#cf9332);min-height:2px}
.g-media{position:absolute;left:-2px;right:-2px;height:0;border-top:2px dashed #3b2f26aa}
.g-col.ahora small{color:var(--tinta);font-weight:700}
.g-col.ahora .g-zona{outline:2px solid #cf933255}
.leyenda{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--suave);margin:10px 0 0}
.ley-hoy,.ley-media{display:inline-block;width:14px;height:8px;border-radius:3px;background:var(--acento)}
.ley-media{background:none;border-top:2px dashed #3b2f26aa;height:0;margin-left:10px}

/* Entrar */
.entrar-app{text-align:center;padding-top:12vh}
.entrar-app .entrar-logo{width:72px;height:72px;border-radius:18px;object-fit:contain;background:#ffffff10;padding:6px}
.entrar-app h1{font-size:2rem}
.entrar-app .caja{text-align:left;margin-top:22px}

/* Móvil (va al final para que mande sobre lo de arriba) */
@media (max-width:900px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px}
  .kpi>b{font-size:1.6rem}
  .kpi.destacado{grid-column:1/-1}
  .kpi-pie{font-size:.78rem}
  .saludo h1{font-size:1.7rem}.reloj{font-size:1.5rem}
  .rejilla{grid-template-columns:1fr}
  .tarjeta{padding:16px}
  .grafico{gap:3px;height:150px}
}

/* Listas: resumen en tarjetas */
.ls-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ls-tarjeta{display:grid;gap:10px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--borde);text-decoration:none;box-shadow:0 1px 2px #0000000a,0 10px 30px -18px #3b2f2640;transition:transform .15s}
.ls-tarjeta:hover{transform:translateY(-2px)}
.ls-tarjeta.apagada{opacity:.6}
.ls-arriba{display:flex;justify-content:space-between;gap:10px;align-items:start}
.ls-arriba b{font:600 1.1rem/1.25 Fraunces,Georgia,serif}
.ls-estado{font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:99px;background:#eee6da;color:var(--suave);white-space:nowrap}
.ls-estado.on{background:#e3f4e6;color:var(--verde)}
.ls-zona{font-size:.85rem;color:var(--ambar);font-weight:600}
.ls-gente{display:flex;align-items:center;gap:4px;font-size:.85rem;color:var(--suave)}
.ls-gente>span:last-child{margin-left:6px}
.ls-avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2a1f17;color:#f1d9ab;font:600 .7rem Inter,sans-serif;font-style:normal}
.ls-datos{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.84rem;color:var(--suave)}
.ls-pie{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--borde);font-size:.85rem}

/* Listas: editor */
.volver{margin:0 0 10px}.volver a{color:var(--ambar);text-decoration:none;font-weight:600}
.ls-form{display:grid;gap:16px;max-width:820px}
.ls-titulo{display:flex;gap:14px;align-items:center}
.ls-nombre{font:600 1.6rem/1.2 Fraunces,Georgia,serif;border:0;border-bottom:2px solid var(--borde);border-radius:0;background:none;padding:6px 2px}
.ls-nombre:focus{outline:0;border-bottom-color:var(--acento)}
.ls-seccion{display:grid;gap:12px}
.ls-seccion h2{margin:0}
.ayuda{margin:0;font-size:.85rem;color:var(--suave)}
.ls-sub{margin:4px 0 0;font-weight:600;font-size:.9rem}
.segmentado{display:inline-flex;flex-wrap:wrap;background:#f3ece0;border-radius:12px;padding:4px;gap:4px;justify-self:start}
.segmentado label{display:block;font-weight:500}
.segmentado input{position:absolute;opacity:0;pointer-events:none}
.segmentado span{display:block;padding:8px 14px;border-radius:9px;cursor:pointer;font-size:.92rem}
.segmentado input:checked+span{background:#fff;box-shadow:0 1px 3px #0002;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-opcion{display:inline-flex;align-items:center;gap:6px;font-weight:500;cursor:pointer}
.chip-opcion input{position:absolute;opacity:0;pointer-events:none}
.chip-opcion span{padding:7px 13px;border-radius:99px;border:1px solid var(--borde);background:#fff;font-size:.9rem;transition:all .12s}
.chip-opcion input:checked+span{background:#2a1f17;border-color:#2a1f17;color:#fff}
.chip-opcion .ls-avatar{width:24px;height:24px;margin-right:-34px;position:relative;z-index:1;margin-left:4px}
.chip-opcion .ls-avatar+input+span{padding-left:34px}
.chips.dias .chip-opcion span{width:40px;text-align:center;padding:7px 0}
.chips.pequenos .chip-opcion span{width:30px;padding:4px 0;font-size:.8rem}
.ls-cuando{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.con-unidad{position:relative;display:block}.con-unidad i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--suave);font-weight:400}
.interruptor{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;white-space:nowrap}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor span{width:42px;height:24px;border-radius:99px;background:#d9cfc0;position:relative;transition:background .15s;flex:0 0 auto}
.interruptor span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s}
.interruptor input:checked+span{background:var(--verde)}
.interruptor input:checked+span::after{transform:translateX(18px)}
.interruptor.pequeno span{width:36px;height:20px}.interruptor.pequeno span::after{width:14px;height:14px}.interruptor.pequeno input:checked+span::after{transform:translateX(16px)}
.editor-tareas{display:grid;gap:6px}
.et-fila{border:1px solid var(--borde);border-radius:12px;padding:6px 8px;background:#fffdf9}
.et-linea{display:flex;align-items:center;gap:8px}
.et-texto{border:0;background:none;padding:8px 4px;flex:1;min-width:0}
.et-texto:focus{outline:0}
.et-fila:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px #cf933222}
.et-mas{border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--suave);padding:2px 6px;border-radius:8px}
.et-mas.activo{color:var(--ambar)}
.et-mover{display:flex;gap:2px}
.et-mover button{border:0;background:none;cursor:pointer;color:#b3a593;padding:4px 6px;border-radius:6px;font-size:.9rem}
.et-mover button:hover{background:#f3ece0;color:var(--tinta)}
.et-mover .et-quitar:hover{color:var(--rojo)}
.et-extra{display:grid;gap:8px;padding:6px 4px 8px}
.et-bloque{display:flex;align-items:center;gap:8px;margin-top:10px}
.et-bloque input{font:600 1rem Fraunces,Georgia,serif;border:0;border-bottom:1px dashed #cdbfa9;border-radius:0;background:none;padding:6px 2px;text-transform:none}
.ls-anadir{display:flex;gap:8px}
.ls-guardar{display:flex;gap:10px;position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,#f6f0e6 30%)}
.ls-borrar{margin-top:18px}
@media (max-width:600px){.et-mover button[data-subir],.et-mover button[data-bajar]{display:none}.ls-titulo{flex-wrap:wrap}}

/* Ficha de una persona */
.ficha-cabeza{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.ficha-cabeza h1{margin:0}.ficha-cabeza p{margin:4px 0 0}
.ficha-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 72px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--acento)}
.ficha-foto.sin{display:grid;place-items:center;background:#2a1f17;color:#f1d9ab;font:600 1.4rem Fraunces,Georgia,serif}
.mes-nav{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.tabla-ficha{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla-ficha th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);padding:6px 8px;border-bottom:1px solid var(--borde)}
.tabla-ficha td{padding:9px 8px;border-bottom:1px solid #f0e9dd}
.ver-ficha{font-weight:600;color:var(--ambar);text-decoration:none;white-space:nowrap}

/* Horas y costes */
.h-mes{display:flex;gap:8px;align-items:center}.h-mes select{width:auto}
.tabla-horas{width:100%;border-collapse:collapse;font-size:.93rem}
.tabla-horas th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);padding:8px;border-bottom:1px solid var(--borde);white-space:nowrap}
.tabla-horas td{padding:10px 8px;border-bottom:1px solid #f0e9dd;vertical-align:middle}
.tabla-horas tfoot td{border-top:2px solid var(--borde);border-bottom:0}
.h-persona{display:flex;align-items:center;gap:10px;min-width:220px}
.h-persona>span{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.h-persona .chip{font-size:.7rem}
.h-nomina b{display:block}.h-nomina small{color:var(--suave);font-size:.78rem;white-space:nowrap}
.h-mas{color:#b5541c}.h-menos{color:var(--rojo)}.h-ok{color:var(--verde);font-weight:600}
th.h-efectivo,td.h-efectivo{text-align:right;white-space:nowrap}
td.h-efectivo{font:600 1.15rem Fraunces,Georgia,serif;color:#2a1f17;background:#fbf3e4}
.enlace-editar{border:0;background:none;color:var(--ambar);font:600 .82rem Inter,sans-serif;cursor:pointer;padding:2px 4px;margin-left:auto}
.en-linea{display:inline;margin-left:auto}
.consejos{margin-top:16px}.consejos h2{margin-bottom:10px}
.consejo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#faf6ef}
.consejo p{margin:0}.consejo.mover{background:#eef4fb}.consejo.contrato{background:#f4effb}.consejo.aviso{background:#fdf1d8}.consejo.bien{background:#e9f6ec}
.av.pequeno{width:30px;height:30px;font-size:.7rem}

/* Personas */
.eq-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.eq-tarjeta{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--borde);transition:box-shadow .2s,opacity .2s}
.eq-tarjeta.apagada{opacity:.55}
.eq-tarjeta.guardado{box-shadow:0 0 0 3px #2f8a4c55}
.eq-tarjeta.guardando{opacity:.7}
.eq-datos{display:grid;gap:4px;min-width:0}
.eq-nombre{font:600 1.05rem Fraunces,Georgia,serif;border:0;padding:2px 0;background:none}
.eq-movil{display:flex;align-items:center;gap:6px;font-weight:400}
.eq-movil input{border:0;border-bottom:1px dashed #d9cfc0;border-radius:0;padding:2px 0;background:none;font-size:.92rem}
.eq-nombre:focus,.eq-movil input:focus{outline:0;border-bottom:1px solid var(--acento)}
.eq-pin{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.eq-tarjeta .interruptor{flex-direction:column;gap:4px;font-size:.75rem}
/* Lo de pagar en efectivo siempre a la vista, también en el móvil */
.tabla-horas th.h-efectivo,.tabla-horas td.h-efectivo{position:sticky;right:0;z-index:1;box-shadow:-6px 0 8px -6px #0002}
.tabla-horas th.h-efectivo{background:#fbf3e4;color:#2a1f17}