/*
 * documentation.css
 * -----------------
 * Cargado por: panel/tircloud_panel/templates/base.html (siempre, en la
 * cabecera común de toda la aplicación):
 *   <link rel="stylesheet" href=".../documentation.css">
 * Al estar en base.html se aplica en cualquier página del panel, pero sus
 * clases (.docs-*) solo se usan realmente en las vistas del centro de
 * documentación: el índice de categorías/documentos, el detalle de un
 * documento (con su tabla de contenido lateral) y elementos reutilizados
 * como el enlace de ayuda de la barra lateral (.sidebar-help).
 */

/* Contenedor general de cualquier pantalla de documentación: ancho máximo
   de 1240px con márgenes laterales de 24px, centrado en la página. */
.docs-shell{width:min(1240px,calc(100% - 48px));margin:34px auto 72px}/* Cabecera del índice de documentación y cabecera del detalle de un
   documento: título + descripción a la izquierda, badge de versión/estado
   a la derecha, alineados arriba en la misma fila. */
.docs-heading,.docs-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.docs-heading h1,.docs-detail-heading h1{margin:.25rem 0;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.docs-heading p,.docs-detail-heading p{margin:.35rem 0;color:var(--muted);max-width:760px}/* Píldora de versión del documento (.docs-version) y de estado -- p.ej.
   "actualizado"/"desactualizado" -- (.docs-status): mismo estilo base de
   badge redondeado con borde. */
.docs-version,.docs-status{display:inline-flex;white-space:nowrap;border:1px solid var(--border);border-radius:999px;padding:.45rem .75rem;background:var(--surface);color:var(--accent);font-weight:700}/* Modificador de color ámbar/advertencia para un badge de estado
   "desactualizado" (.docs-status.stale) o un texto marcado como obsoleto
   (.docs-stale) en cualquier parte de la página. */
.docs-status.stale,.docs-stale{color:var(--warning,#b7791f)}/* Barra de búsqueda del índice de documentación: campo de texto (más
   ancho), un selector de categoría, botón de buscar y enlace de limpiar,
   en una fila con fondo de tarjeta. */
.docs-search{display:grid;grid-template-columns:minmax(260px,1fr) 240px auto auto;align-items:center;gap:10px;margin:28px 0 18px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}/* Primer campo de la barra (el de búsqueda de texto) muestra un icono
   junto al input; el resto de controles (input/select/botón) comparten
   una altura mínima uniforme de 44px, y el enlace "Limpiar" solo define
   su padding de toque. */
.docs-search label:first-child{display:flex;align-items:center;gap:10px}.docs-search input,.docs-search select{width:100%;min-height:44px}.docs-search button{min-height:44px}.docs-search>a{padding:10px}/* Fila de "categorías rápidas" (breadcrumb visual de 6 accesos directos,
   p.ej. tipos de documento) mostrada como una única tarjeta dividida en 6
   columnas iguales, cada una separada por un borde vertical. */
.docs-path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:hidden;margin:18px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface)}/* Cada celda de la fila de categorías es un enlace: icono cuadrado a la
   izquierda (30px) y texto (título + subtítulo) a la derecha; sin
   subrayado y con borde derecho para separar cada celda. */
.docs-path a{display:grid;grid-template-columns:30px 1fr;gap:1px 8px;align-items:center;padding:14px;color:inherit;text-decoration:none;border-right:1px solid var(--border)}/* La última celda no lleva borde derecho (evita un borde extra al final
   de la fila); al pasar el mouse o enfocar con teclado, la celda se
   resalta con un tinte del color de acento. */
.docs-path a:last-child{border-right:0}.docs-path a:hover,.docs-path a:focus-visible{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}/* Icono de cada celda de categoría: ocupa las 2 filas del grid interno de
   la celda (título+subtítulo), centrado en un cuadrado con fondo de
   acento suave. */
.docs-path span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:800}/* Título (strong) y subtítulo (small, en color atenuado) de cada celda de
   categoría. */
.docs-path strong{font-size:.8rem}.docs-path small{color:var(--muted)}/* Fila con el conteo de resultados ("N documentos encontrados") entre la
   fila de categorías y la grilla de tarjetas de documentos. */
.docs-results{display:flex;justify-content:space-between;gap:16px;margin:22px 0;color:var(--muted)}/* El número de resultados en color de texto normal, contrastando con el
   resto de la frase (que hereda el color atenuado del contenedor). */
.docs-results strong{color:var(--text)}/* Cada sección/categoría de documentos en el índice: margen inferior para
   separarla de la siguiente, y scroll-margin-top para que, al saltar a
   ella por ancla, no quede pegada debajo de una cabecera fija. */
.docs-section{scroll-margin-top:24px;margin:0 0 34px}/* Cabecera de cada sección: icono (ver .docs-section-icon) + título +
   descripción en fila; el título no lleva margen propio, la descripción
   va en color atenuado y el "eyebrow" (categoría) en color de acento. */
.docs-section>header{display:flex;align-items:center;gap:13px;margin-bottom:14px}.docs-section>header h2{margin:0;font-size:1.35rem}.docs-section>header p{margin:.1rem 0;color:var(--muted)}.docs-section>header .eyebrow{margin:0;color:var(--accent)}/* Icono cuadrado (42x42) de la cabecera de sección, centrado, con fondo
   en tinte de acento. */
.docs-section-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}/* Grilla de tarjetas de documentos dentro de una sección: 3 columnas
   iguales. */
.docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}/* Tarjeta de un documento individual: columna flexible con altura mínima
   fija (190px) para que todas las tarjetas de una fila luzcan
   uniformes; transición suave de borde/sombra/desplazamiento al
   interactuar (ver regla :hover siguiente). */
.docs-card{display:flex;flex-direction:column;min-height:190px;padding:19px;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}/* Al pasar el mouse o enfocar la tarjeta: el borde cambia a color de
   acento, aparece sombra y la tarjeta se eleva 2px (efecto "flotante"). */
.docs-card:hover,.docs-card:focus-visible{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}/* Fila superior de la tarjeta (categoría a la izquierda, tiempo de
   lectura a la derecha), en texto pequeño y atenuado. */
.docs-card-top{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem}/* Etiqueta de categoría del documento (p.ej. "GUÍA", "REFERENCIA"): en
   mayúsculas, negrita y color de acento. */
.docs-category{color:var(--accent);font-weight:800;letter-spacing:.08em;text-transform:uppercase}/* Título del documento dentro de la tarjeta y su párrafo de resumen
   (color atenuado, interlineado cómodo de lectura). */
.docs-card h3{margin:.7rem 0 .35rem;font-size:1.08rem}.docs-card p{margin:0;color:var(--muted);line-height:1.5}/* Pie de la tarjeta (p.ej. autor/fecha a la izquierda, "Leer más" a la
   derecha): margin-top:auto lo empuja al fondo de la tarjeta flex,
   quedando alineado entre tarjetas de distinto contenido; el texto
   destacado del pie usa el color de acento. */
.docs-card footer{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;font-size:.75rem;color:var(--muted)}.docs-card footer strong{color:var(--accent)}/* Estado "sin resultados" de la búsqueda de documentos: tarjeta con borde
   discontinuo (dashed) y texto centrado. */
.docs-empty{padding:42px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:14px}/* Ruta de migas de pan (breadcrumb) en la vista de detalle de un
   documento (p.ej. "Documentación / Guías / Este documento"). */
.docs-breadcrumb{display:flex;gap:8px;margin-bottom:20px;color:var(--muted)}/* Barra de metadatos del documento en el detalle (p.ej. autor, versión,
   última actualización, tiempo de lectura): tarjeta dividida en 4
   columnas con separadores verticales entre cada dato; etiqueta (dt) en
   mayúsculas/atenuada y valor (dd) en negrita. */
.docs-metadata{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:26px 0;background:var(--surface);border:1px solid var(--border);border-radius:14px}.docs-metadata div{padding:15px 18px;border-right:1px solid var(--border)}.docs-metadata div:last-child{border-right:0}.docs-metadata dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.docs-metadata dd{margin:.35rem 0 0;font-weight:700;overflow-wrap:anywhere}/* Aviso de "documento pendiente de revisión" en el detalle: borde
   izquierdo grueso en color de advertencia (ámbar) con fondo teñido del
   mismo color, como las alertas de otras páginas del panel. */
.docs-review-warning{margin:18px 0;padding:14px 16px;border-left:3px solid var(--warning,#b7791f);background:color-mix(in srgb,var(--warning,#b7791f) 10%,var(--surface));border-radius:8px}/* Contenedor del contenido renderizado del documento (Markdown/HTML
   convertido): tarjeta con padding generoso que crece en pantallas
   grandes, interlineado amplio para facilitar la lectura. */
.docs-content{padding:clamp(22px,4vw,54px);background:var(--surface);border:1px solid var(--border);border-radius:14px;line-height:1.7;overflow-wrap:anywhere}/* Tipografía del contenido Markdown renderizado dentro de .docs-content:
   los h2 llevan un separador inferior (como una sub-sección de la
   página), los bloques de código (pre) tienen fondo propio y scroll
   horizontal, las citas (blockquote) llevan un borde izquierdo de acento,
   y los enlaces del cuerpo van subrayados en color de acento. */
.docs-content h1{font-size:2rem}.docs-content h2{margin-top:2.2rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)}.docs-content h3{margin-top:1.7rem}.docs-content pre{overflow:auto;padding:16px;border-radius:10px;background:var(--background);border:1px solid var(--border)}.docs-content code{font-size:.9em}.docs-content blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:3px solid var(--accent);color:var(--muted)}.docs-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}/* Pie de la vista de detalle (navegación "documento anterior/siguiente",
   redefinido con más detalle más abajo en .docs-detail-footer). El enlace
   de ayuda de la barra lateral (.sidebar-help, usado en la navegación
   global de base.html) hereda el color del texto circundante y solo
   resalta su borde al pasar el mouse/enfocar. */
.docs-detail-footer{margin-top:20px}.sidebar-help{text-decoration:none;color:inherit}.sidebar-help:hover,.sidebar-help:focus-visible{border-color:var(--accent)}
/* Envoltorio de cualquier tabla dentro del contenido Markdown: permite
   scroll horizontal propio para que una tabla ancha no rompa el layout
   de la página. La tabla en sí colapsa sus bordes (border-collapse) y
   las celdas de cabecera (th) llevan fondo distinto para diferenciarse
   del cuerpo. */
.docs-table-wrap{max-width:100%;overflow-x:auto;margin:1.25rem 0}.docs-content table{width:100%;border-collapse:collapse}.docs-content th,.docs-content td{padding:.7rem .8rem;text-align:left;border:1px solid var(--border)}.docs-content th{background:var(--background)}
/* Responsive (<=1100px): la fila de 6 categorías rápidas pasa a una
   grilla de 3 columnas x 2 filas; la 3ª celda (fin de la primera fila)
   pierde el borde derecho y las 3 primeras celdas ganan borde inferior,
   para que se vea como una cuadrícula 3x2 con separadores completos. */
@media(max-width:1100px){.docs-path{grid-template-columns:repeat(3,minmax(0,1fr))}.docs-path a:nth-child(3){border-right:0}.docs-path a:nth-child(-n+3){border-bottom:1px solid var(--border)}}
/* Responsive (<=980px): la grilla de tarjetas de documentos baja a 2
   columnas, y la barra de metadatos hace lo mismo (con el mismo truco de
   quitar el borde derecho de la 2ª celda y añadir borde inferior a las 2
   primeras, para simular una cuadrícula 2x2 completa). */
@media(max-width:980px){.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-metadata{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-metadata div:nth-child(2){border-right:0}.docs-metadata div:nth-child(-n+2){border-bottom:1px solid var(--border)}}
/* Responsive móvil (<=700px): márgenes laterales más pequeños; cabeceras
   y fila de resultados pasan de fila a bloque apilado; la barra de
   búsqueda y todas las grillas restantes (categorías, tarjetas,
   metadatos) colapsan a una sola columna, con bordes ajustados para que
   las celdas apiladas se vean como una lista con separadores
   horizontales en vez de una cuadrícula. */
@media(max-width:700px){.docs-shell{width:min(100% - 24px,1240px);margin-top:22px}.docs-heading,.docs-detail-heading,.docs-results{display:block}.docs-version,.docs-status{margin-top:12px}.docs-search{grid-template-columns:1fr}.docs-path{grid-template-columns:1fr}.docs-path a{border-right:0;border-bottom:1px solid var(--border)}.docs-path a:last-child{border-bottom:0}.docs-grid{grid-template-columns:1fr}.docs-metadata{grid-template-columns:1fr}.docs-metadata div{border-right:0;border-bottom:1px solid var(--border)}.docs-metadata div:last-child{border-bottom:0}.docs-content{padding:20px}.docs-card{min-height:170px}}
/* Accesibilidad: si el usuario prefiere movimiento reducido, se
   desactivan la transición y el desplazamiento (elevación) de las
   tarjetas de documento al interactuar. */
@media(prefers-reduced-motion:reduce){.docs-card{transition:none}.docs-card:hover{transform:none}}

/* Visual learning layer: diagrams remain accurate as the UI evolves.
 * (Comentario original del autor.) Este bloque amplía/ajusta la tarjeta
 * de documento definida arriba: añade un icono de categoría antes del
 * texto (.docs-card-icon), reordena .docs-card-top para que sus
 * elementos arranquen desde la izquierda en vez de repartirse en los
 * extremos, empuja el tiempo de lectura (.docs-time) al extremo derecho
 * con margin-left:auto, agrega el enlace "Abrir" (.docs-open) en color
 * de acento, y redefine el borde superior del pie de tarjeta con un tono
 * más sutil (color-mix con transparencia) que sustituye/complementa al
 * borde definido en la declaración anterior de ".docs-card footer". */
.docs-card-top{align-items:center;justify-content:flex-start}.docs-card-icon{display:grid;place-items:center;width:34px;height:34px;margin-right:2px;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,var(--surface));color:var(--accent)}.docs-time{margin-left:auto}.docs-open{display:flex;align-items:center;gap:3px;margin-top:14px;color:var(--accent);font-size:.78rem;font-weight:750}.docs-card footer{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
/* Cabecera del detalle de un documento: icono grande (54px) del
   documento junto a su título, y debajo una fila de "chips" con
   metadatos de lectura (tiempo estimado, autor, etc.), cada una como
   píldora con borde. */
.docs-detail-title{display:flex;align-items:flex-start;gap:15px}.docs-detail-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:15px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border))}.docs-reading-meta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.docs-reading-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.78rem}
/* Diagrama de pasos en línea insertado dentro de un documento ("Visual
   learning layer"): una fila con degradado suave de fondo que agrupa
   varios "pasos" (.docs-visual-step, cada uno con círculo numerado en
   color de acento + título + descripción truncada con puntos
   suspensivos) separados por un icono de flecha (.docs-visual>i, texto
   normal en vez de cursiva pese a ser un <i>, para poder poner ahí un
   glifo de flecha). */
.docs-visual{display:flex;align-items:stretch;gap:12px;padding:16px;margin:20px 0;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:15px}.docs-visual-step{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:12px;border-radius:11px;background:color-mix(in srgb,var(--surface) 88%,transparent)}.docs-visual-step>span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:850}.docs-visual-step div{display:grid;min-width:0}.docs-visual-step strong{font-size:.92rem}.docs-visual-step small{overflow:hidden;text-overflow:ellipsis;color:var(--muted);white-space:nowrap}.docs-visual>i{display:grid;place-items:center;color:var(--accent);font-style:normal}
/* Layout de "lectura" del detalle de un documento: columna angosta fija
   (220px) para el índice/tabla de contenido (.docs-outline) + columna
   flexible para el contenido. Si el documento no tiene tabla de
   contenido, .docs-content queda como único hijo y ocupa todo el ancho
   (:only-child). El índice queda "pegado" (sticky) al hacer scroll, con
   enlaces indentados según su nivel de encabezado (h3 vía .level-3) y
   resaltado de borde izquierdo + color de acento al pasar el mouse o
   enfocar. Debajo, se ajusta el interlineado del contenido dentro de
   este layout específico, se añade scroll-margin-top a los encabezados
   del contenido (para los enlaces del índice) y se redefine el pie de
   detalle (.docs-detail-footer, ya declarado antes de forma más simple)
   con la disposición final en fila. */
.docs-reading-layout{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:18px}.docs-reading-layout>.docs-content:only-child{grid-column:1/-1;width:100%}.docs-outline{position:sticky;top:20px;padding:17px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.docs-outline>strong{display:block;margin-bottom:10px}.docs-outline nav{display:grid;gap:2px}.docs-outline nav a{padding:7px 8px;color:var(--muted);text-decoration:none;border-left:2px solid transparent;font-size:.82rem;line-height:1.25}.docs-outline nav a:hover,.docs-outline nav a:focus-visible{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}.docs-outline nav a.level-3{padding-left:20px;font-size:.77rem}.docs-outline-back{display:block;margin-top:13px;padding-top:12px;border-top:1px solid var(--border);font-size:.78rem}.docs-reading-layout .docs-content{min-width:0;line-height:1.75}.docs-content h2,.docs-content h3{scroll-margin-top:24px}.docs-content h2:first-child{margin-top:0}.docs-detail-footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.82rem}
/* Responsive (<=980px) para el layout de lectura: el índice deja de ser
   una columna fija (pasa a una sola columna general) y deja de estar
   "sticky"; sus enlaces se reparten en 2 columnas para ocupar mejor el
   ancho horizontal. El diagrama de pasos (.docs-visual) se reorganiza en
   una grilla explícita de 5 columnas (paso, flecha, paso, flecha, paso)
   para controlar mejor el ancho de cada elemento en este punto de quiebre. */
@media(max-width:980px){.docs-reading-layout{grid-template-columns:1fr}.docs-outline{position:static}.docs-outline nav{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-visual{display:grid;grid-template-columns:1fr auto 1fr auto 1fr}}
/* Responsive móvil (<=700px) del detalle: pie apilado en bloque, icono
   del título del documento un poco más pequeño (44px), el diagrama de
   pasos pasa a una sola columna (los pasos quedan uno debajo del otro) y
   la flecha se rota 90 grados para apuntar hacia abajo en vez de hacia
   la derecha; los enlaces del índice vuelven a una sola columna. */
@media(max-width:700px){.docs-detail-footer{display:block}.docs-detail-title{align-items:center}.docs-detail-icon{flex-basis:44px;width:44px;height:44px}.docs-visual{display:grid;grid-template-columns:1fr;padding:12px}.docs-visual>i{transform:rotate(90deg)}.docs-outline nav{grid-template-columns:1fr}.docs-detail-footer span{display:block;margin-top:9px}}

/* Shared filter language with Usuarios. (Comentario original del autor:
 * este bloque reutiliza deliberadamente el mismo lenguaje visual de
 * botones de filtro que la página de usuarios/identidad, aunque las
 * clases tengan el prefijo "docs-" en vez de "identity-".) El botón
 * "Buscar" del formulario de búsqueda de documentación usa el color
 * primario en vez del de acento (--accent) usado en el resto de esta
 * hoja, con un oscurecimiento sutil en :hover y un anillo de foco propio
 * en :focus-visible; el enlace "Limpiar" es texto subrayado en color
 * atenuado que pasa a color primario al interactuar. */
.docs-filter-submit{min-height:44px;padding:9px 15px;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:#fff;font-weight:750;box-shadow:none}.docs-filter-submit:hover{background:color-mix(in srgb,var(--primary) 88%,#000);border-color:color-mix(in srgb,var(--primary) 88%,#000)}.docs-filter-submit:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 22%,transparent);outline-offset:2px}.docs-filter-clear{color:var(--muted);font-size:.8rem;text-decoration:underline;text-underline-offset:3px}.docs-filter-clear:hover,.docs-filter-clear:focus-visible{color:var(--primary-text)}
/* Responsive (<=700px): el botón de búsqueda ocupa el ancho completo y
   el enlace de limpiar se centra, para verse bien apilados en el
   formulario de una sola columna. */
@media(max-width:700px){.docs-filter-submit{width:100%}.docs-filter-clear{text-align:center}}
/* Figura con imagen ilustrativa embebida dentro del contenido de un
   documento (<figure class="docs-illustration">): marco con fondo teñido
   levemente de color primario, imagen contenida (object-fit:contain,
   nunca recortada) con altura máxima de 430px, y pie de figura
   (figcaption) centrado en texto pequeño y atenuado. La última regla
   reduce el margen superior de un <h2> que viene inmediatamente después
   de una ilustración, para que no quede un salto de espacio excesivo. */
.docs-illustration{margin:1.6rem 0 2rem;padding:12px;background:color-mix(in srgb,var(--primary) 4%,var(--surface));border:1px solid var(--border);border-radius:14px}.docs-illustration img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain;border-radius:9px}.docs-illustration figcaption{padding:10px 4px 1px;color:var(--muted);font-size:.78rem;text-align:center}.docs-illustration+ h2{margin-top:1.7rem}