/* HODOM sobre la línea gráfica «Interfaz de apps» (web/marca). Sólo disposición y piezas propias. */

html { background: var(--ui-fondo); }
body.ui { min-height: 100vh; }
.ui p { margin: 0; }
.ui b { font-weight: 600; }
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Marco: barra lateral negra y contenido en papel; en el teléfono, barra inferior. */
.marco { display: flex; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--capa-lateral); }
.marca { display: flex; align-items: center; gap: 8px; padding: 4px 10px 14px; color: var(--papel); font: 600 13px/18px var(--font-sans); }
.marca-trazo { fill: none; stroke: var(--papel); }
.marca-punto { fill: var(--punto-noche); }
.marca-trazo-papel { fill: none; stroke: var(--violeta-vivo); }
.marca-punto-papel { fill: var(--punto); }
:root[data-tema="negro"] .marca-trazo-papel { stroke: var(--papel); }
:root[data-tema="negro"] .marca-punto-papel { fill: var(--punto-noche); }
.lateral .salir { margin: 0; }
.lateral .salir button { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--ui-alto-control); padding: 0 10px; border: 0; border-radius: var(--radio-control); background: transparent; color: var(--bruma); font: 500 13px/18px var(--font-sans); cursor: pointer; text-align: left; }
.lateral .salir button:hover { background: var(--ui-lateral-activo); }
.contenido { flex: 1; min-width: 0; padding: 16px 24px 48px; }
.barra-inferior { display: none; }
.menu-movil > summary { display: grid; justify-items: center; gap: 2px; min-height: var(--ui-alto-tactil); padding-top: 4px; color: var(--bruma); font: 500 10px/14px var(--font-sans); }
.menu-movil[open] > summary { color: var(--papel); }
.menu-movil-panel { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); right: 12px; left: 12px; max-height: 70dvh; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 12px; border: 1px solid var(--ui-separador); }
.barra-inferior .menu-movil-panel a, .menu-movil-panel button { display: flex; align-items: center; min-height: var(--ui-alto-tactil); padding: 8px 12px; border: 0; border-radius: var(--radio-control); background: transparent; color: var(--ui-texto); font: 500 14px/20px var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.barra-inferior .menu-movil-panel a[aria-current="page"], .menu-movil-panel :is(a,button):hover { background: var(--ui-apoyo); color: var(--ui-texto); }
.barra-inferior .menu-movil-panel a[aria-current="page"]::after { display: none; }
.menu-movil-panel form { grid-column: 1 / -1; margin: 4px 0 0; border-top: 1px solid var(--ui-separador); padding-top: 4px; }
.menu-movil-panel form button { width: 100%; }
.menu-movil > summary:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; border-radius: var(--radio-control); }

@media (max-width: 639px) {
  .lateral { display: none; }
  .barra-inferior { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--capa-lateral); }
  .contenido { padding: 12px 16px 96px; }
}

/* Cabecera de la vista: título, día, estado y una acción principal. */
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-separador); }
.cabecera-fecha { display: flex; align-items: center; gap: 4px; }
.cabecera-fecha .ui-titulo::first-letter { text-transform: uppercase; }
.cabecera-fecha .ui-tabs { margin-left: 8px; }
.cabecera-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aviso-pagina { margin-bottom: 12px; }
.marca-exito { background: var(--estado-exito); }
.marca-error { background: var(--estado-error); }
.vacio { padding: 8px 0; }
.vacio-dia { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 64px 16px; }
.texto-literal { white-space: pre-wrap; overflow-wrap: anywhere; }
.reporte-indicadores { table-layout: fixed; width: 100%; min-width: 760px; }
.reporte-indicadores :is(th,td) { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.reporte-actividad th:first-child { width: 230px; }
.reporte-actividad th:nth-child(2) { width: 72px; }
.reporte-actividad th:nth-child(3) { width: 170px; }

/* Publicar: panel flotante bajo el botón. */
.publicar { position: relative; }
.publicar-panel { position: absolute; right: 0; top: calc(var(--ui-alto-control) + 8px); width: min(340px, 90vw); padding: 16px; display: grid; gap: 12px; z-index: var(--capa-menu); }

/* Lo que hay que resolver, primero. */
.problemas { display: grid; gap: 6px; margin-bottom: 16px; }
.problema { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radio-control); background: var(--ui-apoyo); color: var(--ui-texto); text-decoration: none; }
.problema:hover { background: var(--ui-apoyo-fuerte); }
.problemas-revisar { display: grid; gap: 6px; }
.problemas-revisar[open] summary { margin-bottom: 6px; }

/* Tablero: por programar a la izquierda, salidas a la derecha. */
.tablero { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .tablero { grid-template-columns: minmax(0, 1fr); } }
.columna-titulo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.columna-pendientes { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 1023px) { .columna-pendientes { position: static; max-height: none; } }
.pendiente { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--ui-separador); }
.asignar { display: flex; gap: 8px; margin-top: 4px; }
.asignar .ui-select, .asignar .ui-input { flex: 1; min-width: 0; }

.movil { border: 1px solid var(--ui-separador); border-radius: var(--radio-tarjeta); padding: 12px 16px; margin-bottom: 16px; }
.movil-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.km { font: 520 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.salida { border-top: 1px solid var(--ui-separador); margin-top: 10px; padding-top: 10px; }
.salida-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.salida-equipo { font-weight: 550; }
.visitas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.visita { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 0; }
.visita-n { width: 22px; height: 22px; }
.visita-hora { color: var(--ui-texto); padding-top: 3px; }
.visita-cuerpo { display: grid; gap: 4px; min-width: 0; }
.visita-mover { display: flex; gap: 2px; }
.atencion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.atencion form { margin: 0; }
.fuera { color: var(--ui-texto); font-weight: 600; }
.fuera::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--estado-error); margin-right: 6px; vertical-align: middle; }
.editar { margin-top: 8px; }
.editar > summary { padding: 4px 0; }
.form-salida, .form-movil { display: grid; gap: 12px; max-width: var(--ui-columna); padding: 8px 0 12px; }
.form-movil { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.form-movil .ui-fila-h { grid-column: 1 / -1; }
.equipo { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.equipo legend { margin-bottom: 4px; }

/* Equipo del día. */
.personas { margin-top: 32px; }
.tabla-desliza { overflow-x: auto; }
.horas { display: flex; align-items: center; gap: 4px; margin: 0; }
.horas .ui-input { flex: 1; min-width: 0; }
.persona-ajustar { text-align: right; }
.ajustar-panel { width: min(360px, calc(100vw - 32px)); padding: 16px; text-align: left; }
.ajustar-panel:popover-open { display: grid; gap: 16px; }

/* Bandejas. */
.bandeja { margin-bottom: 32px; max-width: 760px; }
.bandeja-item { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--ui-separador); }
.ajustes-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.barra-inferior { overflow-x: auto; }
.resultado-texto { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

/* Ingreso. */
.ingreso-caja { max-width: 360px; margin: 12vh auto 48px; padding: 0 16px; display: grid; gap: 24px; }
.ingreso-marca { display: flex; align-items: center; gap: 10px; }
.ingreso-form { display: grid; gap: 16px; }
.cuentas-lab { display: grid; gap: 8px; }
.cuentas-lab ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cuentas-lab li { display: flex; align-items: center; gap: 8px; }
.aviso-pagina, .aviso-pagina p { max-width: 760px; }
main.aviso-pagina { max-width: 480px; margin: 20vh auto; padding: 0 16px; display: grid; gap: 16px; font: 400 15px/22px var(--font-sans); }

/* Hoja de ruta diaria: se imprime y se firma. */
.hoja { max-width: 960px; display: grid; gap: 16px; }
.hoja-tabla td { vertical-align: top; white-space: normal; height: auto; padding: 8px 12px; }
.hoja-lugares { margin: 0; padding-left: 18px; }
.hoja-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; }
.hoja-firmas div { border-top: 1px solid var(--ui-texto); padding-top: 6px; text-align: center; }

@media print {
  .lateral, .barra-inferior, .editar, form, .problemas, [data-imprimir] { display: none !important; }
  .contenido { padding: 0; }
}