/* * grid-theme.css - Sistema de diseno compartido de tesla. * * Portado desde portal-municipal (Bootstrap 5). Se carga junto con Bootstrap y * Bootstrap Icons desde templates/base_grid.html.twig; NO depende de PureCSS, * W3.CSS ni Font Awesome. * * Ver tesla_diseno_visual.md en la raiz del repositorio para los lineamientos. */ :root { /* Marca Grid IT - default de los modulos de backoffice. --grid-orange y --grid-dark los sobrescribe base_grid.html.twig con los valores de efiweb_color_primario / efiweb_color_acento. */ --grid-orange: #FA4616; --grid-orange-hover: #D9380E; --grid-orange-light: #FFF0ED; --grid-gray: #75787B; --grid-gray-light: #E9ECEF; --grid-dark: #111111; --grid-light: #F4F5F7; --grid-white: #FFFFFF; --grid-border: rgba(117, 120, 123, 0.25); /* Tintes derivados del acento: foco y bordes translucidos. */ --grid-focus-ring: rgba(250, 70, 22, 0.25); --grid-focus-ring-soft: rgba(250, 70, 22, 0.15); --grid-accent-border: rgba(250, 70, 22, 0.3); /* Portal publico - identidad institucional azul */ --pm-azul: #1d3557; --pm-azul-medio: #2e5382; --pm-azul-claro: #e8eef5; --pm-dorado: #f59e0b; --pm-dorado-hover: #d97706; --pm-dorado-claro: #fef3c7; --pm-gris-claro: #f1f3f5; --pm-borde: #dee2e6; /* Estados: color pleno para el texto, tenue para el fondo */ --grid-success: #1a7a45; --grid-success-light: #d1f5e0; --grid-danger: #dc3545; --grid-danger-light: #f8d7da; --grid-warning: #b45309; --grid-warning-light: #fef3c7; --grid-info: #2e5382; --grid-info-light: #e8eef5; /* Forma */ --grid-radius-card: 16px; --grid-radius-btn: 10px; --grid-radius-sm: 6px; --grid-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.03); --grid-shadow-hover: 0 4px 16px rgba(29, 53, 87, 0.12); --grid-shadow-modal: 0 2px 16px rgba(0, 0, 0, 0.12); --grid-transition: all 0.2s ease-in-out; } /* ---------------------------------------------------------------- Base --- */ body { background-color: var(--grid-light); color: var(--grid-dark); font-size: 0.9rem; line-height: 1.5; } a { color: var(--grid-orange); text-decoration: none; } a:hover { color: var(--grid-orange-hover); } .text-grid-dark { color: var(--grid-dark) !important; } .text-grid-gray { color: var(--grid-gray) !important; } .text-grid-orange { color: var(--grid-orange) !important; } /* ------------------------------------------------- Tema publico (azul) --- */ /* Modulos de cara al contribuyente (Tasas). Redefine los tokens de marca sobre el : como las custom properties se heredan, estos valores ganan sobre los que el layout inyecta en :root, sin necesidad de !important. El primario y el acento salen de efiweb_color_*_publico; los tintes derivados quedan fijos sobre el azul institucional. */ .theme-publico { --grid-orange: var(--grid-publico-primario, #1d3557); --grid-orange-hover: var(--pm-azul-medio); --grid-orange-light: var(--pm-azul-claro); --grid-dark: var(--grid-publico-acento, #1d3557); --grid-light: var(--pm-gris-claro); --grid-border: var(--pm-borde); --grid-focus-ring: rgba(29, 53, 87, 0.25); --grid-focus-ring-soft: rgba(29, 53, 87, 0.15); --grid-accent-border: rgba(29, 53, 87, 0.3); } /* -------------------------------------------------------------- Navbar --- */ .navbar-grid { background-color: var(--grid-dark); border-bottom: 3px solid var(--grid-orange); } .navbar-grid .navbar-brand { color: var(--grid-white); font-weight: 700; font-size: 1rem; } .navbar-grid .navbar-brand:hover { color: var(--grid-white); } .navbar-grid .navbar-modulo { color: rgba(255, 255, 255, 0.65); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .navbar-grid .navbar-usuario { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; } .navbar-grid .navbar-usuario strong { color: var(--grid-white); } /* -------------------------------------------------------------- Footer --- */ .footer-grid { background-color: var(--grid-white); border-top: 1px solid var(--grid-border); color: var(--grid-gray); font-size: 0.78rem; } .footer-grid .footer-version { font-size: 0.72rem; } /* ---------------------------------------------------------------- Card --- */ .card-grid { background-color: var(--grid-white); border: 1px solid var(--grid-border); border-radius: var(--grid-radius-card); box-shadow: var(--grid-shadow-card); } .card-grid > .card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; background-color: var(--grid-white); border-bottom: 1px solid var(--grid-border); padding: 0.85rem 1.25rem; border-top-left-radius: var(--grid-radius-card); border-top-right-radius: var(--grid-radius-card); } .card-grid > .card-footer { background-color: var(--grid-white); border-top: 1px solid var(--grid-border); padding: 0.85rem 1.25rem; border-bottom-left-radius: var(--grid-radius-card); border-bottom-right-radius: var(--grid-radius-card); } .card-grid > .card-body { padding: 1.25rem; } .card-grid-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--grid-dark); } .card-grid-title > i { color: var(--grid-orange); font-size: 1.05rem; } /* Subtitulo de contexto (recurso / periodo / remesa) */ .grid-subtitulo { color: var(--grid-gray); font-size: 0.85rem; font-weight: 600; } /* ------------------------------------------------------------- Botones --- */ .btn { border-radius: var(--grid-radius-btn); font-size: 0.85rem; font-weight: 600; transition: var(--grid-transition); } .btn-grid-primary { background-color: var(--grid-orange); border: 1px solid var(--grid-orange); color: var(--grid-white); } .btn-grid-primary:hover, .btn-grid-primary:focus { background-color: var(--grid-orange-hover); border-color: var(--grid-orange-hover); color: var(--grid-white); } .btn-grid-outline { background-color: transparent; border: 1px solid var(--grid-gray); color: var(--grid-gray); font-weight: 500; } .btn-grid-outline:hover, .btn-grid-outline:focus { background-color: var(--grid-gray); color: var(--grid-white); } .btn-grid-outline-orange { background-color: transparent; border: 1px solid var(--grid-orange); color: var(--grid-orange); } .btn-grid-outline-orange:hover, .btn-grid-outline-orange:focus { background-color: var(--grid-orange); color: var(--grid-white); } /* Sobre la banda del navbar el boton se define contra --grid-dark, no contra el acento: en la paleta publica primario y acento son el mismo azul, asi que un outline en el color del acento queda invisible hasta el hover. */ .navbar-grid .btn-grid-outline-orange { border-color: rgba(255, 255, 255, 0.5); color: var(--grid-white); } .navbar-grid .btn-grid-outline-orange:hover, .navbar-grid .btn-grid-outline-orange:focus { background-color: var(--grid-white); border-color: var(--grid-white); color: var(--grid-dark); } /* Los deshabilitados no responden al puntero; Bootstrap solo los atenua. */ .btn.disabled, .btn:disabled { opacity: 0.5; pointer-events: none; } .btn:focus-visible { box-shadow: 0 0 0 0.25rem var(--grid-focus-ring); } /* Barra de acciones: sin esto los botones contiguos quedan pegados, porque solo los separa el espacio en blanco del HTML. */ .grid-botonera { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* enviar_correos y generar_documentos envuelven su boton en un

; sin esto el form rompe la fila flex. */ .grid-botonera form { display: inline-flex; margin: 0; } /* -------------------------------------------------------------- Badges --- */ .badge { border-radius: var(--grid-radius-sm); font-size: 0.72rem; font-weight: 600; } .badge-grid-orange { background-color: var(--grid-orange-light); color: var(--grid-orange); border: 1px solid var(--grid-accent-border); } .badge-grid-gray { background-color: var(--grid-light); color: var(--grid-gray); border: 1px solid var(--grid-border); font-weight: 500; } /* ------------------------------------------------------------- Alertas --- */ .grid-alert { display: flex; align-items: flex-start; gap: 0.6rem; border: 0; border-radius: var(--grid-radius-btn); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); font-size: 0.88rem; } .grid-alert > i { font-size: 1rem; line-height: 1.4; } /* --------------------------------------------------------- Formularios --- */ .form-label { color: var(--grid-gray); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem; } /* col-form-label alinea verticalmente con el input, no lleva el margen. */ .col-form-label.form-label { margin-bottom: 0; } .form-control, .form-select { border-color: var(--grid-border); border-radius: var(--grid-radius-btn); font-size: 0.88rem; } /* Las variantes -sm (las que usa DataTables) traen su propio padding. */ .form-control:not(.form-control-sm) { padding: 0.5rem 0.75rem; } /* Ojo: en select el padding derecho es el hueco de la flecha. Si se lo pisa con un shorthand, la flecha se superpone al texto. */ .form-select:not(.form-select-sm) { padding: 0.5rem 2.25rem 0.5rem 0.75rem; } .form-control:focus, .form-select:focus { border-color: var(--grid-orange); box-shadow: 0 0 0 0.2rem var(--grid-focus-ring-soft); } .form-control[readonly] { background-color: var(--grid-light); color: var(--grid-dark); font-weight: 600; } /* Radios y checkboxes. Bootstrap los pinta con su azul propio (#0d6efd), ajeno a las dos paletas; se los pasa al acento, que cambia solo con .theme-publico. */ .form-check-input:checked { background-color: var(--grid-orange); border-color: var(--grid-orange); } .form-check-input:focus, .form-check-input:not(:checked):focus { border-color: var(--grid-orange); box-shadow: 0 0 0 0.2rem var(--grid-focus-ring-soft); } /* El halo del control marcado al recibir foco tambien viene azul de Bootstrap. */ .form-check-input:checked:focus { box-shadow: 0 0 0 0.2rem var(--grid-focus-ring); } /* -------------------------------------------------------------- Tablas --- */ .grid-table { font-size: 0.9rem; } .grid-table > thead > tr > th { background-color: var(--grid-light); border-bottom: 1px solid var(--grid-border); color: var(--grid-gray); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .grid-table > tbody > tr > td { border-color: var(--grid-border); vertical-align: middle; } /* La card ya dibuja el borde exterior. */ .card-grid .table-responsive { border-bottom-left-radius: var(--grid-radius-card); border-bottom-right-radius: var(--grid-radius-card); } .card-grid .grid-table > tbody > tr:last-child > td { border-bottom: 0; } /* Aire dentro de la celda. Bootstrap trae .5rem, que queda apretado con el tamano de fuente del tema. */ .grid-table > thead > tr > th, .grid-table > tbody > tr > th, .grid-table > tbody > tr > td { padding: 0.65rem 0.75rem; } /* Sin esto las celdas de los extremos quedan pegadas al borde de la card. Incluye th de tbody: la tabla de ficha usa th como etiqueta de fila. */ .card-grid .grid-table > thead > tr > :first-child, .card-grid .grid-table > tbody > tr > :first-child { padding-left: 1.25rem; } .card-grid .grid-table > thead > tr > :last-child, .card-grid .grid-table > tbody > tr > :last-child { padding-right: 1.25rem; } /* Tabla de ficha: etiqueta a la izquierda, valor a la derecha. */ .grid-table-ficha th { background-color: transparent; color: var(--grid-gray); font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; width: 40%; } .grid-table-ficha td { font-weight: 600; } .grid-table-ficha > tbody > tr > th, .grid-table-ficha > tbody > tr > td { padding-bottom: 0.8rem; padding-top: 0.8rem; } /* ------------------------------------------------ DataTables (tema bs5) --- */ /* Estructura real que arma el renderer bootstrap de DataTables 2.x: * * div.dt-container.dt-bootstrap5 * div.row.mt-2.justify-content-between * div.col-md-auto.me-auto > div.dt-length * div.col-md-auto.ms-auto > div.dt-search * div.row.mt-2... > div.col-12 > table <- fila de la tabla * div.row.mt-2... * div.col-md-auto.me-auto > div.dt-info * div.col-md-auto.ms-auto > div.dt-paging * * Ojo: NO emite dt-layout-row/dt-layout-cell (esos son del renderer por * defecto, que la integracion bs5 reemplaza). Los margenes negativos de .row * cancelan el padding de las columnas, y por eso los controles quedan pegados * al borde de la card si no se los corrige. */ .card-grid .dt-container { padding-top: 0.35rem; padding-bottom: 0.85rem; } .card-grid .dt-container > .row { align-items: center; margin-left: 0; margin-right: 0; } /* Los controles (mostrar N / buscar / info / paginado) se alinean con el interior de la card. * * Hay que ganarle en especificidad a una regla del propio DataTables, que * anula el padding de las columnas justamente cuando el contenedor cuelga de * un .table-responsive (nuestro caso): * * div.table-responsive>div.dt-container>div.row>div[class^=col-]:first-child * { padding-left: 0 } * * Esa vale (0,5,4), asi que un `.card-grid .dt-container > .row > .col-md` * (0,4,0) no alcanza. De ahi que se repita la forma del selector de ellos. * * col-12 es la celda de la tabla y queda excluida a proposito: la grilla va a * ancho completo y su margen lo dan el padding de las celdas. */ .card-grid div.table-responsive > div.dt-container > div.row > div[class^="col-"]:not(.col-12):first-child { padding-left: 1.25rem; } .card-grid div.table-responsive > div.dt-container > div.row > div[class^="col-"]:not(.col-12):last-child { padding-right: 1.25rem; } /* El select puede venir suelto o dentro del label, segun el idioma; con inline-flex en ambos el texto y el control quedan separados igual. */ .dt-length, .dt-search, .dt-length label, .dt-search label { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0; } .dt-length label, .dt-search label { color: var(--grid-gray); font-size: 0.8rem; white-space: nowrap; } /* Ancho propio: el auto de DataTables deja el numero contra la flecha. El margin lo pone DataTables; aca la separacion ya la da el gap del flex. */ div.dt-container div.dt-length select.form-select { width: auto; min-width: 5rem; margin-right: 0; } div.dt-container div.dt-search input.form-control { width: auto; max-width: 16rem; margin-left: 0; } .dt-empty { color: var(--grid-gray); padding: 1.5rem; text-align: center; } .dt-info { color: var(--grid-gray); font-size: 0.8rem; } .dt-paging .pagination { margin-bottom: 0; } .page-link { border-color: var(--grid-border); border-radius: var(--grid-radius-sm); color: var(--grid-gray); font-size: 0.85rem; margin: 0 2px; transition: var(--grid-transition); } .page-link:hover { background-color: var(--grid-orange-light); border-color: var(--grid-accent-border); color: var(--grid-orange); } .page-item.active .page-link { background-color: var(--grid-orange); border-color: var(--grid-orange); color: var(--grid-white); } .page-link:focus { box-shadow: 0 0 0 0.25rem var(--grid-focus-ring); } /* --------------------------------------------------------------- Modal --- */ .modal-content.card-grid { border-radius: var(--grid-radius-card); box-shadow: var(--grid-shadow-modal); } .modal-content.card-grid .modal-header, .modal-content.card-grid .modal-footer { border-color: var(--grid-border); padding: 0.85rem 1.25rem; } .modal-content.card-grid .modal-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; } .modal-content.card-grid .modal-title > i { color: var(--grid-orange); } .modal-content.card-grid .modal-body { font-size: 0.92rem; padding: 1.25rem; } /* ------------------------------------------------------------ Progreso --- */ .progress { background-color: var(--grid-gray-light); border-radius: 20px; height: 12px; } .progress-bar { background-color: var(--grid-orange); transition: width 0.3s ease-in-out; } /* ------------------------------------------------------------ Animacion --- */ /* El giro lento de "procesando..." venia del keyframe fa-spin de Font Awesome; al retirar la libreria hace falta definirlo aca. */ @keyframes grid-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .efiweb-slow-ani { display: inline-block; animation: grid-spin 6s infinite linear; }