/* Tablero de Solicitudes de Servicio — Alimentos SLM.
   Colores y tipografía tomados del diseño de Claude Design (guía de estilo, D69). */
:root {
  --marino: #063D6B; --marino-2: #0A4F87; --azul: #1D71B8; --verde: #9CCC65;
  --tinta: #12212E; --gris: #5A6B7A; --gris-2: #8A98A5; --linea: #E2E8EE; --linea-2: #EDF1F5;
  --fondo: #F4F6F9; --suave: #F6F9FB; --azul-suave: #E8F1F9; --azul-borde: #B9D5EC;
  --v: #1B7F4B; --v-bg: #E6F2EA; --v-b: #B7DCC5;
  --a: #9A5B00; --a-bg: #FBF1DF; --a-b: #EBD3A8;
  --r: #C0392B; --r-bg: #FBE9E7; --r-b: #EFC3BC;
  --n: #5A6B7A; --n-bg: #F1F4F7; --n-b: #DCE3EA;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fondo); }
body { font-family: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--tinta);
  -webkit-font-smoothing: antialiased; font-size: 16px; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--marino); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); }
.oculto { display: none !important; }
.gris { color: var(--gris); } .gris2 { color: var(--gris-2); }
.chico { font-size: 14px; } .mini { font-size: 13px; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.acceso-caja { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  padding: clamp(28px, 4vw, 52px); box-shadow: 0 2px 18px rgba(6, 61, 107, .07); }
.acceso-caja img { width: 104px; height: 104px; display: block; margin-bottom: 28px; }
.antetitulo { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); font-weight: 600; }
.acceso-caja h1 { margin: 10px 0 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--marino); }
label.campo { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; }
input.campo, select.campo, textarea.campo { width: 100%; height: 50px; border: 1px solid #C7D2DC; border-radius: 8px;
  padding: 0 14px; font-size: 17px; background: #fff; margin-bottom: 18px; }
textarea.campo { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.btn { border: 0; border-radius: 8px; background: var(--marino); color: #fff; font-size: 16px; font-weight: 600;
  padding: 12px 18px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; }
.btn:hover { background: var(--marino-2); color: #fff; text-decoration: none; }
.btn.azul { background: var(--azul); } .btn.azul:hover { background: var(--marino); }
.btn.claro { background: var(--azul-suave); border: 1px solid var(--azul-borde); color: var(--marino); }
.btn.claro:hover { background: #D8E8F5; }
.btn.blanco { background: #fff; border: 1px solid #C7D2DC; color: var(--marino); }
.btn.blanco:hover { background: #F4F7FA; }
.btn.rojo { background: var(--r-bg); border: 1px solid var(--r-b); color: var(--r); }
.btn.ancho { width: 100%; height: 54px; font-size: 18px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.enlace { background: none; border: 0; color: var(--azul); font-weight: 600; padding: 0; text-decoration: underline; }
.aviso { border-radius: 10px; padding: 14px 18px; font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.aviso.a { background: #FFF8E7; border: 1px solid var(--a-b); color: #7A5B12; }
.aviso.r { background: var(--r-bg); border: 1px solid var(--r-b); color: #7A2F25; }
.aviso.v { background: var(--v-bg); border: 1px solid var(--v-b); color: var(--v); }
.aviso.n { background: var(--n-bg); border: 1px solid var(--n-b); color: var(--gris); font-weight: 400; }

/* ---------- armazón ---------- */
.app { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; }
nav.menu { flex: 1 1 250px; max-width: 100%; background: var(--marino); padding: 24px 18px 28px; display: flex;
  flex-direction: column; gap: 20px; }
@media (min-width: 900px) { nav.menu { flex: 0 0 270px; position: sticky; top: 0; height: 100vh; overflow: auto; } }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 52px; height: 52px; background: #fff; border-radius: 50%; padding: 3px; }
.marca b { color: #fff; font-size: 16px; display: block; line-height: 1.15; }
.marca span { color: var(--verde); font-size: 13px; font-weight: 600; }
.menu-items { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-item { flex: 1 1 170px; text-align: left; border: 0; border-radius: 8px; padding: 11px 14px; color: #E6EEF5;
  background: rgba(255, 255, 255, .06); }
.menu-item b { display: block; font-size: 16px; } .menu-item span { display: block; font-size: 13px; opacity: .72; margin-top: 2px; }
.menu-item.on { background: #fff; color: var(--marino); }
.menu-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 16px; color: #9FB8CE; font-size: 13px; }
.menu-pie b { color: #fff; font-size: 15px; }
.menu-pie select { width: 100%; border-radius: 6px; border: 0; padding: 7px; font-size: 14px; color: var(--tinta); }
.btn-salir { align-self: flex-start; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  font-size: 14px; padding: 8px 14px; border-radius: 6px; }
.prueba { background: #FFF3C4; color: #6B4E00; border-radius: 6px; padding: 8px; font-size: 13px; }
main.cuerpo { flex: 999 1 560px; min-width: 0; padding: clamp(18px, 2.2vw, 36px) clamp(16px, 2.4vw, 44px) 60px; }
header.cabeza { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
header.cabeza h1 { margin: 4px 0 0; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.08; color: var(--marino); }
.actualizado { text-align: right; font-size: 14px; color: var(--gris); }
.actualizado.viejo { color: var(--r); font-weight: 600; }

/* ---------- barras de filtros ---------- */
.barra { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.barra .grupo > div:first-child { font-size: 13px; color: var(--gris); font-weight: 600; margin-bottom: 5px; }
.pildoras { display: flex; flex-wrap: wrap; gap: 6px; }
.pildora { white-space: nowrap; line-height: 1.2; border: 1px solid #C7D2DC; background: #fff; color: var(--tinta);
  font-size: 14px; font-weight: 600; padding: 8px 13px; border-radius: 7px; }
.pildora.on { border-color: var(--marino); background: var(--marino); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 8px; background: var(--azul-suave); border: 1px solid var(--azul-borde);
  color: var(--marino); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 20px; }
.chip-filtro b { font-size: 17px; line-height: 1; }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--linea); margin-bottom: 20px; }
.pestana { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 11px 16px;
  font-size: 17px; font-weight: 600; color: var(--gris); }
.pestana.on { border-bottom-color: var(--azul); color: var(--marino); font-weight: 700; }
.conmutador { display: inline-flex; gap: 6px; background: #E8EDF2; border-radius: 8px; padding: 4px; }
.conmutador button { border: 0; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; background: transparent; color: var(--marino); }
.conmutador button.on { background: #fff; }

/* ---------- semáforos (A16: ícono + palabra, nunca solo color) ---------- */
.sem { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 9px;
  border-radius: 6px; white-space: nowrap; border: 1px solid; }
.sem.v { color: var(--v); background: var(--v-bg); border-color: var(--v-b); }
.sem.a { color: var(--a); background: var(--a-bg); border-color: var(--a-b); }
.sem.r { color: var(--r); background: var(--r-bg); border-color: var(--r-b); }
.sem.n { color: var(--n); background: var(--n-bg); border-color: var(--n-b); }

/* ---------- tarjetas y gráficos ---------- */
.rejilla { display: grid; gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.rejilla.g { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.rejilla.m { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.kpi { text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 18px; display: block; width: 100%; }
.kpi.clic:hover { border-color: var(--azul); }
.kpi.on { border: 2px solid var(--azul); padding: 17px; }
.kpi .kt { display: block; font-size: 15px; font-weight: 600; color: var(--gris); min-height: 38px; }
.kpi .kv { display: block; font-size: clamp(32px, 3vw, 46px); font-weight: 700; line-height: 1; margin: 8px 0 6px; }
.kpi .kv.sd { font-size: 24px; color: var(--gris-2); }
.kpi .kb { display: block; font-size: 14px; color: var(--gris-2); margin-bottom: 10px; }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 20px; margin-bottom: 16px; min-width: 0; }
.caja.punteada { border-style: dashed; border-color: #C7D2DC; }
.caja h2 { margin: 0; font-size: 19px; color: var(--marino); }
.caja h3 { margin: 0 0 10px; font-size: 17px; color: var(--marino); }
.caja .base { font-size: 14px; color: var(--gris-2); margin: 4px 0 14px; }
.caja .pie { font-size: 13px; color: var(--gris-2); margin-top: 10px; }
.cabeza-caja { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: baseline; }
.fila-barra { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 6px; border-radius: 6px; }
.fila-barra:hover, .fila-barra.on { background: #F2F7FC; }
.fila-barra .enc { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.fila-barra .enc span:first-child { font-size: 15px; font-weight: 600; }
.fila-barra .enc span:last-child { font-size: 19px; font-weight: 700; }
.pista { display: block; height: 16px; background: var(--linea-2); border-radius: 4px; overflow: hidden; }
.pista > span { display: block; height: 100%; background: var(--azul); }
.pista.apilada { display: flex; height: 20px; }
.fila-barra .nota { display: block; font-size: 13px; color: var(--gris-2); margin-top: 4px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gris); }
.punto { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dona-caja { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.dona { position: relative; width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto; }
.dona > div { position: absolute; inset: 26px; background: #fff; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.dona b { font-size: 26px; line-height: 1; } .dona small { font-size: 12px; color: var(--gris-2); }
.columnas-g { display: flex; align-items: flex-end; gap: 10px; height: 170px; border-bottom: 1px solid var(--linea); padding-bottom: 4px; }
.col-g { flex: 1 1 0; min-width: 0; display: flex; gap: 3px; align-items: flex-end; height: 100%; background: none; border: 0; padding: 0; }
.col-g > span { flex: 1 1 0; border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.col-g > span i { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; }
.etq-g { display: flex; gap: 10px; margin-top: 6px; } .etq-g span { flex: 1 1 0; font-size: 12px; color: var(--gris); text-align: center; min-width: 0; }

/* ---------- tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { text-align: left; font-size: 13px; color: var(--gris); font-weight: 600; border-bottom: 2px solid var(--linea); padding: 8px 8px; white-space: nowrap; }
.tabla td { border-bottom: 1px solid var(--linea-2); padding: 11px 8px; vertical-align: top; }
.tabla td.n, .tabla th.n { text-align: right; }
.tabla tr.clic { cursor: pointer; } .tabla tr.clic:hover td { background: #F7FAFD; }
.tabla tr.on td { background: #F2F7FC; }
.tabla .rojo { color: var(--r); font-weight: 700; }
.desliza { overflow-x: auto; }

/* ---------- tablero por etapas (sin arrastrar, A11) ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kcol { flex: 0 0 250px; background: #EEF2F6; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.kcol.cerrada { opacity: .9; }
.kcab { background: #fff; border-radius: 8px; padding: 11px; }
.kcab b { display: block; font-size: 15px; color: var(--marino); line-height: 1.25; }
.kcab div { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; } .kcab div span:first-child { font-size: 24px; font-weight: 700; }
.tarjeta { text-align: left; background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--azul); border-radius: 8px; padding: 11px; display: block; width: 100%; }
.tarjeta.r { border-color: var(--r-b); border-left-color: var(--r); }
.tarjeta:hover { box-shadow: 0 2px 10px rgba(6, 61, 107, .12); }
.tarjeta .folio { display: block; font-family: var(--mono); font-size: 13px; color: var(--marino); }
.tarjeta .cli { display: block; font-size: 15px; font-weight: 600; margin: 4px 0 8px; line-height: 1.25; }
.tarjeta .pie-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarjeta .pie-t b { font-size: 17px; }
.vacio { font-size: 14px; color: var(--gris-2); padding: 12px 6px; }

/* ---------- lista de SS ---------- */
.lista-ss { display: block; }
.renglon { display: grid; grid-template-columns: minmax(170px, 1.4fr) minmax(120px, 1fr) minmax(140px, 1.2fr) auto; gap: 6px 14px;
  align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea-2);
  border-left: 4px solid transparent; padding: 12px 10px; }
.renglon:hover { background: #F7FAFD; }
.renglon.r { border-left-color: var(--r); }
.renglon .folio { display: block; font-family: var(--mono); font-size: 14px; color: var(--marino); }
.renglon .der { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .renglon { grid-template-columns: 1fr auto; } .renglon .ocultar-movil { display: none; } }
.separador { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); font-weight: 700; padding: 14px 10px 6px; }

/* ---------- ficha lateral y ventanas ---------- */
.velo { position: fixed; inset: 0; background: rgba(6, 32, 54, .42); z-index: 50; display: flex; justify-content: flex-end; }
.panel { width: min(580px, 100%); height: 100%; overflow: auto; background: #fff; padding: 24px 24px 60px; box-shadow: -8px 0 30px rgba(6, 32, 54, .2); }
.cerrar { background: var(--n-bg); border: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 20px; color: var(--gris); flex: 0 0 auto; }
.bloque { border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.bloque-t { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); margin-bottom: 10px; }
.dato { display: flex; flex-wrap: wrap; gap: 2px 14px; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #F1F4F7; }
.dato span:first-child { font-size: 14px; color: var(--gris); } .dato span:last-child { font-size: 15px; font-weight: 600; text-align: right; }
.toca { background: #F2F7FC; border: 1px solid #CBDDEC; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.toca .btn { width: 100%; margin-bottom: 8px; }
.linea { display: flex; gap: 14px; padding-bottom: 14px; }
.linea .eje { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.linea .eje i { width: 14px; height: 14px; border-radius: 50%; background: var(--azul); display: block; }
.linea .eje i.actual { background: var(--r); } .linea .eje i.det { background: var(--r); }
.linea .eje u { flex: 1 1 auto; width: 2px; background: var(--linea); margin-top: 4px; }
.modal { position: fixed; inset: 0; background: rgba(6, 32, 54, .5); z-index: 60; display: flex; align-items: flex-start;
  justify-content: center; padding: 24px 16px; overflow: auto; }
.modal-caja { width: min(700px, 100%); background: #fff; border-radius: 12px; padding: 24px; margin: auto 0; }
.modal-caja h2 { margin: 0; font-size: 22px; color: var(--marino); }
.qr-img { width: min(360px, 80vw); display: block; margin: 16px auto; }
.cargando { padding: 40px; text-align: center; color: var(--gris-2); }
.pie-pagina { margin: 36px 0 0; font-size: 13px; color: var(--gris-2); border-top: 1px solid var(--linea); padding-top: 14px; }
.buscador { width: 100%; max-width: 520px; height: 48px; border: 1px solid #C7D2DC; border-radius: 8px; padding: 0 16px; font-size: 17px; background: #fff; }
.en-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.en-linea > .buscador { flex: 1 1 200px; width: auto; }
.entre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.formula { font-family: var(--mono); font-size: 13px; color: var(--gris); background: #F8FAFC; border-radius: 6px; padding: 10px; line-height: 1.5; }
.num-grande { font-size: 30px; font-weight: 700; margin: 10px 0 8px; }
.num-grande.sd { color: var(--gris-2); font-size: 24px; }

@media print { nav.menu, .barra, .chips { display: none; } }

/* ---------- I. Programar ruta ---------- */
.mapa { height: 440px; border-radius: 8px; border: 1px solid var(--linea); margin: 12px 0; background: var(--suave); z-index: 0; }
.leyenda .punto.cuadro { border-radius: 3px; background: var(--verde); }
.propuesta { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.prop { border: 1px solid var(--linea); border-left: 4px solid var(--verde); border-radius: 8px; padding: 12px; min-width: 0; }
.prop-cli { font-weight: 700; margin: 4px 0 2px; overflow-wrap: anywhere; }
.etqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.etq { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--n-b); background: var(--n-bg); color: var(--n); }
.etq.v { color: var(--v); background: var(--v-bg); border-color: var(--v-b); }
.etq.a { color: var(--a); background: var(--a-bg); border-color: var(--a-b); }
.etq.r { color: var(--r); background: var(--r-bg); border-color: var(--r-b); }
.rojo-t { color: var(--r) !important; }
.grupo-ruta { background: var(--n-bg); font-weight: 700; font-size: 14px; padding: 7px 10px; border-radius: 6px; margin: 12px 0 4px; text-transform: capitalize; }
.ss-casilla { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--linea-2); padding: 9px 4px; }
.ss-casilla:hover { background: var(--suave); }
.ss-casilla[disabled] { opacity: .55; cursor: not-allowed; }
.ss-casilla-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.casilla { flex: none; width: 22px; height: 22px; border: 2px solid #C7D2DC; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; color: #fff; }
.ss-casilla.on .casilla { background: var(--marino); border-color: var(--marino); }
.ruta-armado { display: grid; gap: 24px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cupo { margin-bottom: 14px; }
.cupo .enc { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.cupo .pista { display: block; height: 14px; background: var(--linea-2); border-radius: 7px; overflow: hidden; }
.cupo .pista span { display: block; height: 100%; }
.parada { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea-2); }
.num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--marino); color: #fff; font-style: normal; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.num.cuadro { border-radius: 4px; background: var(--verde); color: var(--marino); }
.ruta-conf { border: 1px solid var(--linea); border-radius: 8px; padding: 14px; margin-top: 12px; }
.btn.chico-btn { font-size: 14px; padding: 7px 12px; white-space: nowrap; }
.pin-ruta span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marino); color: #fff; font-weight: 700; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin-salida span { display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--verde); color: var(--marino); font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* ---------- celular: el menú se abre con un botón ---------- */
.btn-menu { display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  font-size: 15px; font-weight: 600; padding: 9px 14px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 899px) {
  nav.menu { padding: 12px 16px; gap: 14px; }
  .marca img { width: 40px; height: 40px; }
  .btn-menu { display: inline-block; }
  nav.menu:not(.abierto) .menu-items, nav.menu:not(.abierto) .menu-pie { display: none; }
}