/* Interfaz nueva (mockup de la reestructura): administracion
   Lo que ve Administración (Control): Resultados, Indicadores, Pedidos y despacho, Inventarios, Plan, Costos, Personas y
   Ajustes. Todo va bajo .adm (la caja de cada pantalla), para no tocar lo que ven los otros roles.
   Mockup: datos/diseno/mockup-reestructura/administracion.html (ids a-…). */

/* ── La columna al centro en el computador, con el título y las cifras encima (como el mockup) ── */
main > .adm { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; min-width: 0;
              display: flex; flex-direction: column; gap: 16px; }
main > .adm > * { margin-top: 0; margin-bottom: 0; }
main > .adm.angosta { max-width: 880px; }
@media (min-width: 900px) {
  main:has(> .adm) > :is(.titulo-pagina, .sub-pagina, .cifras-pc) { max-width: 1000px; margin-left: auto; margin-right: auto; }
  main:has(> .adm.angosta) > :is(.titulo-pagina, .sub-pagina, .cifras-pc) { max-width: 880px; }
  /* Las cifras en blanco, como el resumen del mockup (en el celular siguen en el encabezado oscuro) */
  main:has(> .adm) > .cifras-pc { margin-top: 2px; margin-bottom: 16px; }
  main:has(> .adm) > .cifras-pc .cifras { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
  main:has(> .adm) > .cifras-pc .cifras > div { padding: 10px 14px; }
  main:has(> .adm) > .cifras-pc .cifras > div + div { border-left-color: var(--linea); }
  main:has(> .adm) > .cifras-pc .cifras small { color: var(--suave); }
  main:has(> .adm) > .cifras-pc .cifras b, main:has(> .adm) > .cifras-pc .cifras b.marca { color: var(--tinta); font-size: 20px; }
  main:has(> .adm) > .cifras-pc .cifras b.neg { color: var(--error); }
}
/* Dentro de .adm las cajas propias de cada módulo no ponen su propio ancho */
.adm > :is(.res, .costos, .inf-tiendas, .dif-control, .personas, .plan-mes) { max-width: none; }

/* ── La frase de qué hacer, chica, sobre la lista (una sola línea) ── */
.adm-frase { font-size: 13.5px; color: var(--suave); line-height: 1.45; }
.adm-frase a { font-weight: 700; color: var(--marca-fuerte); }

/* ── Un título de grupo con su ayuda chica a la derecha (como «Cumplimiento de venta · venta contra la meta») ── */
.adm-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 -6px !important; }
.adm-t h2 { margin: 0; font-size: 16px; }
.adm-t > span { font-size: 13px; color: var(--suave); }

/* ── La lista pareja: nombre a la izquierda, la cifra grande y el estado (pill) a la derecha ── */
.adm-lista { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea);
             border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tarjeta > .adm-lista { border: 0; border-radius: 0; box-shadow: none; }
.adm-f { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 11px 18px; border-top: 1px solid var(--linea);
         color: var(--tinta); text-decoration: none; }
.adm-lista > .adm-f:first-child, .adm-lista > li:first-child > .adm-f { border-top: 0; }
a.adm-f:hover { background: var(--gris-cab); color: var(--tinta); }
.adm-f .tx { flex: 1; min-width: 0; line-height: 1.35; }
.adm-f .tx b { display: block; font-weight: 700; font-size: 15px; }
.adm-f .tx small { display: block; font-size: 12.5px; color: var(--suave); }
.adm-f .der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.adm-f .der .v { font-family: var(--letra-titulos); font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-f .der .v.neg { color: var(--error); }
.adm-f .der .fila-p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.adm-f .estado { flex: none; }
.adm-f .ir-f { flex: none; color: var(--tenue); font-size: 20px; line-height: 1; }
.adm-vacio { padding: 18px; text-align: center; color: var(--suave); font-size: 14px; }

/* ── Lo que explica cómo se calcula: plegado, para que no tape la pantalla ── */
.adm-como { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.adm-como > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px;
                      padding: 12px 18px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.adm-como > summary::-webkit-details-marker { display: none; }
.adm-como > summary::after { content: "›"; color: var(--suave); font-size: 18px; transition: transform .15s; }
.adm-como[open] > summary::after { transform: rotate(90deg); }
.adm-como > summary:hover { background: var(--gris-cab); border-radius: var(--radio); }
.adm-como > .adm-como-tx { padding: 0 18px 14px; font-size: 13.5px; color: var(--suave); line-height: 1.5; }
.adm-como > .adm-como-tx p { margin: 0 0 8px; }
.adm-como > :is(.tarjeta, section, ul, div):not(.adm-como-tx) { border-top: 1px solid var(--linea); }
.adm-como .tarjeta { border: 0; border-radius: 0; box-shadow: none; }

/* ── El celular: la lista sigue pareja, la cifra baja un poco ── */
@media (max-width: 600px) {
  main > .adm { gap: 14px; }
  .adm-f { padding: 10px 14px; gap: 10px; }
  .adm-f .der .v { font-size: 16px; }
}

/* ── Resultados · P&L (a-res-pl): el mes y la lectura de Odoo en una sola fila ── */
.adm-pl-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.adm-pl-cab .res-elegir { margin: 0; }
.adm-pl-cab .res-leido { flex: 1 1 360px; justify-content: flex-end; margin: 0; }
.adm .res-cols > .adm-como { padding: 0; }
.adm .res-cuenta li { grid-template-columns: 28px minmax(120px, 1fr) minmax(0, max-content); }
.adm .res-cuenta li .v { white-space: normal; }

/* ── Indicadores · Tiendas (a-ind-tiendas) ── */
.adm.indicadores .adm-f .v.bien { color: var(--ok); } .adm.indicadores .adm-f .v.medio { color: var(--alerta); } .adm.indicadores .adm-f .v.mal { color: var(--error); }
.adm.indicadores .adm-f .der small { font-size: 12px; }
@media (min-width: 900px) { .adm .ind-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Pantallas con tablas anchas (Pedidos de las tiendas): la columna crece ── */
main > .adm.ancha { max-width: 1240px; }
@media (min-width: 900px) { main:has(> .adm.ancha) > :is(.titulo-pagina, .sub-pagina, .cifras-pc) { max-width: 1240px; } }
.adm-pedidos .hist-cuenta { margin: 0 0 -6px; }

/* ── Costos · Resumen (a-cos) ── */
.adm.cos .adm-f .estado { min-width: 0; }
.adm.cos .adm-f .der .v { min-width: 34px; }
.adm.cos .prov { padding: 1px 7px; border-radius: 999px; background: var(--alerta-suave); color: var(--alerta); font-weight: 700; font-size: 12px; }

/* ── Personas (a-personas): la frase y «Agregar persona» en una fila; lista pareja ── */
.adm-per-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.adm-per-cab .adm-frase { flex: 1 1 320px; margin: 0; }
.adm .personas-agregar { position: static; align-self: auto; }
.principal > main:has(.personas-control.adm) .titulo-pagina { padding-right: 0; }
.adm .personas-lista .personas-grupo h2 { background: var(--papel); }
.adm .personas-lista .persona-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@media (min-width: 900px) {
  .adm .personas-lista .personas li { grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.6fr) 330px; }
  .adm .personas-lista .persona-cab { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ── Resultados: en las listas chicas, el nombre no se encoge a cero cuando el número todavía espera ── */
.adm .res-lista > li > span:first-child { min-width: 96px; }
.adm .res-lista > li > .nb { white-space: normal; text-align: right; }