/* Reportes con el estándar de diseño (8-nov-2026). Va al final de todas las hojas de estilo. Esquinas de 8 px (se acabaron las hojitas y las píldoras), secciones planas,
   sin tarjetas con borde, y lo que tiene muchos campos en una ventana. Se prueba en 1366×768, 1920×1080, 2560×1440, tableta, celular y reloj. */

/* ---------- 1. Etiquetas: la pantalla es la vista previa; los campos van en una ventana ---------- */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-cuerpo { display: block; max-width: none; } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-cuerpo > .etq-lado { min-width: 0; } */
.etq-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.etq-barra .btn { min-height: 38px; }
.etq-barra-res { min-width: 0; color: var(--tinta-suave); font-size: .92rem; }
.etq-barra-res .etq-resumen { margin: 0; }
.etq-velo { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(0, 0, 0, .55); }
.etq-abierto > .etq-velo { display: block; }
.etq-modal { display: none; }
html body .etq-modal.abierta { display: block; position: fixed; z-index: 601; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh / var(--z, 1) - 40px);
  overflow: auto; margin: 0; padding: 0 22px 20px; background: var(--papel-2, #17201e); border: 1px solid var(--regla); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.etq-modal-cab { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 12px; margin-bottom: 14px; background: var(--papel-2, #17201e); border-bottom: 1px solid var(--regla); }
.etq-modal-cab h2 { margin: 0; font-size: 1.05rem; }
.etq-modal-cuerpo, .etq-modal-cuerpo > div:not(.rejilla-2), .etq-modal-cuerpo fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 18px; align-content: start; min-width: 0; }
.etq-modal-cuerpo > div:not(.rejilla-2), .etq-modal-cuerpo fieldset { grid-column: 1 / -1; }
.etq-modal-cuerpo > div:empty { display: none; }
.etq-modal-cuerpo fieldset { border: 0; border-top: 1px solid var(--regla); border-radius: 0; background: none; padding: 14px 0 0; margin: 0; }
.etq-modal-cuerpo legend { grid-column: 1 / -1; padding: 0; margin: 0 0 2px; float: none; width: auto; font-size: .82rem; font-weight: 700; color: var(--tinta-suave); }
.etq-modal-cuerpo .campo { margin: 0; }
.etq-modal-cuerpo > h3 { display: none; }
.etq-modal-cuerpo .rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) {
  html body .etq-modal.abierta { width: calc(100% - 16px); max-height: calc(100dvh / var(--z, 1) - 16px); padding: 0 14px 16px; }
  .etq-modal-cuerpo, .etq-modal-cuerpo > div:not(.rejilla-2), .etq-modal-cuerpo fieldset { grid-template-columns: minmax(0, 1fr); }
}

/* La vista previa: etiquetas pegadas a la izquierda (no regadas en una sola fila ancha) y más grandes en pantallas grandes */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .dir-cajas { justify-content: flex-start; gap: 14px; } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) @media (min-width: 1700px) { .dir-cajas, .dir-prev { zoom: 1.15; } } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) @media (min-width: 2200px) { .dir-cajas, .dir-prev { zoom: 1.35; } } */

/* Pestañas y botones de las pantallas de etiquetas e informes: esquinas de 8 px, sin hojitas ni píldoras */
.etq-tabs button, .inf-pest, .inf-volver, .dir-vista-tog button, .etq-barra .btn, .etq-modal-cab .btn { border-radius: 8px; }

/* ---------- 2. Ajuste de hoja: una lista (un renglón por tipo) y su ventana ---------- */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hojas { display: block; } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hojas > .tarjeta:first-child { max-width: 320px; padding: 0; border: 0; background: none; box-shadow: none; } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hojas-lista { display: grid; margin-top: 16px; border-top: 1px solid var(--regla); } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hoja-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--regla); } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hoja-fila b { display: block; font-weight: 650; } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hoja-fila small { display: block; margin-top: 2px; color: var(--tinta-suave); } */
/* (apagado 11-nov: Etiquetas vuelve a como estaba) .etq-hoja-fila .btn { flex: none; } */

/* ---------- 3. Informes: el Centro en renglones planos; las opciones de cada informe sin tarjetas con borde ---------- */
.inf-inicio { gap: 14px; }
.inf-items { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 0 36px; }
.inf-item { height: auto; min-height: 0; padding: 12px 54px 12px 8px; border: 0; border-bottom: 1px solid var(--regla); border-radius: 0; background: none; box-shadow: none; transform: none; }
.inf-item:hover, .inf-item:focus-visible { background: color-mix(in srgb, var(--oro) 8%, transparent); border-bottom-color: var(--regla); transform: none; }
.inf-item small { -webkit-line-clamp: 2; }
.inf-items .mega-fav { top: 10px; right: 8px; border-radius: 6px; }
.inf-pestanas { gap: 8px; padding: 2px 0 8px; }
.inf-pest { min-height: 40px; padding: 0 14px; }
.inf-pest:hover { transform: none; }
.inf-pest[aria-selected=true] { box-shadow: none; }
.inf-pest span { border-radius: 6px; }

.inf-pagina .inf-grupo, .inf-vent .inf-grupo { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--regla); border-radius: 0; background: none; }
.inf-pagina .inf-grupo.inf-g-filtros, .inf-vent .inf-grupo.inf-g-filtros { padding-top: 0; border-top: 0; }
.inf-pagina .inf-grupo legend, .inf-vent .inf-grupo legend { margin: 0 0 10px; color: var(--tinta-suave); font-size: .82rem; font-weight: 700; letter-spacing: 0; }
:root[data-tema="oscuro"] .inf-pagina .inf-grupo legend { color: var(--tinta-suave); }
.inf-pagina form, .inf-vent form { display: grid; gap: 16px; }
.inf-pagina .inf-fila, .inf-vent .inf-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 28px; }
.inf-pagina .inf-rejilla, .inf-vent .inf-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px 24px; }
.inf-pagina .campo, .inf-vent .campo { margin: 0 0 8px; }
.inf-vent-caja { border-radius: 8px; }
.inf-vent .btn, .inf-acciones .btn { border-radius: 8px; }

/* Página de un informe con muchos campos: los botones van arriba, junto al título (no abajo donde hay que buscarlos) */
.inf-pagina { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab acc" "forma forma"; column-gap: 20px; }
.inf-pagina > .cabecera { grid-area: cab; }
.inf-pagina > form { grid-area: forma; }
.inf-pagina > .inf-acciones { grid-area: acc; align-self: end; justify-content: flex-end; padding: 0 0 6px; }
.inf-acciones .btn { min-height: 40px; padding: 0 18px; }
@media (max-width: 900px) { .inf-pagina { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "acc" "forma"; } .inf-pagina > .inf-acciones { justify-content: flex-start; } }

/* Pestañas y filtros de periodo («Hoy», «Esta semana», «7 días»…) de las pantallas de reportes: esquinas de 8 px, sin brillo ni movimiento */
#vista:has(.rep-pantalla, .etq-tabs, .inf-inicio, .inf-pagina) .filtros button { border-radius: 8px; box-shadow: none; }
#vista:has(.rep-pantalla, .etq-tabs, .inf-inicio, .inf-pagina) .filtros button:hover { transform: none; }

/* Pantalla «Reportes» en monitores grandes: la tabla no se estira a todo el ancho (con pocas columnas, el número quedaba a cientos de píxeles de su fecha y no se leía) */
@media (min-width: 2000px) { html body.diseno-std #vista:has(.rep-pantalla) > * { max-width: 1760px; margin-inline: 0; } }

/* Ventana de opciones de un informe: del alto de su contenido (nunca más alta que la pantalla); la «ancha» de toda la altura es de las vistas previas */
html body .inf-vent-caja.opciones { width: min(1040px, 100%); height: auto; max-height: calc(100dvh / var(--z, 1) - 32px); }
html body .inf-vent-caja.opciones > .inf-vent-cuerpo { overflow: auto; }

/* ---------- 4. Utilidades: lista plana y ventanas de pocos campos ---------- */
.ut-lista { max-width: 1400px; }
html body .inf-vent-caja.opciones.ut-vent { width: min(860px, 100%); }
.inf-vent-caja > footer:empty { display: none; }
.inf-vent-caja.ut-vent .inf-vent-cuerpo > #ut-cuerpo > :first-child { margin-top: 0; }
.inf-vent-caja.ut-vent .bloque { padding: 0; border: 0; background: none; box-shadow: none; }
.ped-sin summary { cursor: pointer; }
.ped-sin-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 2px 24px; margin: 8px 0; padding: 0; list-style: none; max-height: 180px; overflow: auto; font-size: .86rem; color: var(--tinta-suave); }
.ped-sin-lista li { min-width: 0; overflow-wrap: anywhere; padding: 1px 0; }

/* Asistente: las sugerencias parten su texto en renglones en vez de ensanchar el chat (en 360 px una pasaba de 400 px y salía barra de lado) */
.asist-rel, .asist-rel .asist-chip, #asist-mensajes .asist-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }