/* =========================================================================== * Encuestas — Capa de identidad visual. * --------------------------------------------------------------------------- * · No usa Bootstrap / Material. Lenguaje propio: "Auditoría Editorial". * · Los tokens cromáticos (formato "R G B") se exponen a Tailwind v4 vía * `@theme inline` (ver static/css/tailwind.css). * · El atributo `data-theme` en selecciona una de las 4 paletas. * · Las curvas de motion, los radios y las fuentes se exponen también vía * tokens (--ease-fluid, --font-display, etc.) para mantener una sola * fuente de verdad. * ========================================================================= */ :root, [data-theme="crema"] { /* Crema — el tema por defecto (luz cálida). */ --crema-50: 251 247 242; --crema-100: 244 236 223; --crema-200: 234 223 206; --crema-300: 217 197 167; --terracota-50: 253 243 238; --terracota-100: 250 220 205; --terracota-200: 244 184 154; --terracota-300: 232 145 103; --terracota-400: 217 106 59; --terracota-500: 194 65 12; --terracota-600: 164 52 10; --terracota-700: 124 45 18; --tinta-50: 245 246 250; --tinta-100: 230 232 239; --tinta-200: 194 199 212; --tinta-300: 138 147 168; --tinta-400: 91 100 120; --tinta-500: 58 66 86; --tinta-600: 38 45 63; --tinta-700: 31 35 48; --ok: 21 128 61; --error: 185 28 28; --info: 14 116 144; /* Surface hierarchy: muted = page, alt = sidebar/header, surface = cards. */ --surface: 255 255 255; --surface-alt: 238 228 211; --surface-muted: 251 247 242; --text-on-surface: 31 35 48; --border: 224 210 188; } [data-theme="oscuro"] { /* Oscuro — "noche editorial": tinta profunda, acentos terracota luminosos. */ --crema-50: 14 17 26; --crema-100: 22 26 38; --crema-200: 31 35 48; --crema-300: 52 60 82; --terracota-50: 60 30 18; --terracota-100: 82 41 25; --terracota-200: 124 60 35; --terracota-300: 194 95 55; --terracota-400: 232 130 80; --terracota-500: 244 156 110; --terracota-600: 250 184 138; --terracota-700: 253 213 180; --tinta-50: 245 246 250; --tinta-100: 230 232 239; --tinta-200: 194 199 212; --tinta-300: 138 147 168; --tinta-400: 180 188 200; --tinta-500: 210 216 224; --tinta-600: 230 232 239; --tinta-700: 251 247 242; --ok: 134 239 172; --error: 252 165 165; --info: 103 232 249; --surface: 24 28 40; --surface-alt: 18 22 34; --surface-muted: 12 15 24; --text-on-surface: 230 232 239; --border: 52 60 82; } [data-theme="bosque"] { /* Bosque — fondo crema verdoso, acentos verde profundo. */ --crema-50: 244 248 243; --crema-100: 226 238 224; --crema-200: 200 220 198; --crema-300: 168 198 165; --terracota-50: 236 246 232; --terracota-100: 200 226 196; --terracota-200: 156 198 152; --terracota-300: 110 170 110; --terracota-400: 64 138 70; --terracota-500: 34 110 50; --terracota-600: 24 84 40; --terracota-700: 16 58 30; --tinta-50: 245 248 244; --tinta-100: 220 232 220; --tinta-200: 168 188 170; --tinta-300: 110 138 112; --tinta-400: 70 96 74; --tinta-500: 44 66 48; --tinta-600: 28 46 32; --tinta-700: 18 32 22; --ok: 21 128 61; --error: 185 28 28; --info: 14 116 144; --surface: 255 255 255; --surface-alt: 216 230 213; --surface-muted: 244 248 243; --text-on-surface: 18 32 22; --border: 196 212 192; } [data-theme="marino"] { /* Marino — fondo azul suave, acentos azul profundo. */ --crema-50: 242 247 252; --crema-100: 222 234 246; --crema-200: 195 217 235; --crema-300: 158 192 219; --terracota-50: 234 244 252; --terracota-100: 198 224 244; --terracota-200: 152 198 235; --terracota-300: 100 165 220; --terracota-400: 56 130 200; --terracota-500: 30 90 170; --terracota-600: 22 68 138; --terracota-700: 16 48 100; --tinta-50: 245 247 252; --tinta-100: 220 228 240; --tinta-200: 168 184 210; --tinta-300: 110 132 168; --tinta-400: 70 92 130; --tinta-500: 44 64 96; --tinta-600: 28 44 70; --tinta-700: 18 30 50; --ok: 21 128 61; --error: 185 28 28; --info: 14 116 144; --surface: 255 255 255; --surface-alt: 208 222 238; --surface-muted: 242 247 252; --text-on-surface: 18 30 50; --border: 195 215 232; } /* --------------------------------------------------------------------------- * Tipografía base + display + mono, resuelta con fuentes locales del sistema. * ------------------------------------------------------------------------- */ html { font-family: var(--font-sans); } /* Cabecera institucional de CMS Grau en el flujo externo. */ .cms-header { border-top: 1px solid rgb(var(--crema-200) / 0.7); border-bottom: 2px solid rgb(var(--terracota-500)); background: rgb(var(--surface) / 0.82); } .cms-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: 0.65rem 0.25rem; } .cms-header__logo { width: clamp(5.25rem, 18vw, 7.5rem); height: 3.35rem; flex: 0 0 auto; object-fit: contain; } .cms-header__copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; border-left: 1px solid rgb(var(--crema-200)); padding-left: 1rem; color: rgb(var(--tinta-500)); font-size: 0.66rem; line-height: 1.35; letter-spacing: 0.02em; } .cms-header__copy strong { color: rgb(var(--tinta-700)); font-size: 0.82rem; font-weight: 700; } @media (max-width: 30em) { .cms-header__inner { gap: 0.7rem; } .cms-header__copy { padding-left: 0.7rem; font-size: 0.58rem; } .cms-header__copy strong { font-size: 0.7rem; } } .font-display, .display { font-family: var(--font-display); font-feature-settings: "ss01", "ss02", "liga"; letter-spacing: -0.01em; } .font-mono { font-family: var(--font-mono); } /* Eyebrow tag: micro-título encima de un encabezado. */ .eyebrow { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: rgb(var(--terracota-600)); } /* Hairline rule: 1px con color border propio, sin ser agresivo. */ .hairline { border-color: rgb(var(--border) / 0.55); } /* --------------------------------------------------------------------------- * Grano de papel — overlay fijo de muy baja opacidad para dar textura. * Implementado con un SVG feTurbulence inline (sin archivo externo). Solo * fixed + pointer-events-none para no afectar performance de scroll. * ------------------------------------------------------------------------- */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; } [data-theme="oscuro"] body::before { opacity: 0.06; mix-blend-mode: screen; } /* Slider discreto de porcentaje para la evaluación interna. */ .evaluacion-range { --range-progress: 0%; appearance: none; height: 0.4rem; border-radius: 999px; background: linear-gradient( to right, rgb(var(--terracota-500)) 0 var(--range-progress), rgb(var(--crema-200)) var(--range-progress) 100% ); cursor: pointer; } .evaluacion-range::-webkit-slider-thumb { appearance: none; width: 1.15rem; height: 1.15rem; border: 3px solid rgb(var(--surface)); border-radius: 999px; background: rgb(var(--terracota-600)); box-shadow: 0 0 0 1px rgb(var(--terracota-500) / 0.35), 0 3px 10px rgb(var(--tinta-700) / 0.18); } .evaluacion-range::-moz-range-thumb { width: 0.8rem; height: 0.8rem; border: 3px solid rgb(var(--surface)); border-radius: 999px; background: rgb(var(--terracota-600)); box-shadow: 0 0 0 1px rgb(var(--terracota-500) / 0.35), 0 3px 10px rgb(var(--tinta-700) / 0.18); } .evaluacion-range:focus-visible { outline: 2px solid rgb(var(--terracota-500)); outline-offset: 5px; } .evaluacion-range:disabled { cursor: not-allowed; opacity: 0.55; } /* --------------------------------------------------------------------------- * Botones. * Patrón Button-in-Button: el botón es un pill con un círculo interno * (la flecha opcional) que se traslada y agranda en hover. Toda transición * usa --ease-fluid (cubic-bezier custom), nunca ease-in-out. * ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.05rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; border: 1px solid transparent; transition: background-color 320ms var(--ease-fluid), color 320ms var(--ease-fluid), border-color 320ms var(--ease-fluid), transform 320ms var(--ease-fluid), box-shadow 320ms var(--ease-fluid); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.1; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: rgb(var(--terracota-500)); color: #ffffff; box-shadow: 0 1px 0 rgb(var(--terracota-700) / 0.4), 0 8px 22px -12px rgb(var(--terracota-500) / 0.55); } .btn-primary:hover { background: rgb(var(--terracota-600)); box-shadow: 0 1px 0 rgb(var(--terracota-700) / 0.5), 0 14px 28px -14px rgb(var(--terracota-500) / 0.6); } .btn-ghost { background: rgb(var(--surface)); color: rgb(var(--tinta-600)); border-color: rgb(var(--border)); } .btn-ghost:hover { background: rgb(var(--crema-50)); color: rgb(var(--tinta-700)); } .btn-danger { background: transparent; color: rgb(var(--error)); border-color: rgb(var(--error) / 0.35); } .btn-danger:hover { background: rgb(var(--error) / 0.08); } /* Acción de corrección externa: rojo estable, independiente del tema activo. */ .btn-correction { background: #b91c1c; color: #ffffff; border-color: #b91c1c; box-shadow: 0 1px 0 rgb(127 29 29 / 0.55), 0 8px 22px -12px rgb(185 28 28 / 0.7); } .btn-correction:hover { background: #991b1b; border-color: #991b1b; box-shadow: 0 1px 0 rgb(127 29 29 / 0.65), 0 14px 28px -14px rgb(185 28 28 / 0.8); } .btn-correction:focus-visible { outline: 3px solid #ef4444; outline-offset: 3px; } /* Pregunta sin respuesta durante evaluación/corrección: no usa tokens del tema. */ .pregunta-badge--incompleta { background-color: #b91c1c; color: #ffffff; box-shadow: 0 0 0 2px rgb(185 28 28 / 0.16); } .btn-link { background: transparent; color: rgb(var(--terracota-600)); padding: 0.4rem 0.6rem; font-weight: 500; } .btn-link:hover { color: rgb(var(--terracota-700)); text-decoration: underline; text-underline-offset: 3px; } /* Botón grande para CTAs primarios de las pantallas de auth. */ .btn-lg { padding: 0.95rem 1.6rem; font-size: 0.95rem; letter-spacing: 0.01em; } /* Botón pequeño — para uso en cards o filas densas. */ .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; border-radius: 999px; } .btn-icon.btn-sm { width: 1.85rem; height: 1.85rem; } /* Trailing icon circular dentro del botón (Button-in-Button). */ .btn .btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgb(255 255 255 / 0.18); transition: transform 320ms var(--ease-fluid), background-color 320ms var(--ease-fluid); } .btn:hover .btn-arrow { transform: translate(2px, -2px) scale(1.06); background: rgb(255 255 255 / 0.28); } /* Icon buttons cuadrados. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; flex-shrink: 0; border-radius: 0.55rem; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--tinta-500)); cursor: pointer; text-decoration: none; transition: background-color 220ms var(--ease-fluid), color 220ms var(--ease-fluid), border-color 220ms var(--ease-fluid); } .btn-icon:hover { background: rgb(var(--crema-50)); color: rgb(var(--tinta-700)); } .btn-icon svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.7; display: block; } /* --------------------------------------------------------------------------- * Form fields. * Inputs con label "eyebrow", border propio y focus ring con cubic-bezier. * ------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .field label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: rgb(var(--tinta-500)); } .field input, .field select, .field textarea { width: 100%; padding: 0.75rem 0.95rem; border-radius: 0.7rem; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--tinta-700)); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid), background-color 220ms var(--ease-fluid); } .field input::placeholder, .field textarea::placeholder { color: rgb(var(--tinta-300)); } .field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: rgb(var(--tinta-200)); } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgb(var(--terracota-500)); box-shadow: 0 0 0 4px rgb(var(--terracota-50) / 0.7); background: rgb(var(--surface)); } .field .help { font-size: 0.78rem; color: rgb(var(--tinta-400)); } .field .error { font-size: 0.78rem; color: rgb(var(--error)); font-weight: 500; } /* --------------------------------------------------------------------------- * Editor HTML de Configuración > Inicio. * ------------------------------------------------------------------------- */ .html-editor { overflow: hidden; border: 1px solid rgb(var(--border)); border-radius: 0.85rem; background: rgb(var(--surface)); transition: border-color 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid); } .html-editor:focus-within { border-color: rgb(var(--terracota-500)); box-shadow: 0 0 0 4px rgb(var(--terracota-50) / 0.7); } .html-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.55rem; border-bottom: 1px solid rgb(var(--border)); background: rgb(var(--surface-muted)); } .html-editor__select, .html-editor__button, .html-editor__marker { min-height: 2rem; border: 1px solid rgb(var(--border)); border-radius: 0.5rem; background: rgb(var(--surface)); color: rgb(var(--tinta-600)); font: inherit; } .html-editor__select { width: auto; padding: 0.3rem 1.8rem 0.3rem 0.55rem; font-size: 0.78rem; } .html-editor__button { display: inline-grid; width: 2rem; padding: 0; place-items: center; cursor: pointer; } .html-editor__button:hover, .html-editor__marker:hover { border-color: rgb(var(--terracota-300)); background: rgb(var(--terracota-50)); color: rgb(var(--terracota-700)); } .html-editor__button svg { width: 1rem; height: 1rem; } .html-editor__separator { width: 1px; height: 1.45rem; margin: 0 0.15rem; background: rgb(var(--border)); } .html-editor__markers { display: flex; flex-wrap: wrap; gap: 0.3rem; } .html-editor__marker { padding: 0.25rem 0.55rem; color: rgb(var(--terracota-700)); font-size: 0.72rem; font-weight: 650; cursor: pointer; } .html-editor__canvas { min-height: 15rem; padding: 1rem 1.1rem; outline: none; } .html-editor__canvas:empty::before { content: "Escriba el mensaje de bienvenida…"; color: rgb(var(--tinta-300)); pointer-events: none; } .html-content { color: rgb(var(--tinta-500)); font-size: 0.95rem; line-height: 1.7; } .html-content > * + * { margin-top: 0.75rem; } .html-content h2, .html-content h3 { color: rgb(var(--tinta-700)); font-family: Georgia, "Times New Roman", ui-serif, serif; line-height: 1.2; } .html-content h2 { font-size: 1.5rem; } .html-content h3 { font-size: 1.2rem; } .html-content strong { color: rgb(var(--tinta-700)); font-weight: 700; } .html-content ul { list-style: disc; padding-left: 1.4rem; } .html-content ol { list-style: decimal; padding-left: 1.4rem; } .html-content a { color: rgb(var(--terracota-600)); text-decoration: underline; text-underline-offset: 0.16em; } .html-content--preview { padding: 1rem 1.1rem; border: 1px solid rgb(var(--border)); border-radius: 0.75rem; background: rgb(var(--surface-muted)); } @media (max-width: 40rem) { .html-editor__separator { display: none; } .html-editor__markers { flex-basis: 100%; } .html-editor__canvas { min-height: 12rem; } } /* --------------------------------------------------------------------------- * Password field con icono de ojo (toggle de visibilidad). * - El input ocupa todo el ancho; el botón se posiciona a la derecha * dentro del mismo wrapper (.password-field). * - El icono se intercambia con aria-pressed (ver password-toggle.js). * ------------------------------------------------------------------------- */ .password-field { position: relative; display: block; } .password-field input { padding-right: 3rem; } .password-toggle { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; border-radius: 0.5rem; background: transparent; border: 0; color: rgb(var(--tinta-400)); cursor: pointer; transition: color 180ms var(--ease-fluid), background-color 180ms var(--ease-fluid); } .password-toggle:hover { color: rgb(var(--tinta-600)); background: rgb(var(--crema-100) / 0.7); } .password-toggle:focus-visible { outline: 2px solid rgb(var(--terracota-500)); outline-offset: 2px; } .password-toggle svg { width: 1.05rem; height: 1.05rem; } /* Por defecto mostramos el ojo "abierto"; cuando aria-pressed=true (clave revelada) mostramos el ojo tachado. */ .password-toggle__icon-eye-off { display: none; } .password-toggle[aria-pressed="true"] .password-toggle__icon-eye { display: none; } .password-toggle[aria-pressed="true"] .password-toggle__icon-eye-off { display: block; } /* --------------------------------------------------------------------------- * Alerts. * ------------------------------------------------------------------------- */ .alert { padding: 0.85rem 1.05rem; border-radius: 0.7rem; font-size: 0.875rem; border: 1px solid transparent; margin-bottom: 1rem; line-height: 1.45; } .alert-info { background: rgb(var(--info) / 0.08); color: rgb(var(--info)); border-color: rgb(var(--info) / 0.25); } .alert-error { background: rgb(var(--error) / 0.08); color: rgb(var(--error)); border-color: rgb(var(--error) / 0.25); } .alert-ok { background: rgb(var(--ok) / 0.08); color: rgb(var(--ok)); border-color: rgb(var(--ok) / 0.25); } .alert--with-icon { display: flex; align-items: center; gap: 0.55rem; } .alert-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: rgb(var(--ok)); } /* --------------------------------------------------------------------------- * Double-Bezel (Doppelrand) — patrón de tarjeta premium. * Outer shell: contenedor con padding, ring y radio grande. * Inner core: contenido, con su propio bg y un highlight interno arriba. * El radio del core es el del shell menos el padding, manteniendo curvas * concéntricas. * ------------------------------------------------------------------------- */ .bezel { position: relative; background: rgb(var(--crema-50) / 0.55); border: 1px solid rgb(var(--border) / 0.7); border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 18px 40px -28px rgb(31 35 48 / 0.12); } .bezel-core { background: rgb(var(--surface)); border-radius: calc(1.5rem - 0.5rem); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(31 35 48 / 0.04); position: relative; overflow: hidden; } .bezel-pad { padding: 1.6rem 1.75rem; } .bezel-pad-sm { padding: 1.1rem 1.25rem; } /* En oscuro el highlight interno cambia para que no quede blanco. */ [data-theme="oscuro"] .bezel-core { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4); } /* Compatibilidad: la antigua .card-shell sigue funcionando como wrapper simple para páginas internas que aún no se refinan. */ .card-shell { background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border: 1px solid rgb(var(--border)); border-radius: 1rem; } /* --------------------------------------------------------------------------- * Acordeón de secciones (pantalla de respuestas). * ------------------------------------------------------------------------- */ .seccion-accordion > summary { list-style: none; cursor: pointer; } .seccion-accordion > summary::-webkit-details-marker { display: none; } .seccion-accordion > summary:hover { background: rgb(var(--crema-50)); } .seccion-chevron { transition: transform 220ms var(--ease-fluid), background-color 220ms var(--ease-fluid); } .seccion-chevron svg { transition: transform 220ms var(--ease-fluid); } .seccion-accordion[open] > summary .seccion-chevron svg { transform: rotate(180deg); } /* Tarjeta de pregunta externa: controles compactos y franja de evidencia. */ .pregunta-card__heading { min-width: 0; } .pregunta-card__heading p { margin-top: 0.1rem; } .pregunta-card__answers { padding-left: 2.5rem; } .pregunta-answer-pill { border-width: 1px; border-color: rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--tinta-500)); min-height: 2rem; } .pregunta-answer-pill:not(.is-readonly):hover { border-color: rgb(var(--terracota-300)); color: rgb(var(--terracota-600)); background: rgb(var(--crema-50)); } .pregunta-answer-pill.is-readonly { cursor: default; } .pregunta-answer-pill:has(input:focus-visible) { outline: 2px solid rgb(var(--terracota-500)); outline-offset: 2px; } .pregunta-answer-pill.is-selected, .pregunta-answer-pill:has(input:checked) { border-width: 2px; box-shadow: 0 2px 8px rgb(var(--tinta-700) / 0.12); transform: translateY(-1px); } .pregunta-answer-pill[data-answer="s"].is-selected, .pregunta-answer-pill[data-answer="s"]:has(input:checked) { border-color: rgb(var(--ok)); background: rgb(var(--ok) / 0.13); color: rgb(var(--tinta-700)); } .pregunta-answer-pill[data-answer="n"].is-selected, .pregunta-answer-pill[data-answer="n"]:has(input:checked) { border-color: rgb(var(--terracota-500)); background: rgb(var(--terracota-100)); color: rgb(var(--terracota-700)); } .pregunta-answer-pill[data-answer="na"].is-selected, .pregunta-answer-pill[data-answer="na"]:has(input:checked) { border-color: rgb(var(--tinta-500)); background: rgb(var(--tinta-100)); color: rgb(var(--tinta-700)); } .pregunta-answer-pill__icon { font-size: 0.9rem; line-height: 1; } .pregunta-card__controls { display: block; padding-left: 2.5rem; } .pregunta-card__comment { display: block; width: 100%; min-width: 0; } .pregunta-card__attachment { padding-left: 2.5rem; } .pregunta-card__attachment > div > p { margin-top: 0.25rem; } .pregunta-card__files { padding-left: 2.5rem; } .pregunta-card__evidence { display: flex; align-items: baseline; gap: 0.55rem; margin-left: 2.5rem; padding: 0.55rem 0.8rem; border-left: 2px solid rgb(var(--terracota-500)); border-radius: 0 0.45rem 0.45rem 0; background: rgb(var(--crema-50) / 0.72); color: rgb(var(--tinta-600)); font-size: 0.75rem; line-height: 1.45; } .pregunta-card__evidence-label { flex: 0 0 auto; color: rgb(var(--tinta-600)); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .pregunta-card__hallazgo { display: flex; align-items: baseline; gap: 0.55rem; margin-left: 2.5rem; padding: 0.55rem 0.8rem; border-left: 2px solid rgb(var(--terracota-600)); border-radius: 0 0.45rem 0.45rem 0; background: rgb(var(--terracota-50) / 0.72); color: rgb(var(--tinta-600)); font-size: 0.75rem; line-height: 1.45; } .pregunta-card__hallazgo-label { flex: 0 0 auto; color: rgb(var(--terracota-700)); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 40rem) { .pregunta-card__answers, .pregunta-card__controls, .pregunta-card__evidence, .pregunta-card__hallazgo, .pregunta-card__files { padding-left: 0; margin-left: 0; } .pregunta-card__controls, .pregunta-card__attachment { padding-left: 0; } .pregunta-card__evidence { align-items: flex-start; flex-direction: column; gap: 0.2rem; } .pregunta-card__hallazgo { align-items: flex-start; flex-direction: column; gap: 0.2rem; } } /* --------------------------------------------------------------------------- * Sidebar. * ------------------------------------------------------------------------- */ .menu-link { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.85rem; border-radius: 0.7rem; color: rgb(var(--tinta-500)); font-size: 0.9rem; font-weight: 500; transition: background-color 220ms var(--ease-fluid), color 220ms var(--ease-fluid); } .menu-link:hover { background: rgb(var(--crema-50)); color: rgb(var(--tinta-700)); } .menu-link.is-active { background: rgb(var(--terracota-50)); color: rgb(var(--terracota-600)); } .menu-link.is-active::before { content: ""; position: absolute; left: -3px; top: 0.65rem; bottom: 0.65rem; width: 3px; border-radius: 2px; background: rgb(var(--terracota-500)); } .menu-icon { display: inline-flex; width: 1.1rem; height: 1.1rem; color: rgb(var(--tinta-400)); } .menu-link.is-active .menu-icon { color: rgb(var(--terracota-500)); } .menu-icon svg { width: 100%; height: 100%; stroke-width: 1.6; } .menu-label { white-space: nowrap; } .menu-group > summary { list-style: none; cursor: pointer; } .menu-group > summary::-webkit-details-marker { display: none; } .menu-group > summary.is-parent-active { color: rgb(var(--tinta-700)); } .menu-group > summary.is-parent-active .menu-icon { color: rgb(var(--terracota-500)); } .menu-chevron { width: 0.9rem; height: 0.9rem; margin-left: auto; transition: transform 220ms var(--ease-fluid); } .menu-group[open] > summary .menu-chevron { transform: rotate(90deg); } .menu-sublist { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.2rem 0 0.15rem 1.25rem; padding-left: 0.55rem; border-left: 1px solid rgb(var(--crema-200)); } .menu-link--child { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.84rem; } /* --------------------------------------------------------------------------- * User menu (details/summary). * ------------------------------------------------------------------------- */ [data-user-menu] > summary { list-style: none; } [data-user-menu] > summary::-webkit-details-marker { display: none; } [data-user-menu][open] > summary { background: rgb(var(--crema-50)); border-color: rgb(var(--terracota-200)); } .user-menu-panel { position: absolute; right: 0; margin-top: 0.6rem; min-width: 16rem; background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border: 1px solid rgb(var(--border)); border-radius: 0.9rem; box-shadow: 0 24px 48px -20px rgb(31 35 48 / 0.25), 0 4px 12px -6px rgb(31 35 48 / 0.08); padding: 0.4rem; z-index: 60; animation: panel-in 240ms var(--ease-fluid) both; } @keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .user-menu-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.6rem 0.75rem; border-radius: 0.55rem; font-size: 0.875rem; color: rgb(var(--tinta-600)); background: transparent; border: 0; cursor: pointer; text-align: left; transition: background-color 180ms var(--ease-fluid), color 180ms var(--ease-fluid); } .user-menu-item:hover { background: rgb(var(--crema-50)); color: rgb(var(--tinta-700)); } .user-menu-item svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.7; } .user-menu-item--danger { color: rgb(var(--error)); } .user-menu-item--danger:hover { background: rgb(var(--error) / 0.08); color: rgb(var(--error)); } /* --------------------------------------------------------------------------- * Stat cards (home) — bento con número display y marcador ordinal. * ------------------------------------------------------------------------- */ .stat-bento { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem 1.6rem 1.4rem; min-height: 11rem; } .stat-bento .stat-ordinal { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; color: rgb(var(--tinta-300)); text-transform: uppercase; } .stat-bento .stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgb(var(--tinta-400)); } .stat-bento .stat-value { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em; color: rgb(var(--tinta-700)); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; } .stat-bento .stat-value.is-sm { font-size: 1.7rem; } .stat-bento .stat-link { margin-top: auto; font-size: 0.85rem; font-weight: 500; color: rgb(var(--terracota-600)); display: inline-flex; align-items: center; gap: 0.4rem; transition: color 180ms var(--ease-fluid), gap 180ms var(--ease-fluid); } .stat-bento .stat-link:hover { color: rgb(var(--terracota-700)); gap: 0.55rem; } .stat-bento .stat-link-static { font-size: 0.85rem; color: rgb(var(--tinta-400)); } /* Los resúmenes de Inicio usan una densidad algo mayor que las tarjetas de contenido: conservan la jerarquía del bento sin dejar aire innecesario. */ .home-stats .bezel { padding: 0.6rem; } .home-stats .bezel-pad { padding: 0.8rem 0.95rem; } .home-stats .stat-bento { gap: 0.3rem; min-height: 6.5rem; padding: 0.75rem 0.85rem 0.7rem; } .home-stats .stat-bento .stat-ordinal { top: 0.7rem; right: 0.8rem; font-size: 0.68rem; } .home-stats .stat-bento .stat-label { font-size: 0.64rem; } .home-stats .stat-bento .stat-link, .home-stats .stat-bento .stat-link-static { font-size: 0.78rem; } .home-stats .stat-bento .stat-value { font-size: 1.75rem; } .home-stats .stat-bento .stat-value.is-sm { font-size: 1rem; } .home-stats .stat-value.is-preguntas, .home-stats .stat-value.is-fecha { font-size: 1.25rem; } @media (max-width: 40rem) { .home-stats .bezel { padding: 0.55rem; } .home-stats .bezel-pad { padding: 0.7rem 0.8rem; } .home-stats .stat-bento { min-height: 6.25rem; padding: 0.7rem 0.8rem; } .home-stats .stat-bento .stat-ordinal { top: 0.65rem; right: 0.75rem; } .home-stats .stat-bento .stat-value { font-size: 1.6rem; } .home-stats .stat-bento .stat-value.is-sm { font-size: 0.95rem; } .home-stats .stat-value.is-preguntas, .home-stats .stat-value.is-fecha { font-size: 1.1rem; } } /* Compatibilidad con la antigua .stat-card (usada por listados). */ .stat-card { background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border: 1px solid rgb(var(--border)); border-radius: 0.875rem; padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; } .stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--tinta-400)); } .stat-value { font-size: 2.2rem; font-weight: 700; color: rgb(var(--tinta-700)); line-height: 1.1; } .stat-link { font-size: 0.85rem; font-weight: 500; color: rgb(var(--terracota-600)); margin-top: 0.4rem; } .stat-link:hover { text-decoration: underline; } .stat-link-static { font-size: 0.85rem; color: rgb(var(--tinta-400)); margin-top: 0.4rem; } /* --------------------------------------------------------------------------- * Chips / badges. * ------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgb(var(--crema-100)); color: rgb(var(--tinta-500)); } .chip-ok { background: rgb(var(--ok) / 0.12); color: rgb(var(--ok)); } .chip-warn { background: rgb(217 159 24 / 0.14); color: rgb(146 64 14); } .chip-error { background: rgb(var(--error) / 0.12); color: rgb(var(--error)); } .chip-info { background: rgb(var(--info) / 0.12); color: rgb(var(--info)); } [data-theme="oscuro"] .chip-warn { background: rgb(217 159 24 / 0.2); color: rgb(254 215 138); } /* --------------------------------------------------------------------------- * OTP — 4 cajitas separadas con auto-advance. * ------------------------------------------------------------------------- */ .otp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .otp-cell { position: relative; text-align: center; font-family: var(--font-mono); font-size: 1.7rem; font-weight: 500; letter-spacing: 0; padding: 0.7rem 0.2rem; border-radius: 0.7rem; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--tinta-700)); outline: none; caret-color: rgb(var(--terracota-500)); transition: border-color 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid), background-color 220ms var(--ease-fluid), transform 220ms var(--ease-fluid); -moz-appearance: textfield; } .otp-cell::-webkit-outer-spin-button, .otp-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .otp-cell:hover { border-color: rgb(var(--tinta-200)); } .otp-cell:focus { border-color: rgb(var(--terracota-500)); box-shadow: 0 0 0 4px rgb(var(--terracota-50) / 0.7); background: rgb(var(--surface)); } .otp-cell.is-filled { border-color: rgb(var(--tinta-200)); background: rgb(var(--crema-50)); } .otp-cell.is-shake { animation: otp-shake 320ms var(--ease-fluid); } @keyframes otp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .otp-countdown { font-family: var(--font-mono); font-size: 0.78rem; color: rgb(var(--tinta-400)); letter-spacing: 0.06em; } .otp-countdown.is-warning { color: rgb(var(--terracota-600)); } .otp-countdown.is-expired { color: rgb(var(--error)); } /* --------------------------------------------------------------------------- * Theme picker (bento). * ------------------------------------------------------------------------- */ .theme-bento { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .theme-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .theme-option { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; border: 1.5px solid rgb(var(--border)); border-radius: 1.1rem; background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); cursor: pointer; text-align: left; transition: border-color 280ms var(--ease-fluid), transform 280ms var(--ease-fluid), box-shadow 280ms var(--ease-fluid); } .theme-option:hover { border-color: rgb(var(--terracota-200)); transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgb(31 35 48 / 0.18); } .theme-option.is-active { border-color: rgb(var(--terracota-500)); box-shadow: 0 0 0 4px rgb(var(--terracota-50) / 0.6), 0 14px 28px -20px rgb(var(--terracota-500) / 0.25); } .theme-name { font-weight: 600; color: rgb(var(--tinta-700)); } .theme-desc { font-size: 0.8rem; color: rgb(var(--tinta-400)); line-height: 1.4; } .theme-preview { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.7rem; overflow: hidden; border: 1px solid rgb(var(--border) / 0.7); background: rgb(var(--crema-50)); } .theme-preview svg { display: block; width: 100%; height: 100%; } /* Compatibilidad: el grid antiguo sigue funcionando. */ .theme-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* --------------------------------------------------------------------------- * Tabla ligera. * ------------------------------------------------------------------------- */ .table-shell { background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border: 1px solid rgb(var(--border)); border-radius: 0.875rem; overflow: hidden; } .table-shell table { width: 100%; border-collapse: collapse; } .table-shell th, .table-shell td { text-align: left; padding: 0.7rem 0.9rem; font-size: 0.88rem; } .table-shell thead th { background: rgb(var(--crema-50)); color: rgb(var(--tinta-400)); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; } .table-shell tbody tr + tr td { border-top: 1px solid rgb(var(--border)); } /* Grid de cards (listado) — compatibilidad. */ .grid-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid-cards .card-wide { grid-column: span 2; min-width: 0; } /* Kanban: columnas con header y body scrollable. */ .kanban-scroll { overflow-x: auto; padding-bottom: 0.75rem; } .kanban-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 1rem; min-width: max-content; } .kanban-col { display: flex; flex-direction: column; background: rgb(var(--crema-50)); border: 1px solid rgb(var(--crema-200)); border-radius: 0.85rem; min-height: 200px; width: 320px; } .kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem; border-bottom: 1px solid rgb(var(--crema-200)); background: rgb(var(--surface)); border-top-left-radius: 0.85rem; border-top-right-radius: 0.85rem; } .kanban-col-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.65rem; overflow-y: auto; max-height: 75vh; } .kanban-col-body > article { width: 100%; } .kanban-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--border) / 0.85); border-radius: 0.75rem; padding: 0.85rem 1rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(31 35 48 / 0.04); position: relative; overflow: hidden; flex-shrink: 0; } [data-theme="oscuro"] .kanban-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4); } .kanban-card-actions { display: flex; gap: 0.35rem; margin-top: 0.35rem; } .item-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem; } .item-card .item-name { font-weight: 600; color: rgb(var(--tinta-700)); } .item-card .item-sub { font-size: 0.8rem; color: rgb(var(--tinta-400)); letter-spacing: 0.04em; } .item-card .item-meta { font-size: 0.78rem; color: rgb(var(--tinta-400)); } .item-card .item-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; } .empresa-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem; border-left: 3px solid rgb(var(--terracota-300)); } .empresa-card .empresa-name { font-weight: 600; color: rgb(var(--tinta-700)); } .empresa-card .empresa-ruc { font-size: 0.8rem; color: rgb(var(--tinta-400)); letter-spacing: 0.04em; } .empresa-card .empresa-meta { font-size: 0.78rem; color: rgb(var(--tinta-400)); } .empresa-card .empresa-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; } /* Paginación. */ .pagination { display: flex; gap: 0.25rem; align-items: center; padding-top: 1rem; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.6rem; border-radius: 0.5rem; font-size: 0.82rem; color: rgb(var(--tinta-500)); border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); text-decoration: none; } .pagination a:hover { background: rgb(var(--crema-50)); } .pagination .current { background: rgb(var(--terracota-500)); color: #fff; border-color: rgb(var(--terracota-500)); } .pagination .disabled { opacity: 0.4; pointer-events: none; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-bottom: 1.25rem; } .toolbar .field { margin-bottom: 0; min-width: 12rem; } /* --------------------------------------------------------------------------- * Drawer móvil. * Visibilidad coordinada con el breakpoint `lg` de Tailwind. * ------------------------------------------------------------------------- */ .app-sidebar { display: none; } .drawer-toggle { display: inline-flex; } @media (min-width: 1024px) { .app-sidebar { display: flex; position: sticky; top: 0; height: 100dvh; overflow-y: auto; } .drawer-toggle { display: none; } } [data-drawer] { position: fixed; inset: 0; z-index: 50; } [data-drawer][hidden] { display: none; } [data-drawer][data-open] { display: block; } .drawer-backdrop { position: absolute; inset: 0; background: rgb(31 35 48 / 0.45); opacity: 0; transition: opacity 280ms var(--ease-fluid); } [data-drawer][data-open] .drawer-backdrop { opacity: 1; } .drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(20rem, 88vw); display: flex; flex-direction: column; background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border-right: 1px solid rgb(var(--border)); box-shadow: 0 24px 60px -24px rgb(31 35 48 / 0.35); transform: translateX(-100%); transition: transform 320ms var(--ease-fluid); will-change: transform; } [data-drawer][data-open] .drawer-panel { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid rgb(var(--border)); } .drawer-body { flex: 1 1 auto; padding: 0.85rem 0.6rem; overflow-y: auto; } .drawer-footer { padding: 0.95rem 1.6rem; border-top: 1px solid rgb(var(--border)); font-size: 0.72rem; color: rgb(var(--tinta-400)); } .drawer-close, .drawer-toggle { align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; border: 1px solid rgb(var(--border)); background: rgb(var(--surface)); color: rgb(var(--tinta-500)); cursor: pointer; transition: background-color 220ms var(--ease-fluid), color 220ms var(--ease-fluid), border-color 220ms var(--ease-fluid); flex-shrink: 0; } .drawer-close:hover, .drawer-toggle:hover { background: rgb(var(--crema-50)); color: rgb(var(--tinta-700)); } .drawer-close svg, .drawer-toggle svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.7; display: block; } .drawer-nav { display: block; } .drawer-nav__list { display: flex; flex-direction: column; gap: 0.3rem; } body.has-drawer-open { overflow: hidden; } /* --------------------------------------------------------------------------- * Reveal-on-scroll (data-reveal). Animación de entrada fade-up, ejecutada * por IntersectionObserver (ver base.html). El delay por elemento se * controla con el modificador `[data-reveal-delay="n"]` (en pasos de 80ms). * ------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-fluid), transform 700ms var(--ease-fluid); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal-delay="1"] { transition-delay: 80ms; } [data-reveal-delay="2"] { transition-delay: 160ms; } [data-reveal-delay="3"] { transition-delay: 240ms; } [data-reveal-delay="4"] { transition-delay: 320ms; } /* --------------------------------------------------------------------------- * Motion — respeta reduced-motion. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- * Combobox tipo Select2. * Patrón WAI-ARIA 1.2: input + listbox estilizado, búsqueda case-insensitive. * ------------------------------------------------------------------------- */ .empresa-combobox { position: relative; } .empresa-combobox-control { position: relative; display: flex; align-items: center; } .empresa-combobox-input { width: 100%; padding-right: 4.5rem; /* espacio para el botón limpiar y el caret */ cursor: text; } .empresa-combobox-caret { position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%); display: inline-flex; width: 1rem; height: 1rem; color: rgb(var(--tinta-400)); pointer-events: none; transition: transform 220ms var(--ease-fluid), color 220ms var(--ease-fluid); } .empresa-combobox-caret svg { width: 100%; height: 100%; stroke-width: 1.7; display: block; } .empresa-combobox-input:focus ~ .empresa-combobox-caret { color: rgb(var(--terracota-500)); transform: translateY(-50%) rotate(180deg); } .empresa-combobox-clear { position: absolute; right: 2.4rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 0; padding: 0; background: rgb(var(--crema-200) / 0.7); color: rgb(var(--tinta-500)); cursor: pointer; transition: background-color 180ms var(--ease-fluid), color 180ms var(--ease-fluid); } .empresa-combobox-clear:hover { background: rgb(var(--terracota-200)); color: rgb(var(--terracota-700)); } .empresa-combobox-clear svg { width: 0.75rem; height: 0.75rem; stroke-width: 1.8; } .empresa-combobox-listbox { position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.35rem; list-style: none; background: rgb(var(--surface)); color: rgb(var(--text-on-surface)); border: 1px solid rgb(var(--border)); border-radius: 0.85rem; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 18px 36px -22px rgb(31 35 48 / 0.28); animation: combo-in 180ms var(--ease-fluid) both; } .empresa-combobox-listbox[hidden], .empresa-combobox-listbox.hidden { display: none; } @keyframes combo-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .empresa-combobox-option { padding: 0.55rem 0.75rem; border-radius: 0.55rem; font-size: 0.92rem; color: rgb(var(--tinta-600)); cursor: pointer; user-select: none; transition: background-color 140ms var(--ease-fluid), color 140ms var(--ease-fluid); } .empresa-combobox-option.is-active, .empresa-combobox-option:hover { background: rgb(var(--crema-100)); color: rgb(var(--tinta-700)); } .empresa-combobox-option[aria-selected="true"] { background: rgb(var(--terracota-50)); color: rgb(var(--terracota-700)); font-weight: 500; } .empresa-combobox-option.is-hidden { display: none; } .empresa-combobox-empty { margin-top: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.82rem; color: rgb(var(--tinta-400)); text-align: center; } .empresa-combobox-empty[hidden], .empresa-combobox-empty.hidden { display: none; }