/*
 * shell.css
 * =========
 * Se carga desde panel/tircloud_panel/templates/base.html (línea 13), que es
 * la plantilla base que envuelve TODAS las páginas autenticadas del panel
 * (dashboard, proyectos, resumen, etc. -- todo lo que hereda de base.html).
 *
 * Este archivo estiliza el "shell" (armazón) de la aplicación autenticada:
 *   - la barra lateral de navegación (.app-sidebar) y su versión colapsada,
 *   - el panel de ayuda fijo al fondo de la barra lateral (.sidebar-help),
 *   - el botón para colapsar/expandir la barra lateral,
 *   - el desplazamiento del contenido (topbar, <main>, <footer>) para dejar
 *     hueco a la barra lateral fija,
 *   - la navegación alternativa para móvil (<details> desplegable),
 *   - el interruptor para ocultar el panel de "actividad reciente" dentro
 *     del workspace de un proyecto,
 *   - los breakpoints responsivos que colapsan todo lo anterior en pantallas
 *     angostas.
 *
 * Los atributos `[data-sidebar]` y `[data-activity]` los pone panel/
 * tircloud_panel/static/theme.js sobre <html> cuando el usuario colapsa la
 * barra lateral o el panel de actividad; el valor se persiste en
 * localStorage bajo las claves "odoocrc-sidebar" y "odoocrc-activity" para
 * que la preferencia sobreviva a recargas de página.
 */

/* Contenedor de la barra lateral fija: ocupa toda la altura de la ventana,
   pegada a la izquierda, con transición de ancho para la animación de
   colapsar/expandir (ver [data-sidebar] más abajo). */
.app-sidebar{background:var(--surface);border-right:1px solid var(--line);bottom:0;display:flex;flex-direction:column;left:0;padding:23px 13px 18px;position:fixed;top:0;transition:width .15s ease;width:236px;z-index:20}
/* Logo/nombre del producto en la cabecera de la barra lateral. */
.app-sidebar .brand{font-size:16px;margin:0 7px 27px}
/* Ícono/imagotipo del logo. */
.app-sidebar .brand-mark{height:43px;margin-right:12px;width:43px}
/* Subtítulo pequeño bajo el nombre del producto (p. ej. entorno o versión). */
.app-sidebar .brand small{font-size:9px}
/* Lista de enlaces de navegación de la barra lateral, en columna. */
.app-sidebar nav{display:grid;gap:5px}
/* Cada enlace de navegación: fila con ícono + texto. */
.app-sidebar nav a{align-items:center;border-radius:9px;color:var(--muted);display:flex;font-size:13px;font-weight:680;gap:12px;min-height:43px;padding:9px 13px;text-decoration:none}
.app-sidebar nav a:hover{background:var(--hover);color:var(--text)}
/* Enlace de la sección actualmente activa: fondo con gradiente de marca y
   sombra suave para destacarlo del resto. */
.app-sidebar nav a.active{background:var(--brand-gradient);color:#fff;box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent)}
/* El ícono del enlace activo también pasa a blanco para que combine con el
   fondo de gradiente. */
.app-sidebar nav a.active .ui-icon{color:#fff}

/* Tarjeta de ayuda fija al final de la barra lateral (por encima del
   botón de colapsar): ícono a la izquierda ocupando dos filas + texto en
   dos líneas a la derecha, con un aviso opcional en la fila inferior. */
.sidebar-help{background:var(--surface);border:1px solid var(--line);border-radius:11px;display:grid;gap:3px 9px;grid-template-columns:auto 1fr;margin-top:auto;padding:13px}
.sidebar-help>.ui-icon{color:var(--primary);grid-row:1/3}
.sidebar-help div{display:grid}
.sidebar-help strong{font-size:11px}
.sidebar-help span{color:var(--muted);font-size:9px}
/* Aviso/etiqueta destacada que ocupa todo el ancho de la tarjeta de ayuda
   (p. ej. una promoción o alerta breve). */
.sidebar-help small{background:var(--primary-soft);border-radius:6px;color:var(--primary-text);font-size:9px;font-weight:700;grid-column:1/-1;margin-top:8px;padding:7px;text-align:center}

/* Botón para colapsar/expandir la barra lateral a modo icono-solo.
   Su estado persiste vía [data-sidebar] en <html> (ver theme.js). */
.sidebar-collapse-toggle{align-items:center;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:9px;margin:11px 0;min-height:37px;padding:8px 13px;text-align:left;width:100%}
.sidebar-collapse-toggle:hover{background:var(--hover);color:var(--text)}
/* La flecha del botón rota 180° por defecto (apunta "hacia adentro" en
   estado expandido); ver la regla dentro de [data-sidebar] para el giro
   inverso en estado colapsado. */
.sidebar-collapse-toggle .ui-icon{flex:none;transition:transform .15s ease;transform:rotate(180deg)}

/* Desplazamiento del contenido principal para dejar hueco a la barra
   lateral fija de 236px de ancho (barra expandida, escritorio). */
.topbar.authenticated{justify-content:flex-end;margin-left:236px;padding-left:24px;padding-right:24px;width:calc(100% - 236px)}
.topbar.authenticated .operator{margin-left:0}
.app-authenticated>main{margin-left:236px;max-width:none;padding-left:32px;padding-right:32px}
.app-authenticated>footer{margin-left:236px}

/* Navegación alternativa para pantallas angostas: un <details> que se abre
   como menú desplegable; oculto en escritorio (ver .mobile-navigation en la
   media query de max-width:900px más abajo, donde se hace visible). */
.mobile-navigation{display:none;position:relative}
/* Botón visible (el <summary> del <details>) que abre/cierra el menú. */
.mobile-navigation summary{align-items:center;border:1px solid var(--line);border-radius:8px;color:var(--text);display:flex;gap:7px;list-style:none;padding:7px 10px}
/* Oculta el triángulo nativo que los navegadores WebKit dibujan junto al
   <summary>, para no duplicarlo con el ícono propio. */
.mobile-navigation summary::-webkit-details-marker{display:none}
/* Panel desplegable del menú móvil: flotante, posicionado bajo el botón. */
.mobile-navigation nav{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:grid;left:0;min-width:210px;padding:7px;position:absolute;top:42px}
.mobile-navigation nav a{align-items:center;color:var(--text);display:flex;gap:9px;padding:9px;text-decoration:none}
.mobile-navigation nav a:hover{background:var(--hover);border-radius:6px;color:var(--primary-text)}

/* ============ Escritorio (>=901px): barra lateral colapsada a icono-solo ============
   Activo cuando <html> lleva el atributo [data-sidebar] (colapsada). */
@media(min-width:901px){
/* La barra lateral se reduce a un carril angosto de solo íconos. */
[data-sidebar] .app-sidebar{width:72px}
[data-sidebar] .app-sidebar .brand{justify-content:center;margin-right:0}
[data-sidebar] .app-sidebar .brand-mark{margin-right:0}
/* Oculta visualmente (pero mantiene accesible para lectores de pantalla)
   el texto de la marca y de cada enlace de navegación: técnica estándar de
   "recorte a 1px" en vez de display:none, para no romper la accesibilidad. */
[data-sidebar] .app-sidebar .brand span,[data-sidebar] .app-sidebar nav a span{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
[data-sidebar] .app-sidebar nav a{justify-content:center}
/* La tarjeta de ayuda no cabe en el carril angosto, así que se oculta por
   completo en modo colapsado. */
[data-sidebar] .sidebar-help{display:none}
[data-sidebar] .sidebar-collapse-toggle{justify-content:center}
/* Mismo truco de "recorte a 1px" para el texto del botón de colapsar. */
[data-sidebar] .sidebar-collapse-toggle span{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
/* Cancela el giro de 180° de la flecha: en modo colapsado apunta "hacia
   afuera" (sin rotar), indicando que al pulsar se vuelve a expandir. */
[data-sidebar] .sidebar-collapse-toggle .ui-icon{transform:none}
/* El contenido principal recalcula su desplazamiento para el carril de
   72px en vez de los 236px de la barra expandida. */
[data-sidebar] .topbar.authenticated{margin-left:72px;width:calc(100% - 72px)}
[data-sidebar] .app-authenticated>main{margin-left:72px}
[data-sidebar] .app-authenticated>footer{margin-left:72px}
}

/* Ícono de flecha del botón que oculta/muestra el panel de "actividad
   reciente" dentro del workspace de un proyecto (ver project.html línea
   1126, botón [data-activity-toggle]). */
.workspace-activity-toggle .ui-icon{transition:transform .15s ease}
/* En pantallas >=951px con el panel de actividad colapsado, el layout de
   dos columnas del workspace reduce la columna derecha a una franja
   angosta de 52px (solo el botón para volver a expandirla). */
@media(min-width:951px){[data-activity] .workspace-layout{grid-template-columns:minmax(0, 1fr) 52px}}
[data-activity] .workspace-activity{padding:11px 4px}
/* La cabecera del panel de actividad, colapsada, solo centra el botón de
   alternar (se elimina el borde inferior y el margen que tenía cuando
   mostraba título y controles). */
[data-activity] .workspace-activity>header{border-bottom:0;justify-content:center;margin-bottom:0;padding-bottom:0}
/* Oculta el título, los controles y el cuerpo del feed de actividad,
   dejando visible únicamente el botón para volver a expandir el panel. */
[data-activity] .workspace-activity-title,[data-activity] .workspace-activity-controls>span,[data-activity] .workspace-activity-body{display:none}
/* El botón de alternar, en estado colapsado, se destaca con el gradiente
   de marca para que sea fácil de encontrar y volver a abrir el panel. */
[data-activity] .workspace-activity-toggle{background:var(--brand-gradient);border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);color:#fff;padding:7px}
/* La flecha rota 180° para indicar que el panel está colapsado (apunta en
   sentido contrario al de expandido). */
[data-activity] .workspace-activity-toggle .ui-icon{transform:rotate(180deg)}

/* Respeta la preferencia de accesibilidad "reducir movimiento": anula
   todas las transiciones animadas de este archivo (colapso de barra
   lateral, giro de flechas). */
@media(prefers-reduced-motion:reduce){.app-sidebar,.sidebar-collapse-toggle .ui-icon,.workspace-activity-toggle .ui-icon{transition:none}}

/* ============ Tablet/móvil (<=900px): la barra lateral fija desaparece ============
   y se reemplaza por la navegación desplegable (.mobile-navigation). */
@media(max-width:900px){.app-sidebar{display:none}
.topbar.authenticated{height:56px;margin-left:0;padding:0 16px;width:100%}
.topbar.authenticated .mobile-navigation{display:block;margin-right:auto}
.app-authenticated>main{margin-left:0;padding-left:18px;padding-right:18px}
.app-authenticated>footer{margin-left:0}
.topbar.authenticated .operator{display:flex}
/* Fuerza la visibilidad/posicionamiento del menú desplegable móvil por
   encima de reglas más genéricas de la topbar (con !important) para
   garantizar que se superponga correctamente al resto del contenido. */
.mobile-navigation nav{display:grid!important;overflow:visible!important;position:absolute!important}
.mobile-navigation nav a{flex:none!important;padding:9px!important}
/* En móvil se oculta el segundo <span> de la identidad del operador (p.
   ej. el correo o rol, dejando solo el nombre) por falta de espacio. */
.operator-identity>span:last-child{display:none}
}

/* ============ Móvil muy angosto (<=480px) ============ */
@media(max-width:480px){.topbar.authenticated{gap:8px}
.topbar.authenticated .operator{gap:4px}
.link-button{padding:4px}
/* Oculta el texto del botón de navegación móvil, dejando solo su ícono,
   para ganar espacio horizontal. */
.mobile-navigation summary span{display:none}
}


/* El desplazamiento lateral sólo pertenece al contenido raíz de la página. */

/* Anula el ancho width:100% que .project-card>footer podría heredar de
   reglas genéricas de app.css, para que el pie de una tarjeta de proyecto
   dentro del área ya desplazada (.app-authenticated) ocupe todo el ancho
   disponible de su propio contenedor y no el de la página completa. */
.app-authenticated .project-card>footer{width:100%}
