/* Base de diseño (se carga DESPUÉS de styles.css): colores, letra, tarjetas y tamaños de toque parejos para laptop y celular.
   Solo presentación: no cambia datos, permisos ni cálculos. Primera pantalla rediseñada: el Inicio de Administración (ver docs/TANDA4.md). */
:root {
  --ui-verde: #16895a; --ui-verde-osc: #0e6b45; --ui-verde-claro: #e3f4ec;
  --ui-carbon: #1f2933; --ui-texto: #1b2530; --ui-suave: #66707c; --ui-borde: #e3e7ec; --ui-fondo: #f4f6f8;
  --ui-rojo: #c0392b; --ui-rojo-claro: #fdeceb; --ui-ambar: #b86e00; --ui-ambar-claro: #fff1d6; --ui-azul: #2f6fd0; --ui-azul-claro: #e4eefc;
  --ui-radio: 14px; --ui-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px -8px rgba(16, 24, 40, .12);
}

/* --- Celular y pantallas táctiles: todo se puede tocar con el dedo y los campos no hacen "zoom" al escribir --- */
@media (pointer: coarse) {
  .btn-grande, .btn-secundario, .tab-categoria, .link-accion, .boton-grupo { min-height: 44px; }
  .menu-grupo-panel .tab-categoria { min-height: 46px; }
}
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }
  .gr-tabla-caja, .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Inicio de Administración --- */
.ui-enc { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.ui-enc h2 { margin: 0; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.15; letter-spacing: -.3px; color: var(--ui-texto); }
.ui-enc p { margin: 4px 0 0; color: var(--ui-suave); font-size: 15px; }
.ui-enc .ui-refrescar { flex: none; border: 1px solid var(--ui-borde); background: #fff; color: var(--ui-texto); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ui-enc .ui-refrescar:hover { background: var(--ui-verde-claro); }

.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ui-kpi { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 16px; background: #fff; border: 1px solid var(--ui-borde); border-radius: var(--ui-radio); box-shadow: var(--ui-sombra); cursor: pointer; font: inherit; color: var(--ui-texto); }
.ui-kpi:hover { border-color: var(--ui-verde); }
.ui-kpi-icono { grid-row: 1 / span 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--ui-verde-claro); }
.ui-kpi.t-ambar .ui-kpi-icono { background: var(--ui-ambar-claro); } .ui-kpi.t-azul .ui-kpi-icono { background: var(--ui-azul-claro); }
.ui-kpi-etq { font-size: 14px; color: var(--ui-suave); font-weight: 600; }
.ui-kpi-valor { white-space: nowrap; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.5px; overflow-wrap: anywhere; }
.ui-kpi-apoyo { font-size: 13px; color: var(--ui-suave); line-height: 1.3; }
.ui-kpi-apoyo .ui-sube { color: var(--ui-verde-osc); font-weight: 700; } .ui-kpi-apoyo .ui-baja { color: var(--ui-rojo); font-weight: 700; }

.ui-card { background: #fff; border: 1px solid var(--ui-borde); border-radius: var(--ui-radio); box-shadow: var(--ui-sombra); padding: 16px 18px; margin-bottom: 18px; }
.ui-card-enc { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ui-card-enc h3 { margin: 0; font-size: 20px; letter-spacing: -.2px; }
.ui-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--ui-rojo-claro); color: var(--ui-rojo); } .ui-badge.ok { background: var(--ui-verde-claro); color: var(--ui-verde-osc); }
.ui-pend { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 4px; border: 0; border-top: 1px solid var(--ui-borde); background: transparent; font: inherit; color: var(--ui-texto); cursor: pointer; min-height: 60px; }
.ui-pend:first-of-type { border-top: 0; } .ui-pend:hover { background: var(--ui-fondo); }
.ui-pend-icono { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--ui-ambar-claro); }
.ui-pend.t-alerta .ui-pend-icono { background: var(--ui-rojo-claro); } .ui-pend.t-info .ui-pend-icono { background: var(--ui-azul-claro); }
.ui-pend b { display: block; font-size: 16px; } .ui-pend small { display: block; color: var(--ui-suave); font-size: 13.5px; margin-top: 1px; }
.ui-pend-n { min-width: 34px; text-align: center; padding: 4px 10px; border-radius: 10px; font-weight: 800; background: var(--ui-ambar-claro); color: var(--ui-ambar); }
.ui-pend.t-alerta .ui-pend-n { background: var(--ui-rojo-claro); color: var(--ui-rojo); } .ui-pend.t-info .ui-pend-n { background: var(--ui-azul-claro); color: var(--ui-azul); }
.ui-pend-flecha { color: var(--ui-suave); font-size: 20px; }
div.ui-pend { cursor: default; } div.ui-pend:hover { background: transparent; }
.ui-todo-bien { padding: 14px 4px; color: var(--ui-verde-osc); font-weight: 700; }

/* Las secciones de abajo (Anclado, Recientes, Todos los indicadores, Todo) toman el mismo aire y los mismos títulos */
.ini-seccion-titulo-fijo, .ini-seccion-titulo { font-size: 18px; letter-spacing: -.2px; }
.ini-apps-rejilla { gap: 10px; }
.ini-app { border-radius: 14px; }

@media (max-width: 900px) { .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px) {
  .ui-kpi { grid-template-columns: 1fr; padding: 12px; } .ui-kpi-icono { grid-row: auto; width: 38px; height: 38px; font-size: 18px; margin-bottom: 4px; }
  .ui-enc { flex-direction: column; } .ui-pend { grid-template-columns: auto 1fr auto; } .ui-pend-flecha { display: none; }
  .ui-card { padding: 12px 12px; }
}

/* ============ Menú de Administración ============
   Laptop (≥1000 px): barra lateral gris carbón con los grupos que se abren hacia abajo.
   Celular/tablet: el menú es un cajón que sale con ☰. Mismos botones y permisos de siempre; solo cambia cómo se ven. */
.btn-menu-lateral, .fondo-menu { display: none; }

/* Pieza común: cómo se ve cada elemento del menú (barra lateral y cajón) */
.barra-superior.modo-admin #tabs-admin { background: var(--ui-carbon); }
.barra-superior.modo-admin #tabs-admin .boton-grupo, .barra-superior.modo-admin #tabs-admin .admin-inicio {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 11px 14px; border: 0; border-radius: 10px;
  background: transparent; color: #cfd8e3; font-size: 15px; font-weight: 600; box-shadow: none; cursor: pointer; border-bottom: 0;
}
.barra-superior.modo-admin #tabs-admin .boton-grupo:hover:not(.grupo-activo), .barra-superior.modo-admin #tabs-admin .admin-inicio:hover:not(.activa) { background: rgba(255, 255, 255, .08); }
.barra-superior.modo-admin #tabs-admin .boton-grupo.grupo-activo, .barra-superior.modo-admin #tabs-admin .admin-inicio.activa { background: rgba(22, 137, 90, .28); color: #fff; box-shadow: inset 3px 0 0 #3ddc97; }
.barra-superior.modo-admin #tabs-admin .menu-grupo { width: 100%; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel {
  position: static; min-width: 0; margin: 2px 0 8px 14px; padding: 4px 0 4px 8px; background: transparent; box-shadow: none; border-radius: 0; border-left: 2px solid rgba(255, 255, 255, .14); animation: none; gap: 1px; z-index: auto;
}
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button { color: #b9c4d0; padding: 9px 10px; border-radius: 8px; font-size: 14px; white-space: normal; background: transparent; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.activa { background: var(--ui-verde); color: #fff; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel .menu-seccion { color: #7f8c9a; padding: 10px 10px 3px; }
.barra-superior.modo-admin #tabs-admin .admin-buscar { width: 100%; height: 44px; border-radius: 10px; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #cfd8e3; text-align: left; padding: 0 14px; font-size: 15px; }
.barra-superior.modo-admin #tabs-admin .admin-buscar::after { content: "  Buscar pantalla…"; font-weight: 500; }

/* --- Laptop: barra lateral fija --- */
@media (min-width: 1000px) {
  .barra-superior.modo-admin { padding-left: 270px; min-height: 60px; }
  .barra-superior.modo-admin .leosoft-logo-header { display: none; }
  .barra-superior.modo-admin #tabs-admin {
    position: fixed; left: 0; top: 0; bottom: 0; width: 256px; z-index: 40; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 76px 10px 16px; overflow-y: auto; overflow-x: hidden; order: 0; border-right: 1px solid rgba(255, 255, 255, .06); box-shadow: 2px 0 12px rgba(0, 0, 0, .18);
  }
  .barra-superior.modo-admin #tabs-admin::before { content: "Leosoft"; position: absolute; top: 14px; left: 16px; right: 14px; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.4px; }
  .barra-superior.modo-admin #tabs-admin::before { text-transform: none; } .barra-superior.modo-admin #tabs-admin::first-letter { color: inherit; }
  .barra-superior.modo-admin #tabs-admin.oculto { display: none; }
  body:has(.barra-superior.modo-admin) #vista-admin { margin-left: 256px; }
  /* ☰ en laptop: oculta o muestra la barra lateral para dar todo el ancho al trabajo */
  .barra-superior.modo-admin .btn-menu-lateral { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; cursor: pointer; }
  .barra-superior.modo-admin .btn-menu-lateral:hover { background: rgba(255, 255, 255, .16); }
  .barra-superior.modo-admin #tabs-admin { transition: transform .2s ease; }
  body.menu-oculto .barra-superior.modo-admin { padding-left: 16px; }
  body.menu-oculto .barra-superior.modo-admin #tabs-admin { transform: translateX(-105%); box-shadow: none; }
  body.menu-oculto:has(.barra-superior.modo-admin) #vista-admin { margin-left: 0; }
}

/* --- Celular y tablet: cajón con ☰ --- */
@media (max-width: 999px) {
  .barra-superior.modo-admin .btn-menu-lateral { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; cursor: pointer; }
  .barra-superior.modo-admin { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; min-height: 60px; }
  .barra-superior.modo-admin .leosoft-logo-header, .barra-superior.modo-admin h1, #btn-ayuda, #btn-tablero, #estado-nube { display: none !important; }
  .barra-superior.modo-admin .titulo-seccion { display: block; flex: 1 1 0; min-width: 0; background: transparent; padding: 0; font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-superior.modo-admin .titulo-seccion:empty { display: block; flex: 1 1 0; } .barra-superior.modo-admin .titulo-seccion:empty::before { content: "Inicio"; }
  .barra-superior.modo-admin .selector-negocio { flex: none; max-width: 120px; }
  .barra-superior.modo-admin .selector-negocio .btn-etiqueta { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-superior.modo-admin .barra-usuario { padding: 3px; } .barra-superior.modo-admin #usuario-actual { display: none; }
  .barra-superior.modo-admin #tabs-admin {
    position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: min(86vw, 330px); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 16px 12px 24px; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; box-shadow: none; order: 0;
  }
  .barra-superior.modo-admin #tabs-admin.oculto { display: none; }
  body.menu-abierto .barra-superior.modo-admin #tabs-admin { transform: translateX(0); box-shadow: 8px 0 30px rgba(0, 0, 0, .45); }
  body.menu-abierto .fondo-menu { display: block; position: fixed; inset: 0; z-index: 4; background: rgba(8, 12, 18, .55); }
  .barra-superior.modo-admin #tabs-admin .boton-grupo, .barra-superior.modo-admin #tabs-admin .admin-inicio { min-height: 48px; font-size: 16px; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo-panel button { min-height: 44px; font-size: 15px; }
}
@media (max-width: 700px) { .ui-enc .ui-refrescar { align-self: flex-start; } }

/* Las cifras se acomodan según el espacio de su columna (con la barra lateral y Mensajes a un lado, en laptop chica quedan en 2 × 2) */
.ini-izq { container-type: inline-size; }
@container (max-width: 760px) { .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 420px) { .ui-kpi { grid-template-columns: 1fr; } .ui-kpi-icono { grid-row: auto; margin-bottom: 4px; } }
@media (min-width: 1000px) and (max-width: 1500px) { .ini-pagina { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; } }

/* --- Las sub-pestañas y las pantallas hermanas viven en el menú (barra lateral en laptop, cajón en celular) y se quitan de la pantalla --- */
@media (max-width: 999px) { #admin-fijo > [id^="subtabs-"], #admin-fijo > #familia-pantallas { display: none !important; } }
/* En laptop las sub-pestañas se ven en la pantalla (arriba, como siempre) además de en la barra lateral: así no hay que buscarlas. */
/* el menú ya no esconde las pantallas hermanas (Compras operativas, Categorías del menú…): aquí salen todas */
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.en-familia:not([data-tab-admin="gastos-programados"]) { display: block; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.familia-activa { background: transparent; color: #b9c4d0; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.familia-activa.activa { background: var(--ui-verde); color: #fff; }
.sub-lateral { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 12px; padding-left: 8px; border-left: 2px solid rgba(61, 220, 151, .5); }
.sub-lateral-item { text-align: left; border: 0; background: transparent; color: #aab6c3; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.sub-lateral-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sub-lateral-item.activa { background: rgba(61, 220, 151, .18); color: #fff; font-weight: 700; }
@media (max-width: 999px) { .sub-lateral-item { min-height: 44px; font-size: 15px; } }

/* Botón "+ Registrar": un solo lugar para anotar dinero (solo en Administración). */
.btn-registrar { display: none; }
.barra-superior.modo-admin .btn-registrar { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px; border: 0; background: #1f8f5f; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.barra-superior.modo-admin .btn-registrar:hover { background: #17724b; }
.barra-superior.modo-admin .btn-registrar.oculto { display: none; }
.registrar-opcion { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; margin: 8px 0; padding: 14px 16px; border: 1px solid #d9dee5; border-radius: 12px; background: #fff; color: #1f2933; font-size: 16px; cursor: pointer; }
.registrar-opcion:hover { border-color: #1f8f5f; background: #f3faf6; }
.registrar-opcion small { display: block; color: #6b7785; font-size: 13px; font-weight: 400; margin-top: 2px; }
.registrar-opcion .ico { font-size: 24px; width: 32px; text-align: center; }
/* En el celular la barra de arriba va justa: el botón queda como un "+" redondo (su nombre sigue en aria-label y en el título). */
@media (max-width: 480px) {
  .barra-superior.modo-admin .btn-registrar { font-size: 0; width: 38px; padding: 0; justify-content: center; }
  .barra-superior.modo-admin .btn-registrar::before { content: "+"; font-size: 26px; font-weight: 500; line-height: 1; }
}

/* ============ Rediseño del Inicio (maqueta del dueño): íconos de una sola familia, jornada, pendientes y accesos ============ */
.ico { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.ini-pagina2 { display: block; max-width: 1500px; }
.ui-enc { align-items: flex-end; margin: 2px 0 18px; }
.ui-enc h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.ui-enc p { margin: 2px 0 0; font-size: 15px; }
.ui-enc .ui-enc-sub { font-size: 13px; color: #8a94a1; }
.ui-enc-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ini-jornada { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #fff; border: 1px solid var(--ui-borde); border-radius: 12px; box-shadow: var(--ui-sombra); color: var(--ui-texto); }
.ini-jornada .ico { width: 24px; height: 24px; color: var(--ui-suave); }
.ini-jornada small { display: block; color: var(--ui-suave); font-size: 12px; line-height: 1.1; } .ini-jornada b { font-size: 16px; line-height: 1.25; }
.ui-enc .ui-refrescar { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; }
.ui-enc .ui-refrescar .ico { width: 17px; height: 17px; }
.ui-kpi-icono { color: var(--ui-verde-osc); } .ui-kpi-icono .ico { width: 22px; height: 22px; }
.ui-kpi.t-ambar .ui-kpi-icono { color: var(--ui-ambar); } .ui-kpi.t-azul .ui-kpi-icono { color: var(--ui-azul); }
.ui-kpi { padding: 18px; }
.ui-kpi-valor { font-size: clamp(24px, 2.4vw, 34px); }
.ini-fila2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.ini-fila2 .ui-atencion { margin-bottom: 0; }
.ini-msg { min-width: 0; } .ini-msg .msg-panel { max-height: 420px; background: #fff; border: 1px solid var(--ui-borde); border-radius: var(--ui-radio); box-shadow: var(--ui-sombra); }
.ui-pend-icono { color: var(--ui-ambar); } .ui-pend.t-alerta .ui-pend-icono { color: var(--ui-rojo); } .ui-pend.t-info .ui-pend-icono { color: var(--ui-azul); }
.ui-pend-icono .ico { width: 21px; height: 21px; }
.ui-pend-flecha { display: flex; color: var(--ui-suave); } .ui-pend-flecha .ico { width: 18px; height: 18px; }
.ui-pend { padding: 14px 4px; } .ui-pend b { font-size: 16px; } .ui-pend small { margin-top: 1px; }
.ini-accesos { margin-bottom: 18px; } .ini-accesos .ui-card-enc { align-items: baseline; margin-bottom: 10px; } .ini-accesos .ui-card-enc small { color: var(--ui-suave); font-size: 13px; }
.ini-accesos-fila { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.ini-accesos .ini-app { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 34px 12px 12px; border-radius: 12px; background: #fff; }
.ini-accesos .ini-app-icono { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.ini-accesos .ini-app-nombre { font-size: 14px; }
.ini-app-icono { color: var(--ui-verde-osc); background: var(--ui-verde-claro); } .ini-app-icono .ico { width: 22px; height: 22px; }
.ini-categoria h4 { display: flex; align-items: center; gap: 8px; } .ini-categoria h4 .ico { width: 18px; height: 18px; color: var(--ui-verde-osc); }
.ini-buscador { display: flex; align-items: center; } .ini-buscador .ico { color: var(--ui-suave); width: 19px; height: 19px; }
@media (max-width: 1100px) { .ini-fila2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .ui-enc { flex-direction: column; align-items: stretch; } .ui-enc-der { justify-content: space-between; }
  .ini-jornada { flex: 1; } .ini-accesos-fila { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============ Menú lateral: íconos, un grupo abierto a la vez y modo compacto (maqueta del dueño) ============ */
#tabs-admin .boton-grupo, #tabs-admin .admin-inicio, .barra-superior.modo-admin #tabs-admin .boton-grupo, .barra-superior.modo-admin #tabs-admin .admin-inicio { gap: 12px; justify-content: flex-start; font-size: 15.5px; }
#tabs-admin .boton-grupo::before, #tabs-admin .admin-inicio::before, #tabs-admin .admin-buscar::before {
  content: ""; flex: none; width: 21px; height: 21px; background-color: currentColor;
  -webkit-mask: var(--ico, none) center / contain no-repeat; mask: var(--ico, none) center / contain no-repeat;
}
#tabs-admin .boton-grupo::after { content: ""; margin-left: auto; flex: none; width: 17px; height: 17px; background-color: currentColor; opacity: .7; transition: transform .18s;
  -webkit-mask: var(--ico-chevron, none) center / contain no-repeat; mask: var(--ico-chevron, none) center / contain no-repeat; }
#tabs-admin .boton-grupo.abierto::after { transform: rotate(180deg); }
#tabs-admin .admin-buscar { display: flex; align-items: center; gap: 10px; justify-content: flex-start; font-size: 0; }
#tabs-admin .admin-buscar::after { font-size: 15px; }
#tabs-admin .admin-buscar::before { width: 19px; height: 19px; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel { margin: 2px 0 8px 22px; }
.barra-superior.modo-admin #tabs-admin .boton-grupo.grupo-activo, .barra-superior.modo-admin #tabs-admin .admin-inicio.activa { background: rgba(22, 137, 90, .30); box-shadow: none; color: #fff; }
.barra-superior.modo-admin #tabs-admin .boton-grupo.grupo-activo::before { color: #3ddc97; }

@media (min-width: 1000px) {
  /* Logo y nombre arriba, y el botón « para dejar solo los íconos */
  .barra-superior.modo-admin #tabs-admin::before {
    content: "Leosoft"; left: 14px; top: 16px; font-size: 21px; padding: 6px 0 6px 44px; line-height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='10' fill='%2316895a'/%3E%3Cpath d='M12 8H18V26H29V32H12Z' fill='white'/%3E%3Ccircle cx='29.5' cy='11.5' r='3.2' fill='%23a5d6a7'/%3E%3C/svg%3E") left center / 34px 34px no-repeat;
  }
  .btn-colapsar-menu { position: absolute; top: 20px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #cfd8e3; cursor: pointer; display: grid; place-items: center; }
  .btn-colapsar-menu:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .btn-colapsar-menu::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--ico-colapsar) center / contain no-repeat; mask: var(--ico-colapsar) center / contain no-repeat; }
  body.menu-compacto .btn-colapsar-menu { right: 20px; }
  body.menu-compacto .btn-colapsar-menu::before { -webkit-mask-image: var(--ico-expandir); mask-image: var(--ico-expandir); }
  /* Modo compacto: solo íconos */
  body.menu-compacto .barra-superior.modo-admin #tabs-admin { width: 76px; padding: 76px 10px 16px; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin::before { content: ""; padding: 0; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin .boton-grupo, body.menu-compacto .barra-superior.modo-admin #tabs-admin .admin-inicio, body.menu-compacto .barra-superior.modo-admin #tabs-admin .admin-buscar { font-size: 0; justify-content: center; padding: 12px 0; gap: 0; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin .admin-buscar::after, body.menu-compacto #tabs-admin .boton-grupo::after { display: none; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin .menu-grupo-panel, body.menu-compacto .barra-superior.modo-admin #tabs-admin .sub-lateral { display: none; }
  body.menu-compacto:has(.barra-superior.modo-admin) #vista-admin { margin-left: 76px; }
  body.menu-compacto .barra-superior.modo-admin { padding-left: 90px; }
}
@media (max-width: 999px) { .btn-colapsar-menu { display: none; } }

/* ============ Encabezado claro en Administración ============ */
.barra-superior.modo-admin { background: #fff; color: var(--ui-texto); border-bottom: 1px solid var(--ui-borde); box-shadow: none; }
.barra-superior.modo-admin .btn-barra, .barra-superior.modo-admin .btn-menu-lateral { background: #fff; color: #33414f; border: 1px solid var(--ui-borde); }
.barra-superior.modo-admin .btn-barra:hover, .barra-superior.modo-admin .btn-menu-lateral:hover { background: #f3f5f7; border-color: #cfd6de; }
.barra-superior.modo-admin .btn-barra svg { stroke: currentColor; }
.barra-superior.modo-admin .btn-barra .btn-etiqueta, .barra-superior.modo-admin .btn-barra .btn-corta { display: none; }
.barra-superior.modo-admin #btn-negocio .btn-etiqueta { display: inline; font-weight: 700; }
.barra-superior.modo-admin .btn-barra { padding: 0 11px; height: 40px; }
.barra-superior.modo-admin #btn-negocio { padding: 0 14px 0 11px; border-radius: 12px; }
.barra-superior.modo-admin .btn-barra-salir { color: #b83a2d; border-color: #f0c9c4; background: #fff; }
.barra-superior.modo-admin .btn-barra-salir:hover { background: #fdeceb; }
.barra-superior.modo-admin h1 { color: var(--ui-texto); }
.barra-superior.modo-admin .titulo-seccion { background: transparent; color: var(--ui-texto); font-size: 19px; font-weight: 800; padding: 0 6px; border: 0; }
.barra-superior.modo-admin .barra-usuario { background: transparent; border: 0; color: var(--ui-texto); padding: 0; }
.barra-superior.modo-admin .barra-usuario .usuario-actual, .barra-superior.modo-admin .barra-usuario .estado-conexion { color: var(--ui-suave); }
.barra-superior.modo-admin .estado-nube { color: var(--ui-suave); background: #f3f5f7; }
.barra-superior.modo-admin .btn-menu-lateral { color: #33414f; }
@media (min-width: 1000px) {
  .barra-superior.modo-admin { padding: 10px 20px 10px 276px; min-height: 66px; flex-wrap: nowrap; align-items: center; column-gap: 10px; }
  .barra-superior.modo-admin h1 { display: none; }
  .barra-superior.modo-admin .titulo-seccion { display: inline-block; }
  .barra-superior.modo-admin .barra-acciones { margin-left: auto; }
}
/* En laptop el menú se contrae con « (queda solo con íconos); el ☰ queda para tablet y celular */
@media (min-width: 1000px) { .barra-superior.modo-admin .btn-menu-lateral { display: none !important; } }
@media (max-width: 480px) { .ui-pend .ui-pend-flecha { display: none; } .ui-pend { padding: 12px 2px; } }

/* ===== Dos niveles de pestañas que se distinguen a simple vista =====
   Arriba: las pantallas hermanas (ej. "Pagos a proveedores" | "Tarjetas corporativas") como pestañas con raya verde abajo.
   Abajo: las secciones DE ESA pantalla, como un control gris con su nombre al frente ("Pagos a proveedores ›  Pendientes | Pagados | Proveedores"). */
#familia-pantallas.tabs-categoria { gap: 2px; margin: 0 0 14px !important; padding: 0; border-bottom: 1px solid var(--ui-borde); }
#admin-fijo #familia-pantallas .tab-categoria { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 10px 18px; font-size: 15px; font-weight: 700; color: var(--ui-suave); box-shadow: none; }
#admin-fijo #familia-pantallas .tab-categoria:hover:not(.activa) { color: var(--ui-texto); background: transparent; }
#admin-fijo #familia-pantallas .tab-categoria.activa { background: transparent; color: var(--ui-texto); border-bottom-color: var(--ui-verde); }
#admin-fijo > [id^="subtabs-"]:not(.oculto) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; margin-bottom: 14px !important; background: #e8ecf0; border-radius: 12px; }
#admin-fijo > [id^="subtabs-"][data-padre]:not(.oculto)::before { content: attr(data-padre) " ›"; padding: 0 10px 0 12px; font-size: 13px; font-weight: 700; color: var(--ui-suave); white-space: nowrap; }
[id^="subtabs-"] .tab-categoria, #admin-fijo [id^="subtabs-"] .tab-categoria { background: transparent; border: 0; border-radius: 9px; padding: 7px 14px; color: #4a5865; font-weight: 600; font-size: 14px; box-shadow: none; }
[id^="subtabs-"] .tab-categoria:hover:not(.activa), #admin-fijo [id^="subtabs-"] .tab-categoria:hover:not(.activa) { background: rgba(255, 255, 255, .6); color: var(--ui-texto); }
[id^="subtabs-"] .tab-categoria.activa, #admin-fijo [id^="subtabs-"] .tab-categoria.activa { background: #fff; color: var(--ui-verde-osc); box-shadow: 0 1px 3px rgba(16, 24, 40, .15); font-weight: 800; }
#admin-fijo > [id^="subtabs-"]:not(.oculto) { flex: 0 0 auto; }

/* "Todo" en el Inicio: solo texto. El ícono de grupo ya sale en el título de cada grupo; repetirlo en cada pantalla ensuciaba. */
.ini-categoria .ini-app-icono { display: none; }
.ini-categoria .ini-apps-rejilla { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.ini-categoria .ini-app { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 0; padding: 11px 36px 11px 14px; min-height: 0; border-radius: 10px; background: #fff; border: 1px solid var(--ui-borde); }
.ini-categoria .ini-app:hover { background: var(--ui-verde-claro); border-color: #b9dccb; box-shadow: none; transform: none; }
.ini-categoria .ini-app-nombre { font-size: 14.5px; font-weight: 600; color: var(--ui-texto); }
.ini-categoria .ini-app-pin { top: 50%; transform: translateY(-50%); right: 6px; opacity: 0; transition: opacity .12s; }
.ini-categoria .ini-app:hover .ini-app-pin, .ini-categoria .ini-app-pin.on, .ini-categoria .ini-app:focus-within .ini-app-pin { opacity: 1; }
@media (pointer: coarse) { .ini-categoria .ini-app-pin { opacity: .7; } }
.ini-categoria { background: transparent; border: 0; padding: 4px 0 8px; }
.ini-categoria h4 { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--ui-borde); }

/* Celular angosto: renglón 1 = ☰, dónde estás (se lee completo, con puntos suspensivos solo si no cabe) y los botones; renglón 2 = el negocio con su nombre completo y los avisos (mensajes y campana).
   Antes todo iba en un solo renglón y el título se aplastaba hasta quedar en una letra. */
@media (max-width: 480px) {
  .barra-superior.modo-admin { flex-wrap: wrap; row-gap: 8px; }
  .barra-superior.modo-admin .titulo-seccion { font-size: 15px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .barra-superior.modo-admin .selector-negocio { order: 50; flex: 1 1 60%; min-width: 0; max-width: none; }
  .barra-superior.modo-admin .barra-acciones { order: 51; margin-left: 0; }
  /* Sin selector de negocio (una sola sucursal) los avisos igual bajan a su propio renglón, a la derecha, para no aplastar el título. */
  .barra-superior.modo-admin .selector-negocio.oculto ~ #home-panel { min-width: 150px; margin-left: auto; justify-content: flex-end; }
  .barra-superior.modo-admin #btn-negocio { width: 100%; justify-content: flex-start; }
  .barra-superior.modo-admin .selector-negocio .btn-etiqueta { max-width: none; flex: 1; text-align: left; }
  .barra-superior.modo-admin .selector-negocio .negocio-flecha { margin-left: auto; }
}

/* Tablet (iPad vertical): el botón del negocio se salía de su caja de 120 px y se encimaba con los mensajes. Aquí sobra espacio: que se lea el nombre completo y la caja mida lo que mide el botón. */
@media (min-width: 481px) and (max-width: 999px) {
  .barra-superior.modo-admin .selector-negocio { max-width: 260px; min-width: 0; }
  .barra-superior.modo-admin .selector-negocio .btn-etiqueta { max-width: 180px; }
  .barra-superior.modo-admin #btn-negocio { max-width: 100%; }
}

/* ===== Tokens v2 · claro + compacto (parte A del rediseño del administrador) =====
   Solo variables: todavía NINGUNA pantalla las usa, así que no cambia nada de lo que se ve.
   Los componentes (botón, pill, tabla compacta, barra lateral) las irán estrenando en las partes B-E.
   Origen: leosoft-design-v2 (tokens.css). Verde = acción primaria y estados positivos; rojo = solo lo urgente.
   Escritorio = compacto por defecto; tablet/táctil = clase density-comfortable (o automático con pointer:coarse). */
:root{
  /* Marca (verde Leosoft actual) */
  --brand-50:#EEF8F2; --brand-100:#D5EFE0; --brand-200:#ACDEC1; --brand-300:#7CC89D;
  --brand-400:#46AC74; --brand-500:#1F9157; --brand-600:#177A48; --brand-700:#13623B;
  --brand-800:#114E30; --brand-900:#0D3D26;
  /* Neutros (gris frío muy ligero) */
  --gray-0:#FFFFFF; --gray-25:#FBFCFB; --gray-50:#F6F7F7; --gray-100:#EEF0EF; --gray-150:#E6E9E7; --gray-200:#DFE3E1;
  --gray-300:#C9CFCC; --gray-400:#98A19D; --gray-500:#69726E; --gray-600:#4B5450;
  --gray-700:#343B38; --gray-800:#1F2522; --gray-900:#131816;
  /* Semánticos: texto / fondo suave / borde */
  --success-fg:#15803D; --success-bg:#ECFDF3; --success-bd:#ABEFC6;
  --warning-fg:#B54708; --warning-bg:#FFFAEB; --warning-bd:#FEDF89;
  --danger-fg:#B42318;  --danger-bg:#FEF3F2;  --danger-bd:#FECDCA;
  --info-fg:#175CD3;    --info-bg:#EFF8FF;    --info-bd:#B2DDFF;
  /* Superficies (claro, sin tema oscuro) */
  --bg-app:var(--gray-50); --bg-surface:#FFFFFF; --bg-subtle:var(--gray-25); --bg-muted:var(--gray-100);
  --side-bg:#FFFFFF; --side-fg:var(--gray-600); --side-fg-muted:var(--gray-500); --side-hover:var(--gray-50); --side-active:var(--gray-100);
  --fg-1:var(--gray-900); --fg-2:var(--gray-600); --fg-3:var(--gray-500); --fg-4:var(--gray-400);
  --border:var(--gray-150); --border-strong:var(--gray-200); --divider:var(--gray-100); --focus:var(--brand-500);
  /* Tipografía compacta: base 13 · tablas 12.5 · mínimo 12 (nunca menos) */
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-xs:12px; --text-sm:12.5px; --text-base:13px; --text-md:14px; --text-lg:16px; --text-xl:18px; --text-2xl:20px; --kpi:20px;
  --lh-tight:1.25; --lh:1.4;
  /* Espaciado base 4 */
  --s-0:2px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  /* Radios y sombras mínimas */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-full:999px;
  --shadow-xs:0 1px 1px rgba(16,24,20,.04);
  --shadow-pop:0 6px 20px -4px rgba(16,24,20,.12),0 2px 4px -2px rgba(16,24,20,.06); /* solo menús/modales */
  /* Densidad */
  --control-h:32px; --control-h-sm:28px; --row-h:34px; --cell-x:12px; --cell-y:7px;
  --card-p:12px; --gap:12px; --sidebar-w:212px; --header-h:48px; --nav-h:30px; --icon:16px;
}
/* Modificador "comfortable": tablet / pantallas táctiles (piso del antro, caja) */
.density-comfortable{ --text-xs:13px; --text-sm:13.5px; --text-base:14.5px; --text-md:15px; --kpi:24px;
  --control-h:44px; --control-h-sm:40px; --row-h:44px; --cell-x:16px; --cell-y:11px; --card-p:16px; --gap:16px;
  --sidebar-w:240px; --header-h:56px; --nav-h:40px; --icon:18px; }
@media (pointer:coarse){ :root:not(.density-compact){ --sidebar-w:240px; --header-h:56px; --text-base:14.5px; --control-h:44px; --control-h-sm:40px; --row-h:44px; --cell-y:11px; --nav-h:40px; } }

/* Fuente Inter alojada en el servidor (el local no siempre tiene internet). Licencia OFL en fonts/Inter-LICENSE-OFL.txt. Solo carga cuando una pantalla la usa. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format("woff2")}

/* ===== Componentes v2 (parte B del rediseño del administrador) =====
   Todo cuelga de un contenedor con la clase "v2" o de #vista-admin (Administración): fuera de ahí nada cambia.
   Así no choca con los estilos de siempre y el cambio se hace pantalla por pantalla. Catálogo para revisar: docs/sistema-diseno-v2.html */
.v2 { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh); color: var(--fg-1); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.v2, .v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
:is(.v2, #vista-admin) .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
:is(.v2, #vista-admin) .ico { width: var(--icon); height: var(--icon); stroke-width: 1.75; flex: none; }
:is(.v2, #vista-admin) .ico.sm { width: 14px; height: 14px; } :is(.v2, #vista-admin) .ico.xs { width: 12px; height: 12px; }
.v2 a.link { text-decoration: none; }
:is(.v2, #vista-admin) .btn:focus-visible, :is(.v2, #vista-admin) .chip:focus-visible, :is(.v2, #vista-admin) .icon-btn:focus-visible, :is(.v2, #vista-admin) .tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
:is(.v2, #vista-admin) .icon-btn{position:relative;width:var(--control-h-sm);height:var(--control-h-sm);border-radius:var(--r-md);display:grid;place-items:center;color:var(--fg-3)}
:is(.v2, #vista-admin) .icon-btn .badge{position:absolute;top:-5px;right:-7px;min-width:12px;height:16px;padding:0 4px;border-radius:99px;background:var(--gray-700);color:#fff;font-size:12px;line-height:16px;font-weight:600;text-align:center;border:1.5px solid #fff;box-sizing:content-box}
:is(.v2, #vista-admin) .divider-v{width:1px;height:20px;background:var(--border);margin:0 4px}
:is(.v2, #vista-admin) .page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px}
:is(.v2, #vista-admin) .page-head h1{font-size:var(--text-2xl);line-height:var(--lh-tight);font-weight:650;letter-spacing:-.015em}
:is(.v2, #vista-admin) .page-head p{color:var(--fg-3);font-size:12.5px}
:is(.v2, #vista-admin) .page-head .actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
:is(.v2, #vista-admin) .btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;border-radius:var(--r-md);font:inherit;font-size:13px;font-weight:600;border:1px solid transparent;white-space:nowrap;cursor:pointer;line-height:1}
:is(.v2, #vista-admin) .btn-primary{background:var(--brand-600);color:#fff}
:is(.v2, #vista-admin) .btn-primary:hover{background:var(--brand-700)}
:is(.v2, #vista-admin) .btn-secondary{background:#fff;color:var(--fg-1);border-color:var(--border-strong)}
:is(.v2, #vista-admin) .btn-ghost{background:transparent;color:var(--fg-2)}
:is(.v2, #vista-admin) .btn-danger{background:var(--danger-fg);color:#fff}
:is(.v2, #vista-admin) .btn-danger-soft{background:#fff;color:var(--danger-fg);border-color:var(--danger-bd)}
:is(.v2, #vista-admin) .btn-sm{height:var(--control-h-sm);padding:0 8px;font-size:12.5px}:is(.v2, #vista-admin) .card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg)}
:is(.v2, #vista-admin) .card-h{display:flex;align-items:center;gap:8px;height:40px;padding:0 var(--card-p);border-bottom:1px solid var(--divider)}
:is(.v2, #vista-admin) .card-h h3{font-size:13px;font-weight:650}
:is(.v2, #vista-admin) .card-h .muted{color:var(--fg-3);font-size:12px}
:is(.v2, #vista-admin) .card-h .right{margin-left:auto;display:flex;gap:6px;align-items:center}
:is(.v2, #vista-admin) .kpi-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg)}
:is(.v2, #vista-admin) .kpi{padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
:is(.v2, #vista-admin) .kpi + .kpi{border-left:1px solid var(--divider)}
:is(.v2, #vista-admin) .kpi .lbl{color:var(--fg-3);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.v2, #vista-admin) .kpi .val{font-size:var(--kpi);font-weight:650;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
:is(.v2, #vista-admin) .kpi .val small{font-size:13px;color:var(--fg-3);font-weight:500;letter-spacing:0}
:is(.v2, #vista-admin) .kpi .meta{font-size:12px;color:var(--fg-3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.v2, #vista-admin) .kpi.urgent .val{color:var(--danger-fg)}
:is(.v2, #vista-admin) .kpi.attn .val{color:var(--warning-fg)}
:is(.v2, #vista-admin) .delta{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:12px}
:is(.v2, #vista-admin) .delta.down{color:var(--fg-2)}:is(.v2, #vista-admin) .delta.up{color:var(--success-fg)}
:is(.v2, #vista-admin) .pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--r-sm);font-size:12px;font-weight:550;white-space:nowrap;line-height:1}
:is(.v2, #vista-admin) .pill .d{width:6px;height:6px;border-radius:9px;background:currentColor}
:is(.v2, #vista-admin) .pill.neutral{background:var(--bg-muted);color:var(--fg-2)}
:is(.v2, #vista-admin) .pill.success{background:var(--success-bg);color:var(--success-fg)}
:is(.v2, #vista-admin) .pill.warning{background:var(--warning-bg);color:var(--warning-fg)}
:is(.v2, #vista-admin) .pill.danger{background:var(--danger-bg);color:var(--danger-fg)}
:is(.v2, #vista-admin) .pill.info{background:var(--info-bg);color:var(--info-fg)}
:is(.v2, #vista-admin) .tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-sm);font-size:12px;font-weight:500;background:var(--bg-muted);color:var(--fg-2)}
:is(.v2, #vista-admin) .chips{display:flex;gap:4px;flex-wrap:wrap}
:is(.v2, #vista-admin) .chip{display:inline-flex;align-items:center;gap:5px;height:var(--control-h-sm);padding:0 10px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:#fff;font-size:12.5px;font-weight:550;color:var(--fg-2);white-space:nowrap}
:is(.v2, #vista-admin) .chip .n{font-size:12px;color:var(--fg-4);font-weight:600}
:is(.v2, #vista-admin) .chip.on{background:var(--gray-800);border-color:var(--gray-800);color:#fff}
:is(.v2, #vista-admin) .chip.on .n{color:var(--gray-300)}
:is(.v2, #vista-admin) .seg{display:inline-flex;background:var(--bg-muted);border-radius:var(--r-md);padding:2px;height:var(--control-h)}
:is(.v2, #vista-admin) .seg div{display:flex;align-items:center;padding:0 10px;font-size:12.5px;font-weight:550;color:var(--fg-3);border-radius:5px;white-space:nowrap}
:is(.v2, #vista-admin) .seg .on{background:#fff;color:var(--fg-1);box-shadow:0 1px 2px rgba(16,24,20,.08)}
:is(.v2, #vista-admin) .count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-sm);font-size:12px;font-weight:650;background:var(--bg-muted);color:var(--fg-1)}
:is(.v2, #vista-admin) .count.danger{background:var(--danger-bg);color:var(--danger-fg)}
:is(.v2, #vista-admin) .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
:is(.v2, #vista-admin) .tab{height:34px;padding:0 10px;font-size:13px;font-weight:550;color:var(--fg-3);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:6px;align-items:center}
:is(.v2, #vista-admin) .tab.on{color:var(--fg-1);border-bottom-color:var(--gray-900)}
:is(.v2, #vista-admin) .tab .n{font-size:12px;color:var(--fg-4)}
:is(.v2, #vista-admin) .field{display:flex;align-items:center;gap:6px}
:is(.v2, #vista-admin) .field label{font-size:12px;font-weight:500;color:var(--fg-3);white-space:nowrap}
:is(.v2, #vista-admin) .input{display:flex;align-items:center;gap:6px;height:var(--control-h);padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:#fff;font-size:13px;color:var(--fg-1);white-space:nowrap}
:is(.v2, #vista-admin) .input.ph{color:var(--fg-4)}
:is(.v2, #vista-admin) .input svg{color:var(--fg-3)}
:is(.v2, #vista-admin) .filterbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px var(--card-p);border-bottom:1px solid var(--divider)}
:is(.v2, #vista-admin) .filterbar .sep{width:1px;height:20px;background:var(--border);margin:0 4px}
:is(.v2, #vista-admin) .filterbar .sum{margin-left:auto;color:var(--fg-3);font-size:12.5px;white-space:nowrap}
:is(.v2, #vista-admin) .filterbar .sum b{color:var(--fg-1)}
:is(.v2, #vista-admin) .tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
:is(.v2, #vista-admin) .tbl th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:600;color:var(--fg-3);background:var(--bg-subtle);height:32px;padding:0 var(--cell-x);border-bottom:1px solid var(--border);white-space:nowrap}
:is(.v2, #vista-admin) .tbl td{height:var(--row-h);padding:var(--cell-y) var(--cell-x);border-bottom:1px solid var(--divider);vertical-align:middle;white-space:nowrap}
:is(.v2, #vista-admin) .tbl tr:last-child td{border-bottom:0}
:is(.v2, #vista-admin) .tbl tr.sel td{background:var(--brand-50)}
:is(.v2, #vista-admin) .tbl .r{text-align:right}
:is(.v2, #vista-admin) .tbl .c{text-align:center}
:is(.v2, #vista-admin) .tbl .strong{font-weight:600}
:is(.v2, #vista-admin) .tbl .muted{color:var(--fg-3)}
:is(.v2, #vista-admin) .tbl .dim{color:var(--fg-4)}
:is(.v2, #vista-admin) .tbl .neg{color:var(--danger-fg);font-weight:600}
:is(.v2, #vista-admin) .tbl .cb{width:14px;height:14px;border:1px solid var(--gray-300);border-radius:3px;background:#fff;display:inline-block;vertical-align:middle}
:is(.v2, #vista-admin) .row-actions{display:flex;gap:0;justify-content:flex-end;color:var(--fg-3);align-items:center}
:is(.v2, #vista-admin) .row-actions .icon-btn{width:26px;height:26px}
:is(.v2, #vista-admin) .tfoot{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 var(--card-p);border-top:1px solid var(--divider);color:var(--fg-3);font-size:12.5px}
:is(.v2, #vista-admin) .alert{display:flex;gap:8px;align-items:center;min-height:36px;padding:6px 8px 6px 12px;border-radius:var(--r-lg);border:1px solid;font-size:13px}
:is(.v2, #vista-admin) .alert.warning{background:var(--warning-bg);border-color:var(--warning-bd);color:#7A2E0E}
:is(.v2, #vista-admin) .alert.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:#7A271A}
:is(.v2, #vista-admin) .alert.info{background:var(--info-bg);border-color:var(--info-bd);color:#194185}
:is(.v2, #vista-admin) .alert b{font-weight:620}
:is(.v2, #vista-admin) .alert .act{margin-left:auto;display:flex;gap:4px}
:is(.v2, #vista-admin) .link{color:var(--brand-700);font-weight:600;font-size:12.5px;white-space:nowrap}
:is(.v2, #vista-admin) .tbl .row-actions .icon-btn { margin: -3px 0; } /* el botón ⋯ (26 px) no ensancha la fila de 34 px */

/* ============ Barra lateral clara v2 (parte B del rediseño del administrador) ============
   Misma estructura y mismos botones que siempre (permisos y menu-lateral.js no se tocan): solo cambia cómo se ve.
   Laptop: 212 px, blanca con borde, filas de 30 px, grupos con título (Operación diaria · Gente · Sistema). Tablet/táctil: filas más grandes (tokens). */
.barra-superior.modo-admin #tabs-admin { background: var(--side-bg); margin: 0; /* la barra superior de antes la sacaba 16 px a la izquierda y cortaba íconos y textos */ }
.barra-superior.modo-admin #tabs-admin .boton-grupo, .barra-superior.modo-admin #tabs-admin .admin-inicio { color: var(--side-fg); font-weight: 500; }
.barra-superior.modo-admin #tabs-admin .boton-grupo:hover:not(.grupo-activo), .barra-superior.modo-admin #tabs-admin .admin-inicio:hover:not(.activa) { background: var(--side-hover); color: var(--fg-1); }
.barra-superior.modo-admin #tabs-admin .boton-grupo.grupo-activo, .barra-superior.modo-admin #tabs-admin .admin-inicio.activa { background: var(--side-active); color: var(--fg-1); font-weight: 600; box-shadow: none; }
.barra-superior.modo-admin #tabs-admin .boton-grupo::before, .barra-superior.modo-admin #tabs-admin .admin-inicio::before { color: var(--fg-3); }
.barra-superior.modo-admin #tabs-admin .boton-grupo.grupo-activo::before, .barra-superior.modo-admin #tabs-admin .admin-inicio.activa::before { color: var(--brand-600); }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel { border-left: 1px solid var(--border); }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button { color: var(--fg-2); box-shadow: none; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button:hover { background: var(--side-hover); color: var(--fg-1); }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.activa, .barra-superior.modo-admin #tabs-admin .menu-grupo-panel button.familia-activa.activa { background: var(--side-active); color: var(--fg-1); font-weight: 600; }
.barra-superior.modo-admin #tabs-admin .menu-grupo-panel .menu-seccion { color: var(--fg-4); font-size: var(--text-xs); }
.barra-superior.modo-admin #tabs-admin .admin-buscar { background: var(--gray-50); border: 1px solid var(--border); color: var(--fg-3); }
.barra-superior.modo-admin #tabs-admin .admin-buscar:hover { background: var(--gray-100); }
.sub-lateral { border-left: 1px solid var(--border); }
.sub-lateral-item { color: var(--fg-2); }
.sub-lateral-item:hover { background: var(--side-hover); color: var(--fg-1); }
.sub-lateral-item.activa { background: var(--side-active); color: var(--fg-1); font-weight: 600; }
.btn-colapsar-menu { color: var(--fg-3); }
.btn-colapsar-menu:hover { background: var(--gray-100); color: var(--fg-1); }
@media (max-width: 999px) { .barra-superior.modo-admin #tabs-admin::before { color: var(--fg-1); } }

@media (min-width: 1000px) {
  .barra-superior.modo-admin #tabs-admin { width: var(--sidebar-w); padding: 60px 8px 12px; gap: 1px; box-shadow: none; border-right: 1px solid var(--border); font-family: var(--font-sans); }
  .barra-superior.modo-admin #tabs-admin::before { left: 10px; top: 14px; font-size: 14px; font-weight: 650; color: var(--fg-1); letter-spacing: -.01em; padding: 0 0 0 34px; line-height: 28px; background-size: 26px 26px; }
  .btn-colapsar-menu { top: 14px; right: 8px; width: 28px; height: 28px; }
  .barra-superior.modo-admin #tabs-admin .boton-grupo, .barra-superior.modo-admin #tabs-admin .admin-inicio { min-height: var(--nav-h); padding: 0 8px; gap: 8px; border-radius: var(--r-md); font-size: var(--text-base); }
  #tabs-admin .boton-grupo::before, #tabs-admin .admin-inicio::before, #tabs-admin .admin-buscar::before { width: 18px; height: 18px; }
  #tabs-admin .boton-grupo::after { width: 14px; height: 14px; }
  .barra-superior.modo-admin #tabs-admin .admin-buscar { height: var(--control-h-sm); min-height: 0; padding: 0 8px; gap: 8px; margin-bottom: 6px; border-radius: var(--r-md); }
  #tabs-admin .admin-buscar::after { font-size: var(--text-sm); }
  #tabs-admin .admin-buscar::before { width: 16px; height: 16px; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo-panel { margin: 1px 0 4px 16px; padding: 0 0 0 6px; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo-panel button { padding: 0 8px; min-height: calc(var(--nav-h) - 4px); border-radius: var(--r-sm); font-size: var(--text-sm); display: flex; align-items: center; }
  .sub-lateral { margin: 1px 0 4px 16px; padding-left: 6px; }
  .sub-lateral-item { padding: 0 8px; min-height: calc(var(--nav-h) - 4px); border-radius: var(--r-sm); font-size: var(--text-sm); }
  /* Títulos de grupo, solo con CSS (sin tocar el menú): Operación diaria · Gente · Sistema */
  .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="ventas"])::before { content: "Operación diaria"; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="personal"])::before { content: "Gente"; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="operacion"])::before { content: "Sistema"; }
  .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="ventas"])::before, .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="personal"])::before, .barra-superior.modo-admin #tabs-admin .menu-grupo:has(> [data-grupo="operacion"])::before { display: block; padding: 10px 8px 3px; font-size: var(--text-xs); font-weight: 600; color: var(--fg-4); }
  body:has(.barra-superior.modo-admin) #vista-admin { margin-left: var(--sidebar-w); }
  .barra-superior.modo-admin { padding-left: calc(var(--sidebar-w) + 20px); }
  /* Solo íconos: el ancho de 76 px y sin títulos de grupo */
  body.menu-compacto .barra-superior.modo-admin #tabs-admin .menu-grupo::before { display: none !important; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin { padding: 60px 8px 12px; }
  body.menu-compacto .barra-superior.modo-admin #tabs-admin .boton-grupo, body.menu-compacto .barra-superior.modo-admin #tabs-admin .admin-inicio, body.menu-compacto .barra-superior.modo-admin #tabs-admin .admin-buscar { padding: 0; }
  body.menu-compacto .btn-colapsar-menu { right: 24px; }
}

/* ============ Piel v2 del administrador (parte C) ============
   Base común para TODAS las pantallas de Administración (#vista-admin): letra Inter compacta, fondo claro, tablas de 34 px, campos de 32 px,
   botones y pestañas del sistema de diseño v2. Solo presentación; las pantallas del piso (mesero, caja, doorman) no cuelgan de #vista-admin. */
body:has(.barra-superior.modo-admin) { background: var(--bg-app); }
#vista-admin, .barra-superior.modo-admin { font-family: var(--font-sans); }
#vista-admin { font-size: var(--text-base); line-height: var(--lh); color: var(--fg-1); background: var(--bg-app); -webkit-font-smoothing: antialiased; }
#vista-admin h2 { font-size: var(--text-2xl); line-height: var(--lh-tight); font-weight: 650; letter-spacing: -.015em; }
#vista-admin h3 { font-size: var(--text-md); font-weight: 650; }
/* Tablas: encabezado de 32 px en gris suave, filas de 34 px, cifras alineadas */
#vista-admin table { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
#vista-admin table th { font-size: var(--text-xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg-3); background: var(--bg-subtle); height: 32px; padding: 0 var(--cell-x); white-space: nowrap; border-bottom: 1px solid var(--border); }
#vista-admin table td { padding: var(--cell-y) var(--cell-x); border-top: 0; border-bottom: 1px solid var(--divider); vertical-align: middle; }
#vista-admin table tbody tr:last-child td { border-bottom: 0; }
/* Campos de 32 px */
#vista-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), #vista-admin select { height: var(--control-h); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: var(--text-base); font-family: inherit; color: var(--fg-1); background-color: #fff; padding: 0 10px; }
#vista-admin textarea { border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: var(--text-base); font-family: inherit; padding: 6px 10px; }
#vista-admin input:focus, #vista-admin select:focus, #vista-admin textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
/* Botones del administrador: el verde solo para la acción principal */
#vista-admin .btn-grande, #vista-admin .usr-btn-nuevo { background: var(--brand-600); border: 1px solid transparent; color: #fff; border-radius: var(--r-md); min-height: var(--control-h); padding: 0 12px; font-family: inherit; font-size: var(--text-base); font-weight: 600; box-shadow: none; transform: none; filter: none; }
#vista-admin .btn-grande:hover:not(:disabled), #vista-admin .usr-btn-nuevo:hover { background: var(--brand-700); transform: none; filter: none; }
#vista-admin .btn-grande:disabled { background: var(--brand-200); }
#vista-admin .btn-secundario, #vista-admin .usr-btn:not(.usr-btn-nuevo), #vista-admin .det-btn { background: #fff; color: var(--fg-1); border: 1px solid var(--border-strong); border-radius: var(--r-md); min-height: var(--control-h-sm); padding: 0 10px; font-family: inherit; font-size: var(--text-sm); font-weight: 600; box-shadow: none; }
#vista-admin .btn-secundario:hover, #vista-admin .usr-btn:not(.usr-btn-nuevo):hover, #vista-admin .det-btn:hover { background: var(--gray-50); }
/* Chips de filtro */
#vista-admin .usr-chip { height: var(--control-h-sm); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: #fff; color: var(--fg-2); font-family: inherit; font-size: var(--text-sm); font-weight: 550; }
#vista-admin .usr-chip b { color: var(--fg-4); font-size: var(--text-xs); }
#vista-admin .usr-chip.activo { background: var(--gray-800); border-color: var(--gray-800); color: #fff; }
#vista-admin .usr-chip.activo b { color: var(--gray-300); }
#vista-admin .usr-buscar { border-radius: var(--r-md); }
#vista-admin .usr-tabla { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: none; }
/* Pestañas de pantalla (arriba) y secciones (abajo) */
#familia-pantallas.tabs-categoria { border-bottom: 1px solid var(--border); margin: 0 0 var(--gap) !important; }
#admin-fijo #familia-pantallas .tab-categoria { height: 34px; padding: 0 12px; font-family: inherit; font-size: var(--text-base); font-weight: 550; color: var(--fg-3); }
#admin-fijo #familia-pantallas .tab-categoria.activa { color: var(--fg-1); border-bottom: 2px solid var(--gray-900); }
#admin-fijo > [id^="subtabs-"]:not(.oculto) { background: var(--bg-muted); border-radius: var(--r-md); padding: 2px; gap: 2px; margin-bottom: var(--gap) !important; }
#admin-fijo > [id^="subtabs-"][data-padre]:not(.oculto)::before { font-size: var(--text-sm); font-weight: 600; color: var(--fg-3); }
[id^="subtabs-"] .tab-categoria, #admin-fijo [id^="subtabs-"] .tab-categoria { height: calc(var(--control-h) - 4px); padding: 0 10px; border-radius: 5px; font-family: inherit; font-size: var(--text-sm); font-weight: 550; color: var(--fg-3); }
[id^="subtabs-"] .tab-categoria.activa, #admin-fijo [id^="subtabs-"] .tab-categoria.activa { background: #fff; color: var(--fg-1); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 20, .08); }
/* Encabezado de 48 px */
@media (min-width: 1000px) {
  .barra-superior.modo-admin { min-height: var(--header-h); padding-top: 0; padding-bottom: 0; }
  .barra-superior.modo-admin .btn-barra, .barra-superior.modo-admin .btn-menu-lateral { height: var(--control-h); border-radius: var(--r-md); border-color: var(--border-strong); }
  .barra-superior.modo-admin .titulo-seccion { font-size: var(--text-md); font-weight: 600; }
}
/* Íconos que sustituyen a los emojis (public/iconos-emoji.js): del tamaño de la letra y del color del texto */
.ico-e { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-e[fill="currentColor"] { fill: currentColor; }
.ico-e.ico-punto { width: .65em; height: .65em; vertical-align: .02em; fill: currentColor; stroke: none; }

/* ---- Inicio en v2: tira de KPIs en una sola tarjeta, listas compactas, títulos de 20 px ---- */
#vista-admin .ui-enc { margin: 0 0 var(--gap); align-items: center; }
#vista-admin .ui-enc h2 { font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: -.015em; font-weight: 650; }
#vista-admin .ui-enc p { font-size: var(--text-sm); margin-top: 2px; color: var(--fg-3); }
#vista-admin .ui-enc .ui-refrescar { border-radius: var(--r-md); height: var(--control-h); padding: 0 12px; font-size: var(--text-sm); font-weight: 600; border-color: var(--border-strong); }
#vista-admin .ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--gap); overflow: hidden; }
#vista-admin .ui-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#vista-admin .ui-kpi + .ui-kpi { border-left: 1px solid var(--divider); }
#vista-admin .ui-kpi:hover { background: var(--bg-subtle); }
#vista-admin .ui-kpi-icono { display: none; }
#vista-admin .ui-kpi-etq { font-size: var(--text-xs); font-weight: 500; color: var(--fg-3); }
#vista-admin .ui-kpi-valor { font-size: var(--kpi); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
#vista-admin .ui-kpi-apoyo { font-size: var(--text-xs); color: var(--fg-3); }
#vista-admin .ui-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; padding: var(--card-p); margin-bottom: var(--gap); }
#vista-admin .ui-card-enc { margin-bottom: 4px; } #vista-admin .ui-card-enc h3 { font-size: var(--text-base); font-weight: 650; letter-spacing: 0; }
#vista-admin .ui-badge { padding: 0 6px; height: 20px; line-height: 20px; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 600; }
#vista-admin .ui-pend { grid-template-columns: auto 1fr auto auto; gap: 10px; padding: 8px 4px; min-height: 40px; border-top-color: var(--divider); font-size: var(--text-base); }
#vista-admin .ui-pend-icono { width: auto; height: auto; background: transparent; border-radius: 0; font-size: var(--icon); color: var(--fg-3); }
#vista-admin .ui-pend.t-alerta .ui-pend-icono { color: var(--danger-fg); } #vista-admin .ui-pend.t-info .ui-pend-icono { color: var(--info-fg); }
#vista-admin .ui-pend b { font-size: var(--text-base); font-weight: 600; } #vista-admin .ui-pend small { font-size: var(--text-sm); color: var(--fg-3); margin-top: 0; }
#vista-admin .ui-pend-n { min-width: 22px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 650; }
#vista-admin .ui-pend-flecha { font-size: var(--text-md); color: var(--fg-4); }
#vista-admin .ini-seccion-titulo-fijo, #vista-admin .ini-seccion-titulo { font-size: var(--text-md); font-weight: 650; letter-spacing: 0; }
#vista-admin .ini-app { border-radius: var(--r-lg); box-shadow: none; }
#vista-admin .ui-kpi { align-items: flex-start; text-align: left; font-family: inherit; }
#vista-admin .ini-jornada { gap: 8px; padding: 0 10px; height: var(--control-h); border-radius: var(--r-md); border-color: var(--border-strong); box-shadow: none; }
#vista-admin .ini-jornada .ico { width: var(--icon); height: var(--icon); color: var(--fg-3); }
#vista-admin .ini-jornada span { display: flex; align-items: baseline; gap: 6px; }
#vista-admin .ini-jornada small { display: inline; font-size: var(--text-xs); } #vista-admin .ini-jornada b { font-size: var(--text-sm); font-weight: 600; }

/* ---- Tiras de KPIs de todas las pantallas (.ev-dinero): una sola tarjeta con divisores, sin sombras ni íconos ---- */
#vista-admin .ev-dinero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--divider); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--gap); }
#vista-admin .ev-dinero > div { background: #fff; border-radius: 0; box-shadow: none; padding: 10px 14px; gap: 2px; min-width: 0; }
#vista-admin .ev-dinero span { font-size: var(--text-xs); font-weight: 500; color: var(--fg-3); }
#vista-admin .ev-dinero b { font-size: var(--kpi); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
#vista-admin .ev-dinero small { font-size: var(--text-xs); color: var(--fg-3); }
#vista-admin .ev-dinero-alerta b { color: var(--danger-fg); }

/* ---- Pantallas de lista (listaCompacta): filtros y tabla forman una sola tarjeta ---- */
#vista-admin .lc-periodo { align-items: center; gap: 8px 14px; margin-bottom: var(--gap); }
#vista-admin .lc-periodo label { flex-direction: row; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--fg-3); }
#vista-admin .usr-barra { box-shadow: none; border: 1px solid var(--border); border-bottom-color: var(--divider); border-radius: var(--r-lg) var(--r-lg) 0 0; margin-bottom: 0; padding: 8px var(--card-p); gap: 6px 8px; }
#vista-admin .usr-barra + .lc-scroll { background: #fff; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
#vista-admin .lc-scroll .usr-tabla { border: 0; border-radius: 0; }
#vista-admin .usr-tabla tbody tr:hover td { background: var(--bg-subtle); }
#vista-admin .usr-rol { height: 20px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 500; background: var(--bg-muted); color: var(--fg-2); }
#vista-admin .usr-rol-admin, #vista-admin .usr-rol-mesero { background: var(--success-bg); color: var(--success-fg); }
#vista-admin .usr-rol-gerente, #vista-admin .usr-rol-capitan { background: var(--warning-bg); color: var(--warning-fg); }
#vista-admin .usr-rol-cajero, #vista-admin .usr-rol-hostess { background: var(--bg-muted); color: var(--fg-2); }
#vista-admin .usr-acceso { font-size: var(--text-sm); color: var(--fg-2); }
#vista-admin .usr-completos { font-size: var(--text-xs); color: var(--fg-3); }
#vista-admin .usr-estado { font-size: var(--text-xs); }
#vista-admin .usr-estado.activo { color: var(--success-fg); }
#vista-admin .usr-icono { border-radius: var(--r-md); padding: 0 6px; height: 26px; font-size: var(--text-md); color: var(--fg-3); }
#vista-admin .usr-icono:hover { background: var(--bg-muted); border-color: transparent; color: var(--fg-1); }
#vista-admin .lc-mono { font-family: inherit; font-size: var(--text-sm); color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* ---- Gastos: barra «Por cuenta» y comprobantes como etiquetas suaves ---- */
#vista-admin .gasto-cuentas { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px var(--card-p); margin-bottom: var(--gap); }
#vista-admin .gasto-cuentas-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-bottom: 8px; font-size: var(--text-sm); }
#vista-admin .gasto-cuentas-leyenda > b { font-size: var(--text-base); }
#vista-admin .gasto-cuentas-leyenda span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#vista-admin .gasto-cuentas-leyenda i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
#vista-admin .gasto-cuentas-leyenda span b { font-variant-numeric: tabular-nums; } #vista-admin .gasto-cuentas-leyenda em { font-style: normal; color: var(--fg-3); font-variant-numeric: tabular-nums; }
#vista-admin .gasto-cuentas-barra { display: flex; gap: 2px; height: 6px; }
#vista-admin .gasto-cuentas-barra span { min-width: 3px; border-radius: 3px; }
#vista-admin .ev-dinero b small { font-size: var(--text-base); font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
#vista-admin .ev-dinero-pend b { color: var(--warning-fg); }
a.pill { text-decoration: none; }
#vista-admin .usr-quitados { font-size: var(--text-xs); font-weight: 600; color: var(--danger-fg); }
#vista-admin .lc-vence-pronto, #vista-admin .lc-vence-hoy { font-size: var(--text-xs); font-weight: 600; color: var(--warning-fg); }
#vista-admin .corte-faltante td { background: transparent; }

/* ===== Ventanas emergentes v2 del administrador (parte D3) =====
   Las ventanas viven fuera de #vista-admin, así que se enganchan a la barra de Administración. Solo presentación; el tamaño táctil del piso no cambia. */
body:has(.barra-superior.modo-admin) .modal-fondo { background: rgba(19, 24, 22, .45); }
body:has(.barra-superior.modo-admin) .modal-caja { border-radius: var(--r-lg, 10px); padding: 18px 20px; box-shadow: var(--shadow-pop); border: 1px solid var(--border); font-family: inherit; font-size: var(--text-base); color: var(--fg-1); }
body:has(.barra-superior.modo-admin) .modal-caja h3 { font-size: 16px; font-weight: 650; margin: 0 0 6px; color: var(--fg-1); }
body:has(.barra-superior.modo-admin) .modal-caja p, body:has(.barra-superior.modo-admin) .modal-caja li { font-size: var(--text-base); line-height: 1.45; color: var(--fg-2); }
body:has(.barra-superior.modo-admin) .modal-caja label { font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); margin: 12px 0 4px; }
body:has(.barra-superior.modo-admin) .modal-caja input, body:has(.barra-superior.modo-admin) .modal-caja select, body:has(.barra-superior.modo-admin) .modal-caja textarea { padding: 0 10px; min-height: var(--control-h); font-family: inherit; font-size: var(--text-base); border: 1px solid var(--border-strong); border-radius: var(--r-md, 6px); background: #fff; }
body:has(.barra-superior.modo-admin) .modal-caja textarea { padding: 8px 10px; }
body:has(.barra-superior.modo-admin) .modal-caja input:focus, body:has(.barra-superior.modo-admin) .modal-caja select:focus, body:has(.barra-superior.modo-admin) .modal-caja textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(31, 145, 87, .15); }
body:has(.barra-superior.modo-admin) .modal-caja input[type="file"] { padding: 4px; line-height: 1.6; }
body:has(.barra-superior.modo-admin) .modal-caja input[type="file"]::file-selector-button { height: 24px; margin-right: 10px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md, 6px); background: var(--gray-50); color: var(--fg-1); font: inherit; font-weight: 600; cursor: pointer; }
body:has(.barra-superior.modo-admin) .modal-caja input[type="checkbox"], body:has(.barra-superior.modo-admin) .modal-caja input[type="radio"] { width: auto; min-height: 0; }
body:has(.barra-superior.modo-admin) .modal-botones { justify-content: flex-end; gap: 8px; margin-top: 16px; }
body:has(.barra-superior.modo-admin) .modal-botones > button, body:has(.barra-superior.modo-admin) .modal-caja .btn-grande, body:has(.barra-superior.modo-admin) .modal-caja .btn-secundario { flex: 0 0 auto; width: auto; min-height: var(--control-h); padding: 0 14px; border-radius: var(--r-md, 6px); font-family: inherit; font-size: var(--text-base); font-weight: 600; box-shadow: none; transform: none; filter: none; }
body:has(.barra-superior.modo-admin) .modal-botones > button, body:has(.barra-superior.modo-admin) .modal-caja .btn-grande { background: var(--brand-600); border: 1px solid transparent; color: #fff; }
body:has(.barra-superior.modo-admin) .modal-botones > .btn-secundario, body:has(.barra-superior.modo-admin) .modal-caja .btn-secundario { background: #fff; border: 1px solid var(--border-strong); color: var(--fg-1); }
body:has(.barra-superior.modo-admin) .modal-botones > button:hover { filter: brightness(.95); }

/* ===== Empleados y Menú (parte D4) =====
   Estado como etiqueta (igual que .pill), precio editable de tabla compacto, selector de categoría en la barra. */
#vista-admin .usr-estado { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-full); background: var(--gray-100); color: var(--fg-3); font-size: var(--text-xs); font-weight: 600; line-height: 18px; white-space: nowrap; }
#vista-admin .usr-estado.activo { background: var(--success-bg); color: var(--success-fg); }
#vista-admin .lc-precio { gap: 3px; color: var(--fg-3); font-size: var(--text-base); font-weight: 500; }
#vista-admin input.lc-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) { width: 84px; min-height: 0; height: 26px; padding: 0 8px; font-family: inherit; font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-1); background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: none; }
#vista-admin .lc-input:hover { border-color: var(--border-strong); }
#vista-admin .lc-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(31, 145, 87, .15); }
#vista-admin .lc-input.lc-ok { background: var(--success-bg); border-color: var(--success-bd); }
#vista-admin .lc-input.lc-error { background: var(--danger-bg); border-color: var(--danger-bd); }

/* ===== Libro contable y Bitácora (parte D5) =====
   Revisiones del Libro como filas con borde y estado; títulos de sección compactos; notas de arriba en gris. */
#vista-admin #lista-admin > h4, #vista-admin #lb-cuerpo > h4 { margin: 16px 0 8px; font-size: var(--text-base); font-weight: 600; color: var(--fg-1); }
#vista-admin #lista-admin > h4 small, #vista-admin #lb-cuerpo > h4 small { font-weight: 400; }
#vista-admin #lb-rev { display: grid; gap: 6px; }
#vista-admin .lb-rev-fila { background: #fff; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md); padding: 0 12px; font-size: var(--text-base); }
#vista-admin .lb-rev-fila.ok { border-left-color: var(--success-fg); }
#vista-admin .lb-rev-fila.info { border-left-color: var(--info-fg); }
#vista-admin .lb-rev-fila.mal { border-left-color: var(--warning-fg); background: var(--warning-bg); }
#vista-admin .lb-rev-fila summary { cursor: pointer; min-height: var(--row-h); display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg-1); }
#vista-admin .lb-rev-fila summary small { font-weight: 400; color: var(--fg-3); }
#vista-admin .lb-rev-fila > div { padding: 0 0 8px; color: var(--fg-2); }

/* ===== Panorama de clientes / Reservaciones: sin tema oscuro (parte E) =====
   El panel usa variables --pc-*; en Administración pasan a la paleta clara v2. Las tarjetas de colores en degradado son tarjetas KPI blancas. */
#vista-admin .pc { --pc-fondo: transparent; --pc-sup: #fff; --pc-sup2: var(--gray-50); --pc-texto: var(--fg-1); --pc-texto2: var(--fg-2); --pc-muted: var(--fg-3); --pc-linea: var(--border);
  background: none; color: var(--fg-1); border-radius: 0; padding: 0; font-family: inherit; font-size: var(--text-base); }
#vista-admin .pc-card, #vista-admin .pc-hallazgos, #vista-admin .pc-mini, #vista-admin .pc-hero { border-radius: var(--r-lg); box-shadow: none; }
#vista-admin .pc-card { padding: 14px 16px 10px; }
#vista-admin .pc-card h4 { font-size: var(--text-md, 14px); font-weight: 600; }
#vista-admin .pc-hallazgos { padding: 12px 16px 6px; } #vista-admin .pc-hallazgos h3 { font-size: 14px; font-weight: 600; } #vista-admin .pc-hallazgos b { color: var(--fg-1); }
#vista-admin .pc-heroes { gap: 10px; } #vista-admin .pc-minis { gap: 10px; }
#vista-admin .pc-hero, #vista-admin .pc-hero.h1, #vista-admin .pc-hero.h2, #vista-admin .pc-hero.h3, #vista-admin .pc-hero.h4 { background: #fff; border: 1px solid var(--border); color: var(--fg-1); padding: 12px 14px; }
#vista-admin .pc-hero span { font-size: var(--text-xs); font-weight: 500; color: var(--fg-3); opacity: 1; }
#vista-admin .pc-hero b { font-size: 24px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
#vista-admin .pc-hero small { font-size: var(--text-xs); color: var(--fg-3); opacity: 1; }
#vista-admin .pc-delta { background: var(--gray-100); color: var(--fg-2); font-weight: 600; } #vista-admin .pc-delta.sube { color: var(--success-fg); background: var(--success-bg); } #vista-admin .pc-delta.baja { color: var(--danger-fg); background: var(--danger-bg); }
#vista-admin .pc-mini { padding: 10px 12px; } #vista-admin .pc-mini i { width: 32px; height: 32px; border-radius: var(--r-md); font-size: 16px; color: var(--fg-3); } #vista-admin .pc-mini b { font-size: 18px; font-weight: 650; }
#vista-admin .pc-chip { padding: 0 12px; height: var(--control-h); display: inline-flex; align-items: center; border-radius: var(--r-md); font-size: var(--text-base); background: #fff; color: var(--fg-2); border-color: var(--border-strong); }
#vista-admin .pc-chip.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
#vista-admin .pc-vertabla { border-radius: var(--r-md); } #vista-admin .pc-vertabla:hover, #vista-admin .pc-vertabla.on { background: var(--gray-100); color: var(--fg-1); }
#vista-admin .pc-filtrando { border-radius: var(--r-md); background: var(--info-bg); border-color: var(--info-bd, var(--border)); color: var(--fg-1); }
#vista-admin .pc-fchip { border-radius: var(--r-md); background: var(--brand-600); } #vista-admin .pc-limpiar { border-color: var(--border-strong); border-radius: var(--r-md); color: var(--fg-2); }
#vista-admin .gr-rejilla { stroke: var(--gray-150); } #vista-admin .gr-eje, #vista-admin .gr-dona-e { fill: var(--fg-3); } #vista-admin .gr-valor, #vista-admin .gr-dona-v { fill: var(--fg-1); } #vista-admin .gr-cruz { stroke: var(--gray-300); }
#vista-admin .gr-bh-fila:hover, #vista-admin .gr-bh-fila:focus { background: var(--gray-50); } #vista-admin .gr-celda:hover, #vista-admin .gr-celda:focus, #vista-admin .gr-celda.sel { box-shadow: 0 0 0 2px var(--gray-800); }
#vista-admin .gr-tabla th { background: #fff; } #vista-admin .gr-tabla td { border-bottom: 1px solid var(--divider); }

/* ===== Avisos del sistema v2 (parte E) =====
   Solo con la barra de Administración: las pantallas del piso conservan los avisos grandes y táctiles. */
body:has(.barra-superior.modo-admin) .aviso-sin-conexion { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--danger-bg); color: var(--danger-fg); border-bottom: 1px solid var(--danger-bd); font-size: var(--text-base); font-weight: 600; padding: 8px 16px; box-shadow: none; }
body:has(.barra-superior.modo-admin) .aviso-sin-conexion.oculto { display: none; }
body:has(.barra-superior.modo-admin) .aviso-version-nueva { gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--r-lg); background: #fff; color: var(--fg-1); border: 1px solid var(--border); box-shadow: var(--shadow-pop); font-size: var(--text-base); font-weight: 500; }
body:has(.barra-superior.modo-admin) .aviso-version-nueva button { min-height: var(--control-h); padding: 0 12px; border-radius: var(--r-md); background: var(--brand-600); font-family: inherit; font-size: var(--text-base); font-weight: 600; }

/* ===== Acciones de cada pantalla arriba, un solo botón principal (parte F) =====
   Los botones propios de la pantalla (Nuevo, Excel, Puestos…) van en una fila sobre la lista, alineados a la derecha, y ya no compiten con los filtros.
   El «+ Registrar» global del encabezado pasa a botón con borde: el verde sólido queda para la acción principal de la pantalla. */
.lc-cabeza { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.lc-cabeza .usr-acciones { margin-left: 0; justify-content: flex-end; }
#vista-admin .lc-cabeza + .usr-barra { margin-top: 0; }
.barra-superior.modo-admin .btn-registrar { height: var(--control-h); padding: 0 12px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--brand-600); color: var(--brand-700); font-size: var(--text-base); font-weight: 600; box-shadow: none; }
.barra-superior.modo-admin .btn-registrar:hover { background: var(--brand-50); }
@media (pointer: fine) { #vista-admin .usr-tabla.lc-ancha th, #vista-admin .usr-tabla.lc-ancha td { padding-left: 8px; padding-right: 8px; } }

/* ===== Barra de las listas más compacta: acciones a la vista + «Más ▾» (parte G) =====
   Las acciones de la pantalla vuelven a la misma fila que la búsqueda y los filtros: a la vista la principal y el resto en un menú «Más ▾». */
.lc-mas { position: relative; display: inline-block; }
.lc-mas > summary { list-style: none; cursor: pointer; user-select: none; }
.lc-mas > summary::-webkit-details-marker { display: none; }
.lc-mas[open] > summary { background: var(--gray-100); }
.lc-mas-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.lc-mas-menu .usr-btn { width: 100%; justify-content: flex-start; text-align: left; border: 0; background: transparent; box-shadow: none; white-space: nowrap; }
.lc-mas-menu .usr-btn:hover { background: var(--gray-50); }
/* Junto a las pestañas: «+ Nuevo» es el único verde sólido; Carga masiva, Excel, etc. son botones secundarios (traen color propio en línea, por eso !important). */
#vista-admin .admin-acciones .btn-grande:not(#btn-nuevo-admin) { background: #fff !important; color: var(--fg-1) !important; border: 1px solid var(--border-strong) !important; }
#vista-admin .admin-acciones .btn-grande:not(#btn-nuevo-admin):hover:not(:disabled) { background: var(--gray-50) !important; }