@charset "utf-8";

/* =========================================================================
   Estilos para el panel de Navegación Mobile (admin) — feature TRAN-1325
   =========================================================================
   NOTA DE ESTRATEGIA: mismo criterio que menu-mobile.css — no se modifican
   los estilos globales del proyecto. Se usa !important en las clases propias
   (navegacion-mobile-*) solo donde sea necesario ganarle a:
     - h1..h6, p { padding-left: 15px } — empuja los headings y párrafos
     - .md-icon { display: inline-flex } — se preserva el tema, se ajusta
       únicamente el posicionamiento dentro de las celdas de la tabla
   ========================================================================= */

.navegacion-mobile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.navegacion-mobile-header h2 {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}

/* Celda de orden (flechas subir/bajar) — centrado */
.navegacion-mobile-col-orden {
	text-align: center !important;
	white-space: nowrap;
	vertical-align: middle !important;
}

/* Celda de solo lectura (título) — texto truncado con tooltip nativo */
.navegacion-mobile-col-titulo {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #555;
}

.navegacion-mobile-icon-placeholder {
	color: #bdbdbd;
}

/* Celda del selector de nivel de acceso */
.navegacion-mobile-col-access {
	min-width: 220px;
	vertical-align: middle !important;
}

.navegacion-mobile-access-field {
	margin: 0 !important;
}

/* El div interno .md-select (el que envuelve el input del selector) hereda un
   overflow:auto de Vue Material que hace aparecer barras de scroll (flechas
   arriba/abajo) dentro del control de acceso. Se fuerza overflow:hidden sobre
   ese div interno concreto — acotado a este field para no afectar otros selects
   de la app. El dropdown de opciones se renderiza en un overlay aparte, así que
   ocultar el overflow de este contenedor no corta la lista desplegable. */
.navegacion-mobile-access-field .md-select {
	overflow: hidden !important;
}

/* Celdas de los switches (habilitado/home) — centradas */
.navegacion-mobile-col-toggle {
	text-align: center !important;
	vertical-align: middle !important;
	white-space: nowrap;
}

/* Celda de acciones (botón "Editar contenido") — centrada, mismo criterio
   que .menu-mobile-col-acciones (pantalla vieja de menú mobile, ya eliminada
   como pantalla independiente; el estilo se preserva acá porque la acción
   de edición de contenido ahora vive embebida en esta pantalla). */
.navegacion-mobile-col-acciones {
	text-align: center !important;
	white-space: nowrap;
	vertical-align: middle !important;
}

/* Encabezados de tabla: neutralizar el padding-left:15px global heredado en th */
.navegacion-mobile-table th {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Alineación uniforme headers/celdas: mismo criterio base que menu-mobile.css
   (pantalla hermana) — centrado por defecto en th y td, sin excepciones por
   columna (todas, incluida Título, quedan centradas). !important necesario
   porque .mrb-table/estilos globales no definen text-align y el navegador
   por defecto centra los th pero alinea los td a la izquierda, generando la
   inconsistencia original que se corrige acá. */
.navegacion-mobile-table th,
.navegacion-mobile-table td {
	text-align: center !important;
	vertical-align: middle !important;
}

/* Columna Título: sin excepción de alineación — queda centrada como el
   resto de columnas (Orden, Acceso, Habilitado, Home, Acciones), heredando
   el centrado uniforme definido en el bloque base de arriba. El truncado
   por ellipsis (ver .navegacion-mobile-col-titulo más arriba) funciona
   igual con el texto centrado. */
.navegacion-mobile-table th:nth-child(2),
.navegacion-mobile-col-titulo {
	text-align: center !important;
}

.navegacion-mobile-footer-note {
	margin-top: 16px;
	font-size: 12px;
	color: #888;
	padding-left: 0 !important;
}

/* Contenedor de md-tabs (Navegación / Configuración del sistema) — separación respecto
   al header de la pantalla. El contenido interno de cada md-tab reutiliza las clases ya
   existentes de tabla/config-sistema sin estilos propios adicionales. */
.navegacion-mobile-tabs {
	margin-top: 8px;
}

/* =========================================================================
   Configuración del sistema — 7 flags + 3 textos de bienvenida (extensión
   TRAN-1325, feature configuracion-sistema-navegacion-mobile). Bloque
   visualmente separado de la tabla de ítems de navegación, mismo criterio
   de "card" ya usado por .menu-mobile-cau-seccion (borde + padding).
   ========================================================================= */

.navegacion-mobile-config-sistema {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 20px;
	margin-top: 32px;
}

.navegacion-mobile-config-sistema-titulo {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 8px !important;
}

.navegacion-mobile-config-sistema-titulo .md-icon {
	display: flex !important;
	justify-content: end !important;
	margin: 0 !important;
}

.navegacion-mobile-config-sistema-nota {
	font-size: 12px;
	color: #888;
	padding-left: 0 !important;
	margin-bottom: 16px !important;
}

.navegacion-mobile-config-flags {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.navegacion-mobile-config-textos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

/* =========================================================================
   Estilos de la vista de EDICIÓN DE CONTENIDO (Menu: tarifas/CAU/FAQ/canales
   de carga virtual) — migrados tal cual desde menu-mobile.css (pantalla
   independiente eliminada) al unificarse dentro de este mismo componente.
   Se preservan las mismas clases .menu-mobile-* para no reescribir el
   template de edición ni su experiencia visual/funcional.
   ========================================================================= */

/* Header de la vista edición: botón volver + título + botón eliminar */
.menu-mobile-edit-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.menu-mobile-edit-header h2 {
	margin-left: 12px;
	flex: 1;
	/* Neutralizar el padding-left:15px global — el espaciado con el botón
	   Volver lo gestiona el margin-left, no el padding heredado */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Botón "Eliminar contenido" en el header de edición: alineado a la derecha */
.menu-mobile-edit-delete-btn {
	margin-left: auto;
}

/* Ícono placeholder para íconos vacíos */
.menu-mobile-icon-placeholder {
	color: #bdbdbd;
}

/* Fila de campos generales en la vista edición */
.menu-mobile-fields-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.menu-mobile-fields-row .md-field {
	flex: 1;
	min-width: 200px;
}

/* Preview del ícono junto al input en edición */
.menu-mobile-icon-preview {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Ícono preview (junto al campo Ícono en la vista edición):
   display:flex + justify-content:end para que todos los glyphs (pricetag,
   desktop, etc.) queden bien alineados. color:#555 reproducido desde el
   inline style original de menu-mobile.js. */
.menu-mobile-preview-icono {
	display: flex !important;
	justify-content: end !important;
	margin-left: 8px !important;
	margin-right: 0 !important;
	color: #555;
}

/* Bloque de sección CAU */
.menu-mobile-cau-seccion {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 16px;
}

.menu-mobile-cau-seccion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

/* Bloque FAQ */
.menu-mobile-faq-item {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 12px;
}

.menu-mobile-faq-item-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.menu-mobile-faq-item-fields {
	flex: 1;
	margin-right: 12px;
}

/* Encabezados de sección en vista edición (h3 con ícono).
   Neutraliza el padding-left:15px global heredado en h1..h6 y alinea el
   glyph del ícono con display:flex + justify-content:end (misma solución
   confirmada para el resto de íconos de esta pantalla). */
.menu-mobile-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 8px !important;
}

.menu-mobile-section-title .md-icon {
	display: flex !important;
	justify-content: end !important;
	font-size: 20px !important;
	margin: 0 !important;
	align-self: center;
	flex-shrink: 0;
}

/* Botones de acción al pie de la vista edición */
.menu-mobile-edit-actions {
	margin-top: 24px;
}

/* =========================================================================
   Toggle de pestañas propio (Navegación / Configuración del sistema) —
   reemplaza <md-tabs>/<md-tab> de Vue Material. md-tabs gestionaba
   internamente el DOM del contenido de cada md-tab (lo mide/mueve para
   animar el indicador de pestaña activa); al tener contenido con v-if
   dentro de un md-tab, md-tabs intentaba leer `.parentNode` de un nodo ya
   desmontado y lanzaba una excepción que cortaba el cambio de pestaña
   ("Cannot read properties of null (reading 'parentNode')"). Se reemplaza
   por un toggle propio controlado por `tabActiva` en navegacion-mobile.js,
   estilizado acá para conservar el mismo look & feel de "viñetas" que
   tenía md-tabs.
   ========================================================================= */

/* Contenedor de la barra de pestañas propia: fila con riel inferior,
   emulando el borde que dibuja md-tabs debajo de los labels. */
.navegacion-mobile-tabs-propias {
	display: flex;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 0;
}

/* Botón de pestaña: sin fondo ni borde propio por defecto, tipografía y
   espaciado consistentes con el resto de labels de la pantalla. Se usa
   <button> nativo (no <md-button>) para no depender de ningún
   comportamiento adicional de Vue Material en el toggle. */
.navegacion-mobile-tab-btn {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 500;
	color: #757575;
	text-transform: uppercase;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.navegacion-mobile-tab-btn:hover {
	color: #3e4b53;
}

.navegacion-mobile-tab-btn:focus {
	outline: none;
}

/* Pestaña activa: color de acento del tema del sistema provincial (misma
   variable que usa Vue Material internamente, definida en el :root de cada
   css/style{sistema}.css — ej. --md-theme-default-primary: #2AB0E9 en
   Córdoba), con fallback fijo por si la variable no estuviera definida.
   Esto emula el indicador de color que dibujaba md-tabs debajo del label
   activo, pero sin la animación (trade-off aceptado del fix). */
.navegacion-mobile-tab-btn-activo {
	color: var(--md-theme-default-primary, #2196f3);
	border-bottom-color: var(--md-theme-default-primary, #2196f3);
}

/* Wrapper de contenido de cada pestaña — mismo margin-top que tenía
   .navegacion-mobile-tabs para no modificar el espaciado visual general
   de la pantalla respecto al header. */
.navegacion-mobile-tab-content {
	margin-top: 8px;
}

/* =========================================================================
   Ícono informativo por columna (th) — tooltip nativo (atributo title),
   mismo mecanismo de tooltip ya usado en esta pantalla (md-select de Acceso,
   md-switch de Home). Ícono pequeño y gris, sin competir visualmente con el
   texto del título de columna; cursor:help refuerza que hay información al
   hacer hover.
   ========================================================================= */
.navegacion-mobile-th-info {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	vertical-align: middle !important;
	margin-left: 4px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: #9e9e9e !important;
	cursor: help;
}

/* =========================================================================
   Contraste de los switches "Habilitado" y "Home" en estado OFF — antes
   quedaban sin color de track, indistinguibles sobre el fondo blanco de la
   tabla. Se agrega un gris visible al track y al thumb del estado no-checked,
   acotado a estas 2 columnas (.navegacion-mobile-col-toggle) para no afectar
   switches de otras secciones de esta misma pantalla (ej. los flags de
   "Configuración del sistema"). El estado checked (on) no se modifica.
   ========================================================================= */
.navegacion-mobile-col-toggle .md-switch:not(.md-checked) .md-switch-container {
	background-color: #bdbdbd !important;
}

.navegacion-mobile-col-toggle .md-switch:not(.md-checked) .md-switch-thumb {
	background-color: #eeeeee !important;
}

/* Estado OFF + disabled (switch "Home" sin imagen cargada en el ítem) — tono
   más apagado que el off habilitado, para reforzar visualmente que el
   control no es interactivo en ese caso. */
.navegacion-mobile-col-toggle .md-switch.md-disabled:not(.md-checked) .md-switch-container {
	background-color: #e0e0e0 !important;
}

.navegacion-mobile-col-toggle .md-switch.md-disabled:not(.md-checked) .md-switch-thumb {
	background-color: #f5f5f5 !important;
}