/** * CMS Admin - Rediseño v2 (estética Tailwind UI, CSS plano) * * @package CMS Berta Rojas * @author Jorge Buffa * @copyright 2025 Berta Rojas * @version 2.0.0 * * Capa visual que emula la estética de Tailwind UI SIN usar Tailwind: * no hay utility classes en el markup, no hay build step, no hay dependencia. * Solo tokens y componentes escritos a mano que sobreescriben al template GO. * * Se carga DESPUES de vendor.css, style.css, cms.css y del CSS de DataTables, * por eso gana por orden de cascada sin necesidad de !important en la mayoria * de los casos. Donde el template GO usa !important, se replica. * * Para volver al diseño anterior: CMS_THEME=v1 en .env (ver partials/css.php). * * Secciones: * 1. Tokens * 2. Base y tipografia * 3. Navbar (application shell "stacked") * 4. Page header * 5. Botones * 6. Cards y paneles * 7. Tablas * 8. DataTables * 9. Formularios * 10. Badges y alerts * 11. Dashboard * 12. Logs * 13. Login y pantallas sin sesion * 14. Footer * 15. Responsive */ /* ============================================================ 1. TOKENS — escala de Tailwind, portada a custom properties ============================================================ */ :root { /* Grises: la escala CALIDA (la "stone" de Tailwind), no la fria por defecto. La gris fria tira a azul (su 900 es #111827, un azul marino) y sobre una marca de dorados y cremas se lee como un azul que nadie pidio. Si aparece un valor azulado aca, es un resto del port original y hay que corregirlo, no imitarlo. */ --c-gray-50: #fafaf9; --c-gray-100: #f5f5f4; --c-gray-200: #e7e5e4; --c-gray-300: #d6d3d1; --c-gray-400: #a8a29e; --c-gray-500: #78716c; --c-gray-600: #57534e; --c-gray-700: #44403c; --c-gray-800: #292524; --c-gray-900: #1c1917; --c-gray-950: #0c0a09; /* Identidad Berta Rojas, extraida de berta-estilos.css de la web: el dorado #b08f66 es EL color de marca (68 usos), con sus variantes oscuras, el marron profundo y los cremas. */ --brand-gold: #b08f66; --brand-gold-dark: #8b6f4d; /* dorado oscurecido: AA con texto blanco */ --brand-gold-deep: #75593c; /* hover de los botones */ --brand-gold-soft: #f6f1ea; /* crema dorado para fondos suaves */ --brand-brown: #241917; /* marron profundo de la web */ --brand-brown-soft: #382a26; /* hover sobre el marron */ --brand-cream: #faf8f5; /* fondo general, calido */ /* Color de accion: el dorado de la marca (antes negro) */ --c-accent: var(--brand-gold-dark); --c-accent-hover: var(--brand-gold-deep); --c-accent-soft: var(--brand-gold-soft); /* Tipografia de titulares: la Cinzel de la web (las capitales tipo Trajan). SOLO para titulos de pagina y fichas: en celdas de tabla a 13px se vuelve ilegible, ahi sigue Inter. */ --font-display: 'Cinzel', 'Times New Roman', serif; --c-green-50: #f0fdf4; --c-green-600: #16a34a; --c-green-700: #15803d; --c-green-ring: rgba(22, 163, 74, 0.2); --c-amber-50: #fffbeb; --c-amber-700: #b45309; --c-amber-800: #92400e; --c-amber-ring: rgba(217, 119, 6, 0.2); --c-red-50: #fef2f2; --c-red-500: #ef4444; --c-red-600: #dc2626; --c-red-700: #b91c1c; --c-red-ring: rgba(220, 38, 38, 0.2); --c-info-bg: #f6f1ea; /* dorado muy claro: reemplaza al azul de info */ --c-info: #8b6f4d; --c-info-text: #75593c; --c-info-ring: rgba(139, 111, 77, 0.25); /* Radios */ --r-sm: 0.25rem; --r-md: 0.375rem; --r-lg: 0.5rem; --r-xl: 0.75rem; --r-full: 9999px; /* Sombras SATURADAS: llevan el matiz del marron de la marca, no negro puro. Un rgba(0,0,0,.1) funciona sobre blanco, pero el fondo del CMS es crema (--brand-cream): el negro sin matiz se mezcla y da una sombra gris apagada, "sucia". Bajando la luminosidad del propio marron la sombra se lee como falta de luz y no como suciedad. Las opacidades y geometrias son las de Tailwind (shadow-sm / shadow / shadow-md / shadow-lg): lo unico que cambia es el matiz. Desplazamiento vertical SIEMPRE positivo: la luz viene de arriba. */ --sombra-h: 20; --sombra-s: 25%; --sombra-l: 12%; --sh-xs: 0 1px 2px 0 hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.05); --sh-sm: 0 1px 3px 0 hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10), 0 1px 2px -1px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10); --sh-md: 0 4px 6px -1px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10), 0 2px 4px -2px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10); --sh-lg: 0 10px 15px -3px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10), 0 4px 6px -4px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.10); /* El "ring" de Tailwind: borde de 1px hecho con box-shadow, no ocupa layout */ --ring-card: 0 0 0 1px hsla(var(--sombra-h), var(--sombra-s), var(--sombra-l), 0.06); /* Tipografia */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* --- ESCALA DE ESPACIADO --------------------------------------- Base 4px, no lineal. TODO padding, margin y gap nuevo sale de aca: elegir un numero a ojo es lo que hace que dos pantallas correctas por separado se sientan desprolijas juntas. Los pasos son los que el CMS ya usaba de hecho; lo que queda afuera (0.3rem, 0.1875rem, 0.3125rem, 0.4375rem) son valores sueltos que sobrevivieron al port y hay que ir llevando al escalon vecino. */ --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px — el mas usado */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px — padding lateral del boton */ --space-4: 1rem; /* 16px — padding de tarjeta */ --space-5: 1.25rem; /* 20px — separacion entre campos */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px — respiro del hero, hueco del chevron */ --space-8: 2rem; /* 32px — entre bloques */ --space-9: 2.25rem; /* 36px — hueco del chevron en los select */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px — alto del header */ /* --- ESCALA TIPOGRAFICA ---------------------------------------- Nueve pasos elegidos a mano sobre los que el CMS ya usaba. Tenia 21 tamaños distintos, con vecinos que nadie distingue (0.8125 / 0.875 / 0.9375 conviviendo). Jerarquia por PESO y CONTRASTE antes que por tamaño: para bajar un dato de rango, primero --c-gray-500. */ --fs-3xs: 0.625rem; /* 10px — rotulos del calendario en miniatura */ --fs-2xs: 0.6875rem; /* 11px — cabeceras de tabla, badges */ --fs-xs: 0.75rem; /* 12px — linea de apoyo */ --fs-sm: 0.8125rem; /* 13px — dato de tabla */ --fs-base: 0.875rem; /* 14px — cuerpo del CMS */ --fs-md: 1rem; /* 16px — controles en tactil (evita el zoom de iOS) */ --fs-lg: 1.125rem; /* 18px — titulo de tarjeta */ --fs-xl: 1.25rem; /* 20px — h2 */ --fs-2xl: 1.5rem; /* 24px — h1 */ --fs-3xl: 1.875rem; /* 30px — cifras del bento */ --fs-4xl: 2.25rem; /* 36px */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Heroicons exclamation-circle, para que el error de un campo no dependa solo del color. Se pinta con mask-image, asi hereda el currentColor. */ --icono-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E"); } /* ============================================================ 2. BASE Y TIPOGRAFIA ============================================================ */ body, body.bg-light { font-family: var(--font-sans); font-size: var(--fs-base); /* text-sm */ line-height: 1.5rem; color: var(--c-gray-700); background-color: var(--brand-cream) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; } /* Inter tiene sus propias variantes opticas; desactivar ligaduras raras */ body { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); color: var(--c-gray-900); font-weight: 600; letter-spacing: -0.011em; margin-top: 0; } h1, .h1 { font-size: var(--fs-2xl); line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; } h2, .h2 { font-size: var(--fs-xl); line-height: 1.75rem; } h3, .h3 { font-size: var(--fs-lg); line-height: 1.75rem; } h4, .h4 { font-size: var(--fs-md); line-height: 1.5rem; } h5, .h5 { font-size: var(--fs-base); line-height: 1.25rem; } h6, .h6 { font-size: var(--fs-sm); line-height: 1.25rem; } p { margin-bottom: var(--space-3); } a { color: var(--c-gray-900); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--c-gray-600); text-decoration: none; } small, .small { font-size: var(--fs-sm); line-height: 1.25rem; } code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--fs-sm); } code { color: var(--c-gray-700); background: var(--c-gray-100); padding: var(--space-0-5) var(--space-1-5); border-radius: var(--r-sm); } hr, .separator-top { border-color: var(--c-gray-200); } .text-muted { color: var(--c-gray-500) !important; } .text-dark { color: var(--c-gray-900) !important; } .text-primary { color: var(--c-gray-900) !important; } .text-success { color: var(--c-green-700) !important; } .text-danger { color: var(--c-red-600) !important; } .text-info { color: var(--c-info-text) !important; } .text-warning { color: var(--c-amber-700) !important; } /* El template GO abusa de font-weight-bold; en Tailwind UI el peso fuerte es 600 */ .font-weight-bold { font-weight: 600 !important; } /* Foco visible y consistente en todo el CMS (accesibilidad) */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .btn:focus-visible, .btn-action:focus-visible { outline: 2px solid var(--c-gray-900); outline-offset: 2px; box-shadow: none; } /* ============================================================ 3. NAVBAR — application shell de Tailwind UI ============================================================ En escritorio (>=1200px) el header deja de ser una barra superior y pasa a ser el sidebar oscuro fijo del shell "Sidebar with dark background". El markup no cambia: se reinterpretan las piezas que ya emite header.php. .navbar -> columna de altura completa .nav-link (dropdown) -> encabezado de grupo ("Contenido", "Multimedia") .dropdown-menu -> lista de items del grupo, siempre visible ul.navbar-nav.mr-0 -> bloque de usuario, anclado abajo Por debajo de 1200px vuelve a ser una barra superior con menu colapsable, que es lo que sirve en pantallas chicas (ver seccion 15). ============================================================ */ .header-sticky.header-dark, .header-dark, .header-dark[class*="-not-top"][class*="-pinned"] { background: var(--brand-brown) !important; box-shadow: none; border-bottom: 1px solid var(--brand-brown-soft); } /* Altura del header fijada en 4rem para poder compensarla en el page header */ .header-sticky.header-dark { padding-top: 0; padding-bottom: 0; } .header-dark .navbar { padding-top: 0; padding-bottom: 0; height: 4rem; min-height: 4rem; } .header-dark .navbar-brand { height: 4rem !important; display: flex; align-items: center; padding: 0; margin-right: var(--space-8); } .header-dark .navbar-brand .navbar-logo { height: 1.75rem; min-height: 0; width: auto; } /* Links del nav: pill gris que se ilumina en hover — patron Tailwind UI */ .header-dark .navbar-nav .nav-item .nav-link, .header-dark .navbar-nav .nav-link { color: var(--c-gray-300) !important; /* GO tipografia los nav-link en 11px mayusculas con tracking */ font-size: var(--fs-base) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25rem; padding: var(--space-2) var(--space-3) !important; margin: 0 var(--space-0-5); border-radius: var(--r-md); transition: background-color 0.15s ease, color 0.15s ease; } .header-dark .navbar-nav .nav-item .nav-link:hover, .header-dark .navbar-nav .nav-link:hover { background-color: var(--brand-brown-soft); color: #fff !important; } /* Seccion activa: el header.php le agrega font-weight-bold */ .header-dark .navbar-nav .nav-link.font-weight-bold { background-color: var(--brand-brown-soft); color: #fff !important; font-weight: 600 !important; } /* Quitar el caret del framework, Tailwind UI no lo usa en nav horizontal */ .header-dark .navbar-nav .dropdown-toggle::after { border: none; content: ''; margin: 0; width: 0; } /* --- Dropdowns: panel blanco flotante con ring, como los menus de Tailwind UI --- */ .header-dark .dropdown-menu, .navbar .dropdown-menu { background: #fff; border: none; border-radius: var(--r-lg); box-shadow: var(--sh-lg), var(--ring-card); padding: var(--space-2); margin-top: var(--space-2); min-width: 15rem; } /* Grilla de dos columnas — icono | texto — en vez de flex: el item tiene el icono y DOS hermanos de texto (span + p) sin wrapper, y con flex esos tres quedarian en la misma fila. Con grid el icono ocupa las dos filas. */ .navbar .dropdown-menu .dropdown-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: center; border-radius: var(--r-md); padding: var(--space-2) var(--space-3); margin-bottom: 0; color: var(--c-gray-700); white-space: normal; transition: background-color 0.12s ease; } .navbar .dropdown-menu .dropdown-item > i { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-lg); color: var(--c-gray-400); transition: color 0.12s ease; } .navbar .dropdown-menu .dropdown-item > span, .navbar .dropdown-menu .dropdown-item > p { grid-column: 2; } .navbar .dropdown-menu .dropdown-item:hover > i { color: var(--c-gray-600); } .navbar .dropdown-menu .dropdown-item.active > i { color: var(--c-gray-900); } .navbar .dropdown-menu .dropdown-item span { display: block; font-size: var(--fs-base); font-weight: 500; line-height: 1.25rem; color: var(--c-gray-900); } .navbar .dropdown-menu .dropdown-item p { margin: var(--space-0-5) 0 0; font-size: var(--fs-xs); line-height: 1rem; color: var(--c-gray-500); } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus { background-color: var(--c-gray-50); color: var(--c-gray-900); } .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active { background-color: var(--c-gray-100); } .navbar .dropdown-menu .dropdown-item.active span, .navbar .dropdown-menu .dropdown-item.active p { color: var(--c-gray-900); } /* Los dividers sobran cuando cada item ya es una fila con padding propio */ .navbar .dropdown-menu .dropdown-divider { display: none; } /* Item de logout dentro del dropdown de usuario */ .navbar .dropdown-menu form .dropdown-item { width: 100%; text-align: left; background: none; border: none; font-size: var(--fs-base); font-weight: 500; color: var(--c-red-600) !important; cursor: pointer; } .navbar .dropdown-menu form .dropdown-item:hover { background-color: var(--c-red-50); color: var(--c-red-700) !important; } /* Separador real antes del logout */ .navbar .dropdown-menu form { border-top: 1px solid var(--c-gray-200); margin-top: var(--space-2); padding-top: var(--space-2); display: block !important; } /* Nombre de usuario en el nav */ .header-dark #navDropUser i { margin-right: var(--space-1-5); opacity: 0.7; } /* Indicador de base de datos (solo ROOT) */ #btnToggleDb { border: none !important; border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 500; line-height: 1rem; padding: var(--space-1-5) var(--space-2-5); box-shadow: none; display: inline-flex; align-items: center; gap: var(--space-1-5); } /* strong/i heredan el color del boton, si no quedan ilegibles sobre el nav oscuro */ #btnToggleDb strong, #btnToggleDb i { color: inherit !important; font-weight: 600; } #btnToggleDb.db-production { background: rgba(220, 38, 38, 0.15) !important; color: #fca5a5 !important; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35); } #btnToggleDb.db-production:hover { background: rgba(220, 38, 38, 0.25) !important; } #btnToggleDb.db-beta { background: rgba(22, 163, 74, 0.15) !important; color: #86efac !important; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35); } #btnToggleDb.db-beta:hover { background: rgba(22, 163, 74, 0.25) !important; } .cms-beta-banner { background: var(--c-green-600); font-size: var(--fs-xs); line-height: 1rem; padding: var(--space-2) 0; font-weight: 500; } /* Hamburger */ .header-dark .navbar-toggler { border: none !important; padding: var(--space-2); border-radius: var(--r-md); } .header-dark .navbar-toggler:hover { background: var(--brand-brown-soft); } /* ------------------------------------------------------------ 3b. SIDEBAR (escritorio) — shell "Sidebar with dark background" ------------------------------------------------------------ */ @media (min-width: 1200px) { :root { --sidebar-w: 17rem; } /* El contenido se corre para dejarle lugar al sidebar */ body, body.bg-light { padding-left: var(--sidebar-w); } /* ...salvo en las pantallas sin sesion (login, recuperar clave, codigo de acceso), que no incluyen header.php y por lo tanto no tienen sidebar: sin esto les queda un hueco blanco de 17rem a la izquierda. Se escribe en negativo a proposito. Si un navegador no soporta :has(), ignora la regla entera y vuelve el hueco en el login; al reves —poner el padding solo cuando hay header— el sidebar se montaria encima del contenido en TODAS las paginas internas, que es mucho peor. */ body:not(:has(> header.header-dark)) { padding-left: 0; } /* Las secciones full-bleed usan 100vw, que ignora el padding del body y se desbordaria por debajo del sidebar */ .vw-100 { width: 100% !important; } header.header-sticky.header-dark, header.header-dark { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); height: 100vh; background: var(--brand-brown) !important; border-right: 1px solid var(--brand-brown-soft); border-bottom: none; padding: 0; z-index: 1030; /* GO mueve el header con transform al hacer scroll (headroom) */ transform: none !important; transition: none; } .header-dark > .container { width: 100%; max-width: none; height: 100%; padding: 0; margin: 0; } .header-dark .navbar { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-height: 0; padding: var(--space-6) var(--space-3) var(--space-4); overflow-y: auto; overflow-x: hidden; } /* Logo */ .header-dark .navbar-brand { height: auto !important; flex: 0 0 auto; padding: 0 var(--space-2); margin: 0 0 var(--space-7); } .header-dark .navbar-brand .navbar-logo { height: 1.75rem; } .header-dark .navbar-toggler { display: none; } /* El colapsable no colapsa: es la columna del sidebar */ .header-dark .navbar-collapse { display: flex !important; flex-direction: column; align-items: stretch; flex: 1 1 auto; min-height: 0; } .header-dark .navbar-nav { display: block; width: 100%; margin: 0; } .header-dark .navbar-nav.mr-auto { flex: 0 0 auto; } .header-dark .navbar-nav .nav-item { display: block; width: 100%; } .header-dark .navbar-nav .nav-item.dropdown { margin-bottom: var(--space-6); } /* El link del grupo pasa a ser un encabezado de seccion, no un boton */ /* Solo el nav principal (.mr-auto): el bloque del usuario vive en .mr-0 y su link SI tiene que poder tocarse, es el acceso al perfil. */ .header-dark .navbar-nav.mr-auto .nav-item.dropdown > .nav-link.dropdown-toggle, .header-dark .navbar-nav.mr-auto .nav-item.dropdown > .nav-link.dropdown-toggle:hover { display: block; padding: 0 var(--space-3) var(--space-2) !important; margin: 0; background: none !important; color: var(--c-gray-500) !important; font-size: var(--fs-2xs) !important; font-weight: 600 !important; line-height: 1rem; text-transform: uppercase !important; letter-spacing: 0.06em !important; pointer-events: none; cursor: default; } /* Los items del grupo estan siempre a la vista (solo el nav principal: el menu de usuario sigue siendo un popup, mas abajo) */ .header-dark .navbar-nav.mr-auto .nav-item.dropdown > .dropdown-menu { display: block !important; position: static !important; float: none; width: 100%; min-width: 0; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; transform: none !important; } /* header.php marca los items inactivos con .text-dark, que sobre el sidebar oscuro los volveria invisibles: acá el color lo manda el item */ .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item, .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item.text-dark { padding: var(--space-2) var(--space-3); border-radius: var(--r-md); color: var(--c-gray-400) !important; font-size: var(--fs-base); font-weight: 500 !important; line-height: 1.5rem; } .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item span { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Icono del item, como en el bloque sidebar-navigation de Tailwind UI: apagado por defecto, se enciende junto con el texto */ .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item > i { grid-row: 1; font-size: var(--fs-lg); color: var(--c-gray-500); } .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item:hover > i, .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item.active > i { color: #fff; } /* En el sidebar los items son de una linea: la descripcion es ruido */ .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item p { display: none; } .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item:hover { background: var(--brand-brown-soft); color: #fff !important; } .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item.active, .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item.active:hover { background: var(--brand-brown-soft); color: #fff !important; font-weight: 600 !important; } .header-dark .navbar-nav.mr-auto .dropdown-menu .dropdown-item.active span { color: #fff; } /* Bloque inferior: indicador de DB + usuario */ .header-dark .navbar-text#dbIndicator, .header-dark .navbar-collapse > .navbar-text { order: 2; margin: 0 0 var(--space-2) !important; padding: 0 var(--space-3); flex-wrap: wrap; } .header-dark .navbar-nav.mr-0 { order: 3; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--brand-brown-soft); } /* Selector largo a proposito: GO tipografia este link en 11px mayusculas desde una regla mas especifica, y hay que ganarle */ .header-dark .navbar .navbar-collapse .navbar-nav.mr-0 .nav-item .nav-link, .header-dark .navbar-nav.mr-0 .nav-link { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-3) !important; color: var(--c-gray-300) !important; font-size: var(--fs-base) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } .header-dark .navbar-nav.mr-0 .nav-link:hover { background: var(--brand-brown-soft); } /* El menu de usuario si es un popup: se abre hacia arriba, sobre el shell */ .header-dark .navbar-nav.mr-0 .dropdown-menu { position: absolute !important; top: auto !important; bottom: calc(100% + 0.5rem) !important; left: 0 !important; right: auto !important; transform: none !important; width: calc(var(--sidebar-w) - 1.5rem); min-width: 0; background: #fff; box-shadow: var(--sh-lg), var(--ring-card); padding: var(--space-2); } .header-dark .navbar-nav.mr-0 .dropdown-menu .dropdown-item { color: var(--c-gray-700); border-radius: var(--r-md); } .header-dark .navbar-nav.mr-0 .dropdown-menu .dropdown-item span { color: var(--c-gray-900); } .header-dark .navbar-nav.mr-0 .dropdown-menu .dropdown-item p { display: block; color: var(--c-gray-500); } .header-dark .navbar-nav.mr-0 .dropdown-menu .dropdown-item:hover { background: var(--c-gray-50); color: var(--c-gray-900); } /* Sin barra superior, el page header ya no tiene nada que compensar */ .hero.hero-with-header { padding-top: var(--space-8) !important; } /* Mas aire lateral, como el area de contenido de Tailwind UI */ .container, .container-fluid { max-width: none; width: 100%; padding-left: var(--space-8); padding-right: var(--space-8); } } /* ============================================================ 4. PAGE HEADER — la franja blanca con titulo y acciones ============================================================ */ /* El header es position:fixed y mide 4rem, hay que compensarlo aca arriba */ .hero.hero-with-header { background: #fff; border-bottom: 1px solid var(--c-gray-200); padding-top: calc(var(--space-16) + var(--space-7)) !important; padding-bottom: var(--space-7) !important; min-height: 0; } .hero.hero-with-header h1 { font-family: var(--font-display); /* El titulo de pagina va al doble: 3.25rem en escritorio. Con clamp() baja solo en pantallas chicas, para que "Homepage Slides" no ocupe tres renglones en un telefono. */ font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; font-weight: 600; letter-spacing: 0.01em; color: var(--c-gray-900); margin-bottom: var(--space-2) !important; } .hero.hero-with-header p { font-size: var(--fs-base); line-height: 1.25rem; color: var(--c-gray-500); } .page-header-actions { gap: var(--space-3); } /* La seccion de contenido que sigue al hero no necesita su propio borde */ section.border-top { border-top: none !important; } /* ============================================================ 5. BOTONES — patron de Tailwind UI ============================================================ */ .btn { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.25rem; font-weight: var(--fw-semibold); padding: var(--space-2) var(--space-3-5); border-radius: var(--r-md) !important; border: none; box-shadow: var(--sh-xs); text-transform: none !important; letter-spacing: 0; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn:active { transform: none; } .btn-sm { font-size: var(--fs-sm); line-height: 1.25rem; padding: var(--space-1-5) var(--space-2-5); } .btn-lg { font-size: var(--fs-md); line-height: 1.5rem; padding: var(--space-2-5) var(--space-4); } /* btn-rounded del framework: en v2 todos los botones usan el mismo radio */ .btn-rounded { border-radius: var(--r-md) !important; } /* Primario: negro solido */ .btn-primary, .btn-primary:not(:disabled):not(.disabled) { background-color: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):hover { background-color: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; color: #fff !important; } /* Secundario: blanco con ring gris (el "white button" de Tailwind UI) */ .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-gray-dark { background-color: #fff !important; color: var(--c-gray-900) !important; border: none !important; box-shadow: var(--sh-xs), inset 0 0 0 1px var(--c-gray-300); } .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-gray-dark:hover { background-color: var(--c-gray-50) !important; color: var(--c-gray-900) !important; box-shadow: var(--sh-xs), inset 0 0 0 1px var(--c-gray-300); } /* Destructivo */ .btn-danger { background-color: var(--c-red-600) !important; border-color: var(--c-red-600) !important; color: #fff !important; } .btn-danger:hover { background-color: var(--c-red-500) !important; border-color: var(--c-red-500) !important; } .btn-outline-danger { background-color: #fff !important; color: var(--c-red-600) !important; border: none !important; box-shadow: var(--sh-xs), inset 0 0 0 1px rgba(220, 38, 38, 0.4); } .btn-outline-danger:hover { background-color: var(--c-red-50) !important; color: var(--c-red-700) !important; } /* Exito */ .btn-success { background-color: var(--c-green-600) !important; border-color: var(--c-green-600) !important; color: #fff !important; } .btn-success:hover { background-color: var(--c-green-700) !important; } .btn-outline-success { background-color: #fff !important; color: var(--c-green-700) !important; border: none !important; box-shadow: var(--sh-xs), inset 0 0 0 1px rgba(22, 163, 74, 0.4); } .btn-outline-success:hover { background-color: var(--c-green-50) !important; color: var(--c-green-700) !important; } .btn:disabled, .btn.disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; } /* Botones de accion en tablas: iconos con hover suave, no de color pleno */ .btn-action { width: 1.75rem; height: 1.75rem; border-radius: var(--r-md); color: var(--c-gray-400); font-size: var(--fs-base); box-shadow: none; transition: background-color 0.12s ease, color 0.12s ease; /* En algunos listados el boton de accion es un