/* ════════════════════════════════════════════════════════════
   Teléfono: el portal como una app.
   El menú de doce botones pasa a una barra fija abajo con lo que se usa
   todos los días (Inicio, Agenda, Pacientes, Pedido) y "Más" para el
   resto. Las tablas pasan a tarjetas. Solo rige en pantallas angostas.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  /* Franja de demo y barra superior, en un renglón */
  .demo-cinta{font-size:11px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar{padding:8px 12px;gap:10px}
  .topbar h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .topbar .who{display:none}
  .logo-img{height:28px}

  /* Barra de navegación abajo */
  #menuRep{position:fixed !important;left:0;right:0;bottom:0;top:auto !important;z-index:60;width:auto !important;
    display:grid !important;grid-template-columns:repeat(5,1fr);gap:0 !important;padding:6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(18,35,63,.35);border-radius:0 !important;margin:0 !important}
  #menuRep .mi{flex-direction:column;justify-content:center;gap:3px !important;padding:6px 2px !important;font-size:10.5px !important;
    border-radius:10px;text-align:center;position:relative;width:auto !important;min-width:0;color:var(--muted);background:transparent}
  #menuRep .mi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #menuRep .mi svg{width:21px !important;height:21px !important;flex:0 0 auto !important}
  #menuRep .mi.on{background:#E8F5F6 !important;color:var(--teal-dark) !important}
  #menuRep .mi .nuevo{display:none}
  #menuRep .mi .insignia{position:absolute;top:2px;left:calc(50% + 4px);margin:0;min-width:17px;height:17px;font-size:10px}
  /* Fuera de la barra: todo lo que no es de todos los días va a "Más" */
  #menuRep .mi:not([data-s="inicio"]):not([data-s="agenda"]):not([data-s="pacientes"]):not([data-s="pedidos"]):not([data-mas]){display:none}
  #menuRep .mi[data-s="inicio"]{order:1} #menuRep .mi[data-s="agenda"]{order:2}
  #menuRep .mi[data-s="pacientes"]{order:3} #menuRep .mi[data-s="pedidos"]{order:4} #menuRep .mi[data-mas]{order:5}

  /* La hoja de "Más" */
  #menuRep.abierto{grid-template-columns:repeat(4,1fr);row-gap:4px !important;padding-top:12px !important;border-radius:18px 18px 0 0 !important}
  #menuRep.abierto .mi{display:flex !important}
  #menuRep.abierto::before{content:"Más secciones";grid-column:1 / -1;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:0 8px 6px}
  .velo-menu{position:fixed;inset:0;background:rgba(18,35,63,.35);z-index:59}

  .wrap.con-menu{padding:12px 12px 24px !important;gap:12px !important}

  /* Tarjetas y encabezados compactos */
  .card > h2{flex-wrap:wrap;row-gap:8px}
  .ag-nav{margin-left:0;width:100%;justify-content:space-between}
  .ag-nav > span{flex:1;text-align:center}
  .aviso-ag{flex-wrap:wrap;gap:10px;padding:12px}
  .aviso-ag > div{flex:1 1 200px}
  .aviso-ag .btn{margin-left:0;width:100%;justify-content:center}
  .kpis{grid-template-columns:1fr 1fr !important}
  .ag-acciones{gap:8px}
  .ag-acciones .btn{flex:1;justify-content:center}
  .seg{width:100%}
  .seg button{flex:1}
  .ag-fila{grid-template-columns:46px 8px minmax(0,1fr);row-gap:8px;padding:10px 8px}
  .ag-fila .a{grid-column:1 / -1;justify-content:flex-end}
  .ag-fila .a .btn{flex:1;justify-content:center}
  .ag-ficha{position:static}
  .fp{grid-template-columns:1fr 1fr}
  .fp .fp-nota,.fp .btn{grid-column:1 / -1}

  /* Tablas: se deslizan dentro de su tarjeta, no rompen la página */
  .card table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* Mis consultas: cada fila es una tarjeta */
  .tabla-c table,.tabla-c tbody,.tabla-c tr,.tabla-c td{display:block;white-space:normal}
  .tabla-c thead{display:none}
  .tabla-c tr{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 10px}
  .tabla-c td{padding:0;border:0}
  .tabla-c td:nth-child(1){grid-column:1}
  .tabla-c td:nth-child(4){grid-column:2;grid-row:1;justify-self:end}
  .tabla-c td:nth-child(2),.tabla-c td:nth-child(3){font-size:12px;color:var(--muted);grid-column:1}
  .tabla-c td:nth-child(5){grid-column:2;grid-row:2 / span 2;align-self:end;justify-self:end}
  .embudo{grid-template-columns:1fr 1fr}

  /* Pacientes */
  .pa-filtros{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;width:100%}
  .pa-filtros button{white-space:nowrap}
  .pf-cab .body{gap:12px}
  .pf-av{width:52px;height:52px;font-size:18px}
  .pf-id{flex:1 1 0}
  .pf-id h1{font-size:19px}
  .pf-acc{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pf-acc .btn{justify-content:center}
  .pf-acc .b-pri{grid-column:1 / -1}
  .pf-res{gap:8px}
  .pf-r{padding:10px 12px}
  .pf-fila{grid-template-columns:1fr}
  .pf-pie .btn{width:100%;justify-content:center}
  .pf-pl-cab .est{margin-left:0}

  /* Horarios */
  .franja input{width:auto;flex:1;min-width:0}
  .bl-nuevo{grid-template-columns:1fr 1fr}

  .toast-ag{bottom:84px;left:12px;right:12px;transform:none}
  .toast-ag.fuera{transform:translateY(10px)}
}
@media (max-width: 760px) {
  #menuRep .mi[data-s="pedidos"] span{display:none}
  #menuRep .mi[data-s="pedidos"]::after{content:"Pedido";font-size:10.5px}
}
@media (max-width: 760px) {
  /* La hoja de "Más" muestra solo lo que no está en la barra */
  #menuRep.abierto .mi[data-s="inicio"],#menuRep.abierto .mi[data-s="agenda"],
  #menuRep.abierto .mi[data-s="pacientes"],#menuRep.abierto .mi[data-s="pedidos"]{display:none !important}
  #menuRep.abierto .mi[data-mas]{color:var(--teal-dark)}
}