/* ========================================================================== eDoc · Plantilla base de portal Derivada del «Manual de Identidad Corporativa · BrandBook eDoc» Todos los valores de color salen del manual. No inventar tonos nuevos. Stack: Bootstrap 4.4.1 + jQuery 3.5.1 + esta hoja. Son las versiones exactas que sirve hoy el portal de Bolivia, de donde parte Emiratos. Sin Angular Material: está atado a Angular y aquí el back es .NET. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* Principales · BrandBook p.13 */ --edoc-azul: #001174; /* encabezado, botón primario, iconos sobre blanco */ --edoc-azul-logo: #002978; /* azul del imagotipo */ --edoc-verde: #A8C634; /* acento de marca */ --edoc-negro: #1C1C1C; --edoc-gris-borde: #575756; /* borde de icono y de tab sobre fondo gris */ --edoc-gris: #808B89; /* barra de desplazamiento */ --edoc-gris-texto: #5F6A68; /* el mismo gris, oscurecido para texto: 5,6:1 sobre blanco */ --edoc-gris-claro: #D9D9D9; --edoc-fondo: #dadada; /* fondo de la plataforma · p.39 */ --edoc-tablero: #ffffff; /* tablero · p.39 */ /* Secundarios · BrandBook p.14 */ --azul-2: #334190; --azul-3: #6670AC; --cian-1: #2697D1; --cian-2: #51ACDA; --cian-3: #7DC1E3; --rojo-1: #D63912; --rojo-2: #DE6141; --rojo-3: #E68871; --gris-1: #808B89; --gris-2: #99A2A1; --gris-3: #B3B9B8; --verde-2: #B9D15D; --verde-3: #D5E39E; --naranja-1: #FD9714; --naranja-2: #FDAC43; --naranja-3: #FEC172; /* Señales · BrandBook p.15 */ --senal-exito: var(--edoc-verde); /* ÉXITO · ACEPTAR · AUTORIZADO */ --senal-siguiente: var(--azul-2); /* SIGUIENTE */ --senal-advertencia: var(--naranja-1); /* ADVERTENCIA */ --senal-error: var(--rojo-1); /* RECHAZADO · ERROR */ /* Iconos de archivo · BrandBook p.46 */ --archivo-zip: #FD9714; --archivo-xml: #334190; --archivo-pdf: #D63912; --archivo-xls: #A8C634; --archivo-otros: #575756; /* Tipografía · BrandBook p.17-18 Open Sans es la cara de las plataformas de Facturación Electrónica. Poppins sostiene títulos y navegación. Arial queda como respaldo del stack. */ --fuente-titulos: 'Poppins', Arial, Helvetica, sans-serif; --fuente-texto: 'Open Sans', Arial, Helvetica, sans-serif; --fuente-cifras: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace; /* Rejilla */ --alto-encabezado: 62px; --alto-menu: 44px; --alto-pie: 52px; --radio: 6px; --radio-chico: 4px; --sombra-tablero: 0 1px 2px rgba(28,28,28,.10), 0 1px 8px rgba(28,28,28,.05); --borde-suave: 1px solid #c9c9c9; } /* --- 2. Base ------------------------------------------------------------- */ html { scrollbar-color: var(--edoc-gris) var(--edoc-fondo); /* Lo mismo para la página: el encabezado y el pie fijos no pueden tapar aquello a lo que se salta. */ scroll-padding-top: calc(var(--alto-encabezado) + var(--alto-menu) + 8px); scroll-padding-bottom: calc(var(--alto-pie) + 8px); } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--edoc-fondo); color: var(--edoc-negro); font-family: var(--fuente-texto); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .fuente-titulo { font-family: var(--fuente-titulos); font-weight: 600; } a { color: var(--edoc-azul); text-decoration: none; } a:hover { color: var(--azul-2); text-decoration: underline; } /* Barra de desplazamiento gris de marca · p.39 */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--edoc-fondo); } ::-webkit-scrollbar-thumb { background: var(--edoc-gris); border-radius: 6px; border: 2px solid var(--edoc-fondo); } ::-webkit-scrollbar-thumb:hover { background: #6d7876; } /* Cifras alineadas: todo importe y todo código va en cifras tabulares */ .cifra { font-family: var(--fuente-cifras); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .cifra-der { text-align: right; } /* --- 3. Encabezado · p.38 ------------------------------------------------ «El logo de eDoc siempre estará de manera visible en la barra superior central de la aplicación, respetando márgenes de seguridad.» Reparto acordado: a la izquierda información —ambiente, empresa y usuario—, a la derecha herramientas. Antes el usuario estaba a la derecha y el ambiente en ninguna parte, así que había que mirar a los dos lados para saber dónde estabas y con quién. */ .edoc-encabezado { height: var(--alto-encabezado); background: var(--edoc-azul); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: sticky; top: 0; z-index: 1030; } .edoc-encabezado__marca { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .edoc-encabezado__marca img { height: 34px; display: block; } /* --- 3.1 · Información de contexto -------------------------------------- Texto, no tarjetas. El recuadro daba la sensación de que se podía pulsar, y esto solo informa: en qué ambiente estás, con qué empresa y con qué usuario. */ .edoc-contexto { display: flex; align-items: center; gap: 12px; min-width: 0; } .edoc-ambiente { display: inline-flex; align-items: center; gap: 7px; flex: none; border-radius: 100px; padding: 5px 13px 5px 10px; font-family: var(--fuente-titulos); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; } .edoc-ambiente svg { width: 15px; height: 15px; } /* Producción se pinta distinto a propósito: confundir un ambiente con otro es el error caro. */ .edoc-ambiente--qa, .edoc-ambiente--dev { background: var(--senal-advertencia); color: #3d2400; } .edoc-ambiente--pro, .edoc-ambiente--prod { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); } .edoc-empresa { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: #fff; } .edoc-empresa svg { width: 18px; height: 18px; flex: none; opacity: .8; } .edoc-empresa__textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .edoc-empresa__nombre { font-family: var(--fuente-titulos); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 27ch; } .edoc-empresa__usuario { font-size: 11px; color: rgba(255,255,255,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 27ch; } /* --- 3.2 · Herramientas ------------------------------------------------- Píldoras y círculos, como en el portal de Francia: la barra se lee como una fila de controles, no como una fila de cajas. */ .edoc-encabezado__util { display: flex; align-items: center; gap: 8px; margin-left: auto; } .edoc-encabezado__separador { width: 1px; height: 26px; background: rgba(255,255,255,.22); flex: none; } .edoc-btn-util { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid rgba(255,255,255,.38); color: #fff; border-radius: 100px; padding: 6px 14px; font-size: 12px; line-height: 1; transition: background .15s, border-color .15s; } .edoc-btn-util:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.6); color: #fff; text-decoration: none; } .edoc-btn-util svg { width: 15px; height: 15px; } .edoc-btn-util__codigo { font-family: var(--fuente-titulos); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; } /* Los que son solo icono van en círculo perfecto. */ .edoc-btn-util--icono { width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; flex: none; } .edoc-btn-util--icono svg { width: 16px; height: 16px; } .edoc-bandera { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.35); } .edoc-bandera svg { width: 100%; height: 100%; display: block; } .edoc-usuario { display: flex; align-items: center; background: transparent; border: 0; padding: 0; } .edoc-usuario__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--edoc-verde); color: var(--edoc-azul); display: grid; place-items: center; overflow: hidden; font-family: var(--fuente-titulos); font-weight: 700; font-size: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); } /* Si el archivo del avatar no carga, quedan las iniciales: nunca un hueco. La foto va recortada al círculo con object-fit para que el día que alguien suba un retrato que no sea cuadrado no salga estirado. */ .edoc-usuario__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .edoc-usuario:hover .edoc-usuario__avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.7); } /* --- 4. Menú ------------------------------------------------------------- */ .edoc-menu { background: var(--edoc-tablero); border-bottom: 1px solid #c2c2c2; height: var(--alto-menu); display: flex; align-items: stretch; padding: 0 10px; position: sticky; top: var(--alto-encabezado); z-index: 1029; } .edoc-menu__item { display: flex; align-items: center; gap: 7px; padding: 0 16px; font-family: var(--fuente-titulos); font-size: 13px; font-weight: 500; color: var(--edoc-negro); border-bottom: 3px solid transparent; position: relative; } .edoc-menu__item:hover { color: var(--edoc-azul); text-decoration: none; background: #f4f4f4; } .edoc-menu__item.activo { color: var(--edoc-azul); border-bottom-color: var(--edoc-verde); font-weight: 600; } .edoc-menu__item svg { width: 16px; height: 16px; stroke: currentColor; } /* El panel abre al instante y tarda un momento en cerrarse: al bajar en diagonal hacia una opción, el puntero sale un instante del menú y el panel desaparecía. Era la mitad de las reaperturas de la corrida. */ .edoc-menu__panel { display: block; visibility: hidden; opacity: 0; transition: opacity .12s ease .2s, visibility 0s linear .32s; position: absolute; top: 100%; left: 0; min-width: 336px; background: var(--edoc-tablero); border: 1px solid #c2c2c2; border-top: 0; box-shadow: var(--sombra-tablero); padding: 6px 0; z-index: 1040; } .edoc-menu__contenedor { position: relative; display: flex; } .edoc-menu__contenedor:hover .edoc-menu__panel, .edoc-menu__contenedor:focus-within .edoc-menu__panel { visibility: visible; opacity: 1; transition-delay: 0s, 0s; z-index: 1041; } @media (prefers-reduced-motion: reduce) { .edoc-menu__panel { transition: visibility 0s linear .3s; } } .edoc-menu__grupo { font-family: var(--fuente-titulos); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #6c6c6c; padding: 11px 16px 5px; } .edoc-menu__enlace { display: block; padding: 7px 16px; color: var(--edoc-negro); font-size: 13px; } .edoc-menu__enlace:hover { background: #eef0f7; color: var(--edoc-azul); text-decoration: none; } .edoc-menu__enlace.activo { color: var(--edoc-azul); font-weight: 600; box-shadow: inset 3px 0 0 var(--edoc-verde); } /* Los hijos de una subsección van sangrados y con una guía. Sin esto, «Roles» se lee al mismo nivel que «Cambiar Contraseña», que es de primer nivel. */ .edoc-menu__hijos { position: relative; } .edoc-menu__hijos::before { content: ""; position: absolute; left: 21px; top: 3px; bottom: 5px; width: 1px; background: #dcdfe4; } .edoc-menu__hijos .edoc-menu__enlace { padding-left: 32px; } .edoc-menu__hijos .edoc-menu__enlace.activo { box-shadow: inset 3px 0 0 var(--edoc-verde); } .edoc-menu__enlace--fase { color: var(--edoc-gris-texto); font-style: italic; } .edoc-menu__enlace--por-ubicar { color: #8a5200; } .edoc-menu__enlace--por-ubicar:hover { background: #fff4e4; color: #8a5200; } .edoc-menu__enlace--fase:hover { background: #f4f4f4; color: var(--edoc-gris-texto); cursor: not-allowed; } /* --- Selección múltiple y marcas de fase -------------------------------- El filtro por proveedor no puede ser un campo de texto: cuando llegan documentos de doscientos proveedores nadie recuerda cómo se escribe cada nombre. Bootstrap 4 no trae multiselección, así que es un desplegable con casillas: el mismo control de siempre, con el rótulo contando cuántos van. */ .edoc-multi .dropdown-toggle { background: #fff; cursor: pointer; } .edoc-multi .dropdown-toggle::after { float: right; margin-top: 9px; } /* El menú ya no se desplaza entero: la caja de buscar se queda fija arriba y lo que rueda es la lista. Si rodara todo, al bajar por doscientos nombres se pierde de vista el sitio donde se escribe. */ .edoc-multi__menu { width: 100%; padding: 0; overflow: hidden; } .edoc-multi__buscar { padding: 8px; border-bottom: 1px solid var(--edoc-borde, #e3e3e3); background: #fff; } .edoc-multi__buscar input { font-size: 13px; } .edoc-multi__lista { max-height: 228px; overflow-y: auto; padding: 6px 0; } .edoc-multi__vacio { padding: 12px 14px; font-size: 13px; color: var(--edoc-gris-texto); } .edoc-multi__opcion { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 7px 14px; font-size: 13px; font-weight: 400; cursor: pointer; } .edoc-multi__opcion:hover { background: #f4f6fa; } /* Al recorrer con las flechas, el foco va en la casilla y lo que hay que ver resaltado es la fila entera. */ .edoc-multi__opcion:focus-within { background: #eef2f9; outline: 2px solid var(--verde-1, #8bc53f); outline-offset: -2px; } .edoc-multi__opcion input { margin-top: 3px; flex: none; } /* Lo que no entra en la primera entrega se deja a la vista y en gris, con su fase escrita. Quitarlo le tendería una trampa a quien tiene clientes preguntando; dejarlo sin marcar haría creer que va. */ .edoc-fase-marca { display: inline-flex; align-items: center; font-size: 12px; font-style: italic; color: var(--edoc-gris-texto); border: 1px dashed #cfcfcf; border-radius: 999px; padding: 4px 12px; cursor: not-allowed; user-select: none; } /* --- El asistente de registro ------------------------------------------- Copiado del portal de Francia, que es el que existe: panel de tarjetas a la izquierda con el estado de cada paso, formulario a la derecha y cada campo con su pastilla de obligatorio u opcional. Lo que cambia respecto de Francia va anotado en la propia pantalla. */ .reg { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; } /* Sin carril -la pantalla de la autoridad no lo tiene- la columna del contenido ocupa el ancho entero: si no, se queda con los 300 px que tenia reservados el carril. */ .reg:not(:has(.reg__lado)) { grid-template-columns: 1fr; } .reg__lado { background: #fff; border: 1px solid var(--edoc-linea, #e3e3e3); border-radius: 10px; overflow: hidden; position: sticky; top: 76px; } .reg__cabecera { padding: 16px 16px 12px; border-bottom: 1px solid #f0f0f0; } .reg__rotulo { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; font-family: var(--fuente-titulos, inherit); font-weight: 600; } .reg__nombre { font-family: var(--fuente-titulos, inherit); font-size: 15px; font-weight: 600; color: var(--edoc-azul); line-height: 1.2; } .reg__folio { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } .reg__folio-etiqueta { font-size: 10.5px; color: #666666; margin: 8px 0 3px; } .reg__folio-cod { font-family: var(--fuente-cifras); font-size: 11px; color: #4a4a4a; background: #f6f7fa; border: 1px solid #e7e9ef; border-radius: 6px; padding: 6px 8px; margin-top: 6px; word-break: break-all; line-height: 1.35; } /* El código y su botón de copiar, en la misma fila. */ .reg__folio-fila { display: flex; gap: 6px; align-items: stretch; margin-top: 6px; } .reg__folio-fila .reg__folio-cod { flex: 1; min-width: 0; margin-top: 0; } .reg__folio-copiar { flex: none; font-size: 11.5px; padding: 4px 10px; } .reg__folio-ayuda { font-size: 10.5px; color: #666666; margin-top: 5px; line-height: 1.35; } .reg__avance { padding: 12px 16px 14px; } .reg__avance-t { font-size: 11.5px; color: #6a6a6a; margin-bottom: 6px; } .reg__barra { height: 4px; background: #ececec; border-radius: 99px; overflow: hidden; } .reg__barra i { display: block; height: 100%; background: var(--edoc-verde); border-radius: 99px; transition: width .25s ease; } .reg__pasos { list-style: none; margin: 0; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .reg__paso { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; border: 1px solid #e6e6e6; border-radius: 9px; padding: 11px 12px; background: #fff; cursor: default; } .reg__paso--puede { cursor: pointer; } .reg__paso--puede:hover { border-color: #cfd6e4; background: #fafbfd; } .reg__paso--activo { background: #f4f8e6; border-color: var(--edoc-verde); } /* Cuando un paso no pasa la validación, la tarjeta se pone en rojo. Es donde Francia enseña el error, y es lo que hace que se encuentre sin leer el aviso: el panel siempre está a la vista. */ .reg__paso--error { background: #fdf1f1; border-color: #e3a9a5; } .reg__paso--error .reg__paso-icono { color: #b3261e; } .reg__paso-icono { color: #7c8496; margin-top: 1px; } .reg__paso--activo .reg__paso-icono { color: var(--edoc-azul); } /* Son dentro de una celda de rejilla: sin display:block el subtítulo se pega al título en la misma línea. */ .reg__paso-t { display: block; font-family: var(--fuente-titulos, inherit); font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #22252e; } .reg__paso-s { display: block; font-size: 11px; color: #666666; line-height: 1.3; margin-top: 2px; } .reg__paso-n { font-family: var(--fuente-cifras); font-size: 10.5px; color: #5e5e5e; background: #f1f1f1; border-radius: 99px; padding: 2px 7px; white-space: nowrap; } .reg__paso--activo .reg__paso-n { background: var(--edoc-verde); color: #1d2410; font-weight: 600; } .reg__paso-chip { display: inline-block; font-family: var(--fuente-titulos, inherit); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; margin-top: 6px; } .reg__paso-chip--completado { background: #eef6da; color: #4d6b12; } .reg__paso-chip--requerido { background: #fdeaea; color: #b3261e; } .reg__paso-chip--opcional { background: #f1f1f1; color: #595959; } .reg__paso-chip--error { background: #fdd9d9; color: #a01a14; } .reg__tic { position: absolute; top: 9px; right: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--edoc-verde); color: #1d2410; display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .reg__paso--hecho .reg__tic { display: flex; } .reg__paso--hecho .reg__paso-n { visibility: hidden; } .reg__tic--error { background: #b3261e; color: #fff; } .reg__paso--error .reg__tic { display: flex; } .reg__paso--error .reg__paso-n { visibility: hidden; } .reg__cuerpo { background: #fff; border: 1px solid var(--edoc-linea, #e3e3e3); border-radius: 10px; padding: 22px 26px 20px; } .reg__eyebrow { text-align: center; font-family: var(--fuente-titulos, inherit); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; } .reg__titulo { text-align: center; font-family: var(--fuente-titulos, inherit); font-size: 21px; font-weight: 600; color: var(--edoc-azul); margin: 4px 0 2px; } .reg__sub { text-align: center; font-size: 13px; color: #636363; margin-bottom: 18px; } /* La pastilla que dice si el campo hay que rellenarlo. En Francia va al lado del rótulo y se lee de un vistazo; es mejor que un asterisco. */ .marca-campo { display: inline-block; font-family: var(--fuente-titulos, inherit); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; margin-left: 7px; vertical-align: 1px; /* Con fondo propio: sin el, la capsula sin modificador -la de «Opcional»- quedaba blanca sobre blanco y no se veia. */ background: #eef0f2; color: #5a6168; } .marca-campo--obligatorio { background: #fdeaea; color: #b3261e; } .marca-campo--opcional { background: #fff4e2; color: #8a5200; } /* Ni obligatorio ni opcional: depende de algo. Decirlo «opcional» sería mentir a quien sí está registrada, y «obligatorio» dejaría fuera a quien no lo está. */ .marca-campo--condicional { background: #eceffa; color: #222c63; } .reg__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #f0f0f0; flex-wrap: wrap; } /* --- El tipo de solicitud ------------------------------------------------ Dos tarjetas, no dos redondeles sueltos: la elegida se ve de lejos. */ .reg__tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; } .reg__tipo { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; border: 1px solid #dcdcdc; border-radius: 9px; padding: 13px 15px; background: #fff; font-weight: 400; transition: border-color .15s, background .15s; } .reg__tipo:hover { border-color: #bcc6d8; } .reg__tipo input { position: absolute; opacity: 0; pointer-events: none; } .reg__tipo-marca { width: 17px; height: 17px; border-radius: 50%; border: 1.6px solid #c6c6c6; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; } /* Como en las tarjetas del panel: son , y sin display:block el subtítulo se pega al título en la misma línea. */ .reg__tipo-t { display: block; font-family: var(--fuente-titulos, inherit); font-size: 14px; font-weight: 600; line-height: 1.25; } .reg__tipo-s { display: block; font-size: 11.5px; color: #666666; line-height: 1.35; margin-top: 2px; } .reg__tipo input:checked ~ .reg__tipo-marca { border-color: var(--edoc-verde); background: var(--edoc-verde); color: #1d2410; } .reg__tipo:has(input:checked) { border-color: var(--edoc-verde); background: #f7fbec; } .reg__tipo input:focus-visible ~ .reg__tipo-marca { outline: 2px solid var(--edoc-azul); outline-offset: 2px; } /* --- La subida del documento -------------------------------------------- Zona grande en vez de un campo de fichero suelto: es lo que hace Francia y es lo que se acierta a la primera. */ /* Separador de grupo dentro de un paso: dice que lo que viene es una sola cosa -la direccion- y no cuatro campos sueltos. */ /* --- La verificación de seguridad ---------------------------------------- Con la forma que tiene una de verdad: recuadro con marco, casilla grande a la izquierda y una espera corta antes del visto. Esa espera no es adorno —es lo que hace que se reconozca— y además es honesta: en producción hay una ida y vuelta al servicio que la valida. No se usa la marca de ningún proveedor: aquí se enseña el comportamiento, no se integra a nadie. */ .edoc-captcha { display: flex; align-items: center; gap: 12px; max-width: 320px; border: 1px solid #d3d7de; border-radius: 6px; background: #f9f9fa; padding: 12px 14px; box-shadow: 0 1px 2px rgba(28,28,28,.06); } .edoc-captcha__casilla { width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid #b9bec7; border-radius: 3px; background: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .edoc-captcha__casilla:focus-visible { outline: 2px solid var(--edoc-azul); outline-offset: 2px; } .edoc-captcha__tic { color: var(--edoc-verde); font-size: 20px; line-height: 1; display: none; } .edoc-captcha__giro { width: 18px; height: 18px; border: 2px solid #d3d7de; border-top-color: var(--edoc-azul); border-radius: 50%; display: none; animation: edoc-captcha-giro .7s linear infinite; } @keyframes edoc-captcha-giro { to { transform: rotate(360deg); } } .edoc-captcha__texto { font-size: 13.5px; color: var(--edoc-negro); flex: 1 1 auto; } /* El rótulo va en un solo nodo de texto y se parte por ancho: con un
dentro, el diccionario no lo reconoce y se queda en español. */ .edoc-captcha__marca { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8a9099; font-size: 8.5px; line-height: 1.15; text-align: center; } .edoc-captcha__marca span { max-width: 56px; } .edoc-captcha__real { position: absolute; opacity: 0; pointer-events: none; } .edoc-captcha[data-estado="girando"] .edoc-captcha__giro { display: block; } .edoc-captcha[data-estado="hecho"] .edoc-captcha__tic { display: block; } .edoc-captcha[data-estado="hecho"] .edoc-captcha__casilla { border-color: var(--edoc-verde); cursor: default; } .edoc-captcha[data-estado="hecho"] .edoc-captcha__texto { color: var(--edoc-gris-texto); } .edoc-captcha.is-invalid { border-color: var(--rojo-1); background: #fdf4f2; } @media (prefers-reduced-motion: reduce) { .edoc-captcha__giro { animation-duration: 2s; } } .reg__grupo-titulo { font-family: var(--fuente-titulos, inherit); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--edoc-gris-texto); margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--edoc-gris-claro); } .reg__subir { display: block; border: 2px dashed #d2d2d2; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; background: #fcfcfd; margin: 0; transition: border-color .15s, background .15s; } .reg__subir:hover { border-color: var(--edoc-verde); background: #f9fcf2; } .reg__subir input { position: absolute; opacity: 0; pointer-events: none; } .reg__subir-icono { width: 46px; height: 46px; border-radius: 50%; border: 1.6px solid #c9c9c9; display: inline-flex; align-items: center; justify-content: center; color: #6f7686; margin-bottom: 12px; } .reg__subir-t { display: inline-block; font-family: var(--fuente-titulos, inherit); font-size: 15px; font-weight: 600; color: #22252e; } .reg__subir-marca { margin-left: 7px; vertical-align: 2px; } .reg__subir-s { display: block; font-size: 12.5px; color: #636363; margin-top: 3px; } .reg__subir-f { display: block; font-family: var(--fuente-cifras); font-size: 11px; color: #6b6b6b; margin-top: 6px; } /* El pie del recuadro va fuera de la etiqueta, porque todo lo de dentro abre el selector de archivos al pulsarlo. */ .reg__subir-pie { display: flex; justify-content: flex-end; margin-top: 8px; } .reg__subir--lleno { border-style: solid; border-color: var(--edoc-verde); background: #f7fbec; } /* El input va invisible, así que el rojo de «falta esto» lo lleva el recuadro. */ .reg__subir:has(> input.is-invalid) { border-color: var(--rojo-1); background: #fdf4f2; } .reg__subir:focus-within { outline: 2px solid var(--edoc-azul); outline-offset: 2px; } /* El icono que acompaña al título de cada paso. */ .reg__titulo-fila { display: flex; align-items: center; justify-content: center; gap: 9px; } .reg__titulo-fila .reg__titulo { margin: 0; } .reg__titulo-icono { color: var(--edoc-azul); display: inline-flex; } /* Los consentimientos, como en Francia: una línea por documento con el nombre subrayado. Nada de tarjetas. */ .reg__acepto { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 14px; } .reg__acepto input { width: 16px; height: 16px; flex: none; margin: 0; } .reg__acepto a { text-decoration: underline; } /* --- La revisión final --------------------------------------------------- */ .rev__t { border: 1px solid #e6e6e6; border-radius: 9px; padding: 14px 16px; margin-bottom: 10px; } .rev__alto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .rev__paso { font-family: var(--fuente-cifras); font-size: 10.5px; color: #6a6a6a; background: #f3f3f3; border-radius: 5px; padding: 2px 8px; } .rev__ok, .rev__falta { font-family: var(--fuente-titulos, inherit); font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 2px 8px; } .rev__ok { background: #eef6da; color: #4d6b12; } .rev__falta { background: #fdeaea; color: #b3261e; } .rev__puntos { margin-left: auto; display: flex; gap: 4px; } .rev__puntos i { width: 6px; height: 6px; border-radius: 50%; background: #dcdcdc; } .rev__puntos i.lleno { background: var(--edoc-verde); } .rev__rotulo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; font-family: var(--fuente-titulos, inherit); font-weight: 600; } .rev__nombre { font-family: var(--fuente-titulos, inherit); font-size: 17px; font-weight: 600; color: #22252e; line-height: 1.2; } .rev__detalle { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; font-size: 13px; } .rev__detalle dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 4px 14px; margin: 0; } .rev__detalle dt { color: #5e5e5e; font-weight: 400; } .rev__detalle dd { margin: 0; color: #22252e; } @media (max-width: 900px) { .reg { grid-template-columns: 1fr; } .reg__lado { position: static; } .reg__pasos { max-height: none; } } /* El botón de ver la contraseña. Va dentro del propio campo para que no desplace nada del formulario. */ .edoc-clave-caja { position: relative; } .edoc-clave-caja > input { padding-right: 40px; } .edoc-clave-ojo { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 6px; color: #6f7686; cursor: pointer; padding: 0; } /* El mismo ojo en todas las pantallas: con el armazón cargado el icono viene del juego del portal y sin tamaño propio, y se estiraba al del botón. */ .edoc-clave-ojo svg { width: 18px; height: 18px; } .edoc-clave-ojo:hover { background: #f0f2f7; color: var(--edoc-azul); } .edoc-clave-ojo[aria-pressed="true"] { color: var(--edoc-azul); } .edoc-clave-ojo:focus-visible { outline: 2px solid var(--edoc-azul); outline-offset: 1px; } /* En error, Bootstrap pinta su icono rojo a la derecha del campo, justo debajo del ojo, y los dos se pisaban. En la contraseña sobra: el borde rojo y el mensaje ya dicen que hay un error, y ese hueco es del ojo. */ .edoc-clave-caja > .form-control.is-invalid, .edoc-clave-caja > .form-control.is-valid { background-image: none; padding-right: 40px; } /* Una frase textual de una reunión, citada dentro de una pantalla. Se distingue del texto propio para que no se confunda lo que dijo alguien con lo que decidimos nosotros. */ .cita-revision { margin: 0; padding: 10px 0 10px 16px; border-left: 3px solid var(--edoc-verde); font-size: 15px; color: #2f3607; background: #f7fbec; border-radius: 0 6px 6px 0; } .cita-revision cite { display: block; font-style: normal; font-size: 12px; color: #6b7a3a; margin-top: 5px; } /* Los tres tipos de aviso, con color propio. No es decoración: es lo que permite discutir si de verdad son tres cosas distintas o una sola. alerta le toca hacer algo al usuario notificacion ya pasó algo y conviene saberlo comunicado lo anuncia GuruSoft, sin documento detrás */ /* El tipo de aviso: rótulo en gris, icono teñido. Es el patrón «Gris con color» del manual de marca, donde el icono se tiñe según lo que representa —ZIP #FD9714, XML #334190, PDF #D63912, XLS #A8C634, otros #575756—. La pastilla de fondo de color no está en el manual y por eso no se usa. */ .edoc-aviso-tipo { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fuente-titulos); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6f7686; margin-bottom: 5px; } .edoc-aviso-tipo svg { width: 14px; height: 14px; flex: none; } /* Alerta: pide que hagas algo, así que va en el naranja de advertencia. Notificación: informa, y toma el azul con el que el manual tiñe el XML. Comunicado: viene de nosotros y no pide nada, así que se queda en el gris de «otros». */ .edoc-aviso-tipo--alerta svg { color: #FD9714; } .edoc-aviso-tipo--notificacion svg { color: #334190; } .edoc-aviso-tipo--comunicado svg { color: #575756; } /* Un aviso sin leer se distingue del resto sin depender solo del color: el titulo va en negrita y ademas lleva un punto, arriba a la derecha. Ahi mismo va el aspa de archivar, asi que se relevan: en reposo se ve el punto, y al pasar por encima del renglon el punto deja su sitio al aspa. No compiten, y el borde derecho se queda tranquilo mientras solo se lee. */ .edoc-notificacion--nueva .edoc-notificacion__titulo { font-weight: 700; } .edoc-notificacion--nueva::after { content: ""; position: absolute; top: 14px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--edoc-azul); transition: opacity .12s ease; } .edoc-notificacion--nueva:hover::after { opacity: 0; } /* La lista completa, en la pantalla. */ .aviso-fila { display: grid; grid-template-columns: 118px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid #eceded; align-items: start; } .aviso-fila:last-child { border-bottom: 0; } .aviso-fila__t { font-family: var(--fuente-titulos); font-size: 14.5px; font-weight: 600; color: #22252e; } .aviso-fila__d { font-size: 13px; color: #6a6a6a; margin-top: 2px; line-height: 1.45; } .aviso-fila__c { font-family: var(--fuente-cifras); font-size: 11.5px; color: #6b6b6b; white-space: nowrap; } .aviso-fila--nueva .aviso-fila__t::after { content: "sin leer"; font-family: var(--fuente-titulos); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4a5068; background: #eceef4; border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 2px; } @media (max-width: 700px) { .aviso-fila { grid-template-columns: 1fr; gap: 4px; } .aviso-fila__c { grid-row: 1; } } /* La franja de aviso permanente. Lo que hay que ver sin abrir nada: un corte de servicio, un cambio que afecta a todos. Va en el naranja de ADVERTENCIA, que es lo que el manual reserva para eso, y encima del contenido para que no dependa de que el usuario baje. */ .edoc-franja { display: flex; align-items: flex-start; gap: 10px; background: #fff6e9; border-bottom: 1px solid var(--senal-advertencia); padding: 11px 18px; font-size: 13.5px; color: #6d4300; line-height: 1.45; } .edoc-franja__icono { color: var(--senal-advertencia); flex: none; display: flex; margin-top: 1px; } .edoc-franja__icono svg { width: 18px; height: 18px; } .edoc-franja__texto { flex: 1; } .edoc-franja__texto strong { color: #59360a; } .edoc-franja__cerrar { background: none; border: 0; color: #7a5a2c; font-size: 21px; line-height: 1; padding: 0 4px; cursor: pointer; flex: none; border-radius: 5px; } .edoc-franja__cerrar:hover { background: #fbe9d2; color: #59360a; } .edoc-franja__cerrar:focus-visible { outline: 2px solid var(--edoc-azul); outline-offset: 1px; } @media (max-width: 640px) { .edoc-franja { padding: 10px 14px; font-size: 13px; } } /* El estado del sistema. Se diferencia de la franja de aviso en que no lleva aspa: no se cierra porque sigue siendo verdad. Los dos colores son los del manual —ADVERTENCIA y RECHAZADO/ERROR—, que aquí sí aplican de verdad. */ .edoc-estado-sistema { display: flex; align-items: flex-start; gap: 10px; padding: 11px 18px; font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid; /* Se queda pegada bajo el menú al desplazar. Un mantenimiento en curso no puede desaparecer al bajar: sigue siendo verdad en toda la pantalla, y si alguien llega a la mitad de una tabla tiene que seguir viéndolo. */ position: sticky; top: calc(var(--alto-encabezado) + var(--alto-menu)); z-index: 1027; } /* Sin menú —acceso, registro, onboarding— se pega directamente al encabezado. */ body[data-armazon="reducido"] .edoc-estado-sistema { top: var(--alto-encabezado); } .edoc-estado-sistema__icono { flex: none; display: flex; margin-top: 1px; } .edoc-estado-sistema__icono svg { width: 18px; height: 18px; } .edoc-estado-sistema--advertencia { background: #fff2df; border-bottom-color: var(--senal-advertencia); color: #6d4300; } .edoc-estado-sistema--advertencia .edoc-estado-sistema__icono { color: var(--senal-advertencia); } .edoc-estado-sistema--advertencia strong { color: #59360a; } .edoc-estado-sistema--error { background: #fdefec; border-bottom-color: var(--senal-error); color: #7d2a12; } .edoc-estado-sistema--error .edoc-estado-sistema__icono { color: var(--senal-error); } .edoc-estado-sistema--error strong { color: #66200d; } @media (max-width: 640px) { .edoc-estado-sistema { padding: 10px 14px; font-size: 13px; } } /* La marca de la pantalla de mantenimiento, en el naranja de ADVERTENCIA para distinguirla de «En construcción», que es azul. Una no existe todavía; la otra existe y vuelve sola. */ .edoc-obra__marca--mantenimiento { color: var(--senal-advertencia); } /* Los correos como etiquetas que se quitan con una aspa, que es como se ven en Bolivia. Cada bloque admite varios: «aquí se pueden ir varios». */ .edoc-fichas { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; } .edoc-ficha-correo { display: inline-flex; align-items: center; gap: 6px; background: #eef1f8; border: 1px solid #dde2ee; border-radius: 100px; padding: 3px 6px 3px 11px; font-size: 12.5px; color: #2b3350; font-family: var(--fuente-cifras); } .edoc-ficha-correo__x { background: none; border: 0; color: #7c8496; font-size: 15px; line-height: 1; padding: 0 3px; cursor: pointer; border-radius: 50%; } .edoc-ficha-correo__x:hover { background: #d9dfee; color: #1c2440; } .edoc-ficha-correo__x:focus-visible { outline: 2px solid var(--edoc-azul); outline-offset: 1px; } /* La línea que dice qué recibe cada bloque, con su marca verde, como allí. */ .edoc-recibe { display: flex; gap: 7px; font-size: 12.5px; color: #5c5c5c; line-height: 1.45; } .edoc-recibe svg { width: 15px; height: 15px; flex: none; color: var(--edoc-verde); margin-top: 2px; } /* La campana enseña todos los avisos: son pocos y no hay una pantalla que los liste. Prometer un «ver todas» que lleva al formulario de correos sería mentir, y qué pantalla debería listarlos es justo lo que está sin decidir. */ .edoc-notificaciones { max-height: 70vh; overflow-y: auto; } .edoc-notificaciones__pie { display: block; font-size: 12px; color: #666666; text-align: center; } /* --- 5. Página ----------------------------------------------------------- */ .edoc-pagina { padding: 16px 18px var(--alto-pie); max-width: 1680px; margin: 0 auto; width: 100%; flex: 1; } /* --- La barra del titulo, pegada al desplazar ----------------------------- Las migas de pan tienen que seguir a la vista: dicen donde estas, y en una tabla larga se pierde justo cuando hace falta. No se pega solo la miga porque su bloque contenedor acaba con la barra: dejaria de pegarse a los dos centimetros. Al pegarse se encoge -se va el subtitulo y el titulo baja de tamano- porque una barra de tres lineas fija se come la pantalla. La clase la pone el guion con un centinela: en CSS no hay forma de saber si algo esta pegado. */ .edoc-titulo-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; /* Debajo de la franja de avisos, si la hay. La franja también es pegajosa y a la misma altura: sin descontarla, las dos se montaban y la franja tapaba el título. El alto lo mide el guion, porque depende de cuántas líneas ocupe el texto del aviso. */ position: sticky; top: calc(var(--alto-encabezado) + var(--alto-menu) + var(--alto-aviso, 0px)); z-index: 1026; background: var(--edoc-fondo, #dadada); padding: 10px 0 8px; margin-top: -10px; } /* Sin menu -acceso, registro, verificacion- se pega directamente al encabezado. */ body[data-armazon="reducido"] .edoc-titulo-barra { top: calc(var(--alto-encabezado) + var(--alto-aviso, 0px)); } /* Un sistema caido se queda por encima: sigue siendo verdad en toda la pantalla. */ .edoc-estado-sistema ~ #armazon .edoc-titulo-barra { z-index: 1026; } .edoc-titulo-barra.esta-pegada { box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .28); border-bottom: 1px solid #c9cbcb; padding-bottom: 6px; } .edoc-titulo-barra.esta-pegada .edoc-subtitulo { display: none; } .edoc-titulo-barra.esta-pegada .edoc-titulo { font-size: 17px; } @media (prefers-reduced-motion: no-preference) { .edoc-titulo-barra .edoc-titulo { transition: font-size .14s ease-out; } } /* El centinela: un pelo de alto justo encima de la barra. Cuando sale de la pantalla por arriba, la barra esta pegada. */ .edoc-centinela { height: 1px; margin: 0; padding: 0; } .edoc-miga { font-size: 11.5px; color: #5c5c5c; margin-bottom: 2px; } /* El separador vale entre cualquier par, no solo entre dos span: algunas migas llevan el primer tramo como enlace y se quedaban pegadas. */ .edoc-miga > * + *::before { content: "›"; margin: 0 6px; color: var(--edoc-gris-texto); } .edoc-titulo { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; color: var(--edoc-azul); margin: 0; } .edoc-subtitulo { color: #4a4a4a; font-size: 12.5px; margin: 2px 0 0; max-width: 78ch; } /* Tablero blanco sobre fondo #dadada · p.39 */ .edoc-tablero { background: var(--edoc-tablero); border-radius: var(--radio); box-shadow: var(--sombra-tablero); border: var(--borde-suave); margin-bottom: 16px; } .edoc-tablero__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #e3e3e3; flex-wrap: wrap; } .edoc-tablero__titulo { font-family: var(--fuente-titulos); font-size: 13.5px; font-weight: 600; color: var(--edoc-azul); margin: 0; display: flex; align-items: center; gap: 8px; } .edoc-tablero__cuerpo { padding: 16px; } .edoc-tablero__pie { padding: 11px 16px; border-top: 1px solid #e3e3e3; } /* --- 6. Formularios ------------------------------------------------------ «textos como las acciones o descripción del campo deben ir en negrita y la primera palabra con letra mayúscula» · p.41 */ .edoc-etiqueta { display: block; font-weight: 700; font-size: 12px; color: #2f2f2f; margin-bottom: 4px; } .edoc-etiqueta .obligatorio { color: var(--senal-error); margin-left: 2px; } .form-control, .custom-select { font-size: 13px; border: 1px solid #b6b6b6; border-radius: var(--radio-chico); padding: 6px 10px; color: var(--edoc-negro); background-color: #fff; } .form-control:focus, .custom-select:focus { border-color: var(--edoc-azul); box-shadow: 0 0 0 3px rgba(0,17,116,.12); } .form-control::placeholder { color: #757575; } .edoc-ayuda { font-size: 11.5px; color: #666; margin-top: 4px; } /* --- 7. Botones · jerarquía --------------------------------------------- Un solo botón primario por pantalla. */ .btn { font-family: var(--fuente-titulos); font-size: 13px; font-weight: 500; border-radius: var(--radio-chico); padding: 6px 16px; } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,17,116,.25); } .btn svg { width: 15px; height: 15px; vertical-align: -3px; } .btn-edoc-primario { background: var(--edoc-azul); border: 1px solid var(--edoc-azul); color: #fff; } .btn-edoc-primario:hover { background: #000d5c; border-color: #000d5c; color: #fff; } .btn-edoc-secundario { background: #fff; border: 1px solid var(--edoc-azul); color: var(--edoc-azul); } .btn-edoc-secundario:hover { background: #eef0f7; color: var(--edoc-azul); } .btn-edoc-terciario { background: transparent; border: 1px solid #b6b6b6; color: #3d3d3d; } .btn-edoc-terciario:hover { background: #f1f1f1; color: var(--edoc-negro); } .btn-edoc-exito { background: var(--senal-exito); border: 1px solid #94b02c; color: var(--edoc-negro); font-weight: 600; } .btn-edoc-exito:hover { background: #98b62e; color: var(--edoc-negro); } .btn-edoc-error { background: #fff; border: 1px solid var(--senal-error); color: var(--senal-error); } .btn-edoc-error:hover { background: var(--senal-error); color: #fff; } .btn-edoc-siguiente { background: var(--senal-siguiente); border: 1px solid var(--senal-siguiente); color: #fff; } .btn-edoc-siguiente:hover { background: #2a3679; color: #fff; } .btn:disabled, .btn.disabled { opacity: .45; } /* Botón de icono dentro de la tabla · borde azul sobre blanco · p.40 */ .edoc-accion { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--edoc-azul); border-radius: var(--radio-chico); background: #fff; color: var(--edoc-azul); } .edoc-accion:hover { background: var(--edoc-azul); color: #fff; } .edoc-accion svg { width: 16px; height: 16px; } .edoc-accion--gris { border-color: var(--edoc-gris-borde); color: var(--edoc-gris-borde); } .edoc-accion--gris:hover { background: var(--edoc-gris-borde); color: #fff; } /* La acción principal de una fila, rellena. Tres iconos con el mismo borde azul no dicen cuál es la que se usa a diario; con una rellena se ve de un vistazo. */ .edoc-accion--principal { background: var(--edoc-azul); color: #fff; } .edoc-accion--principal:hover { background: var(--azul-2); color: #fff; } /* Cambios sin guardar · RN-02 de la corrida del 14 sep. Una línea junto a los botones que dice qué se va a guardar antes de pulsar. */ .edoc-cambios { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; font-size: 13px; color: var(--edoc-negro); } .edoc-cambios::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0a100; flex: none; transform: translateY(-1px); } .edoc-cambios strong { font-weight: 600; } /* Cabecera del menú del avatar: nombre y, debajo, el correo de la cuenta. */ .edoc-cuenta-cabecera { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; border-bottom: 1px solid #eceef3; margin-bottom: 4px; } .edoc-cuenta-cabecera__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 13.5px; color: var(--edoc-negro); } .dropdown-menu:has(> .edoc-cuenta-cabecera) { min-width: 280px; } .edoc-cuenta-cabecera__correo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6f7686; white-space: nowrap; } .edoc-cuenta-cabecera__correo svg { width: 14px; height: 14px; flex: none; } /* Pestañas · «Mi perfil» las usa para separar cuenta, seguridad y rol, igual que el portal de Francia. Es una barra de navegación dentro de la pantalla, así que cada pestaña es un botón y el panel dice cuál le corresponde. */ .edoc-pestanas { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--edoc-gris-borde); } .edoc-pestanas__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-family: var(--fuente-titulos); font-weight: 600; font-size: 14px; color: #5a5f6a; } .edoc-pestanas__boton svg { width: 16px; height: 16px; } .edoc-pestanas__boton:hover { color: var(--edoc-azul); } .edoc-pestanas__boton[aria-selected="true"] { color: var(--edoc-azul); border-bottom-color: var(--edoc-verde); } /* La foto de perfil, en su tarjeta. */ .edoc-perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .edoc-perfil-foto img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; } .edoc-perfil-dato + .edoc-perfil-dato { margin-top: 14px; } /* Mi perfil · una sola rejilla para las tres pestañas: lo principal a la izquierda y lo complementario a la derecha, en dos mitades. Al cambiar de pestaña las tarjetas no cambian de ancho ni de sitio. */ .perfil-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } .perfil-rejilla__principal, .perfil-rejilla__lado { display: grid; gap: 18px; align-content: start; min-width: 0; } .perfil-rejilla .edoc-tablero { margin-bottom: 0; } .perfil-rejilla .nota { margin: 0; } /* Mismo alto de cabecera con chip y sin él: los títulos quedan a la misma altura. */ .perfil-rejilla .edoc-tablero__cabecera { min-height: 56px; align-items: center; } @media (max-width: 991px) { .perfil-rejilla { grid-template-columns: 1fr; } } /* La pestaña pulsada no deja el recuadro negro del foco del navegador; el foco por teclado se sigue viendo, con el azul de la marca. */ .edoc-pestanas__boton:focus { outline: 0; } .edoc-pestanas__boton:focus-visible { box-shadow: inset 0 0 0 2px var(--edoc-azul); border-radius: 4px 4px 0 0; } /* Los permisos del rol, en el perfil: carpeta por módulo y estado a la derecha. Es el mismo árbol de «Roles», pero aquí solo se lee. */ .perfil-permisos__grupo + .perfil-permisos__grupo { margin-top: 16px; } .perfil-permisos__modulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 13px; color: var(--edoc-azul); padding-bottom: 6px; border-bottom: 1px solid var(--edoc-gris-borde); margin-bottom: 4px; } .perfil-permisos__grupo .form-check { margin: 4px 0; } .perfil-permisos__grupo .form-check-input:disabled ~ .form-check-label { color: var(--edoc-negro); opacity: 1; } /* Lista sin filas · la tabla dice por qué está vacía y qué hacer. */ .edoc-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; white-space: normal; } .edoc-vacio__icono { width: 48px; height: 48px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 50%; background: #eef1f8; color: var(--edoc-azul); } .edoc-vacio__icono svg { width: 22px; height: 22px; } .edoc-vacio__titulo { font-family: var(--fuente-titulos); font-weight: 600; font-size: 15px; color: var(--edoc-negro); } .edoc-vacio__texto { max-width: 46ch; font-size: 13px; color: #6d6d6d; } .edoc-vacio .btn { margin-top: 8px; } table.edoc-tabla tbody td.dataTables_empty { padding: 0; background: #fff; } table.edoc-tabla tbody tr:hover td.dataTables_empty { background: #fff; } @media (max-width: 900px) { /* En móvil cada celda lleva el rótulo de su columna; la vacía no tiene columna. */ table.edoc-tabla.apilable tbody td.dataTables_empty { display: block; } table.edoc-tabla.apilable tbody td.dataTables_empty::before { content: none; } } /* Iconos de archivo con su color · p.46 */ .icono-xml { color: var(--archivo-xml); } .icono-pdf { color: var(--archivo-pdf); } .icono-xls { color: var(--archivo-xls); } .icono-zip { color: var(--archivo-zip); } /* --- 8. Pastillas de estado ---------------------------------------------- */ .edoc-estado { /* `position: relative` para que el texto de lector de pantalla que va dentro quede contenido aquí. Sin esto se posiciona contra el bloque inicial, se escapa del contenedor que desplaza la tabla y estira la página entera. */ position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 100px; padding: 3px 11px 3px 8px; font-size: 11.5px; font-weight: 600; border: 1px solid; line-height: 1.35; } .edoc-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .edoc-estado--exito { color: #5f7410; background: #f2f7e2; border-color: #cbdd8c; } .edoc-estado--error { color: #b52f0e; background: #fceeea; border-color: #f0bfb1; } .edoc-estado--advertencia { color: #a45f00; background: #fff4e4; border-color: #fcd39a; } .edoc-estado--transito { color: var(--azul-2); background: #eceffa; border-color: #b9c1e6; } .edoc-estado--neutro { color: #5c6664; background: #f0f2f2; border-color: #cfd4d3; } /* --- 9. Tablas ----------------------------------------------------------- */ .edoc-tabla-envoltura { overflow-x: auto; } .edoc-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; } .edoc-tabla thead th { background: #f2f3f5; color: #33383f; font-family: var(--fuente-titulos); font-weight: 600; font-size: 11.5px; text-align: left; white-space: nowrap; padding: 9px 12px; border-bottom: 2px solid #d5d7dc; position: sticky; top: 0; z-index: 2; } .edoc-tabla thead th.agrupador { background: var(--edoc-azul); color: #fff; text-align: center; border-bottom: 1px solid #001a9c; letter-spacing: .04em; font-size: 10.5px; text-transform: uppercase; } .edoc-tabla thead th.agrupador.tenue { background: #33418f; } .edoc-tabla tbody td { padding: 8px 12px; border-bottom: 1px solid #ebebeb; vertical-align: middle; } .edoc-tabla tbody tr:hover td { background: #f7f9fc; } .edoc-tabla tbody tr.seleccionada td { background: #eef0f7; } .edoc-tabla .col-acciones { width: 1%; white-space: nowrap; } .edoc-tabla .separador-izq { border-left: 1px solid #e0e2e8; } .edoc-tabla__vacia { padding: 42px 16px; text-align: center; color: #6b6b6b; } .edoc-tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #4d4d4d; } /* --- 10. Avisos ---------------------------------------------------------- */ .edoc-aviso { display: flex; gap: 11px; padding: 11px 14px; border-radius: var(--radio); border: 1px solid; font-size: 12.5px; align-items: flex-start; } .edoc-aviso__icono { flex: none; width: 18px; height: 18px; margin-top: 1px; } .edoc-aviso strong { font-weight: 700; } .edoc-aviso--info { background: #eceffa; border-color: #b9c1e6; color: #222c63; } .edoc-aviso--exito { background: #f2f7e2; border-color: #cbdd8c; color: #4d5f0d; } .edoc-aviso--advertencia { background: #fff4e4; border-color: #fcd39a; color: #7d4a00; } .edoc-aviso--error { background: #fceeea; border-color: #f0bfb1; color: #8f2409; } .edoc-aviso--neutro { background: #f0f2f2; border-color: #cfd4d3; color: #3e4645; } /* --- 11. Los cuatro corners ---------------------------------------------- */ .corner-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 991px) { .corner-rejilla { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .corner-rejilla { grid-template-columns: 1fr; } } .corner { border: 1px solid #dcdfe4; border-radius: var(--radio); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .corner__cabecera { padding: 12px 14px; border-bottom: 1px solid #e8eaee; background: #fafbfc; } .corner__clave { display: inline-block; font-family: var(--fuente-titulos); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; color: #fff; background: var(--edoc-azul); border-radius: 3px; padding: 2px 7px; margin-bottom: 6px; } .corner__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 14px; color: var(--edoc-negro); } .corner__quien { font-size: 11.5px; color: #6a6a6a; margin-top: 2px; } .corner__cuerpo { padding: 12px 14px; flex: 1; } .linea-tiempo { list-style: none; margin: 0; padding: 0; } .linea-tiempo li { position: relative; padding: 0 0 14px 22px; } .linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; background: #fff; } .linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: #dcdfe4; } .linea-tiempo li.hecho { color: #5f7410; } .linea-tiempo li.hecho::before { background: var(--senal-exito); border-color: var(--senal-exito); } .linea-tiempo li.fallo { color: var(--rojo-1); } .linea-tiempo li.fallo::before { background: var(--rojo-1); border-color: var(--rojo-1); } .linea-tiempo li.espera { color: #666666; } .linea-tiempo li.espera::before { border-color: #b9bcbb; border-style: dashed; } .linea-tiempo__titulo { font-weight: 700; font-size: 12.5px; color: var(--edoc-negro); } .linea-tiempo__detalle { font-size: 11.5px; color: #616161; } .linea-tiempo__sello { font-size: 11px; color: #666666; font-family: var(--fuente-cifras); } /* --- 12. Visor de la factura --------------------------------------------- */ .visor-hoja { background: #fff; border: 1px solid #d8d8d8; border-radius: var(--radio); padding: 26px 30px; max-width: 780px; margin: 0 auto; } .visor-cabecera { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--edoc-azul); padding-bottom: 14px; } .visor-bloque__rotulo { font-family: var(--fuente-titulos); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--edoc-gris-texto); margin-bottom: 3px; } .visor-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 18px 0; } .visor-dato { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; } .visor-dato dt { font-weight: 700; color: #444; min-width: 118px; flex: none; } .visor-dato dd { margin: 0; } .visor-totales { margin-left: auto; width: 300px; } .visor-totales .fila { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; } .visor-totales .fila.total { border-top: 2px solid var(--edoc-azul); margin-top: 6px; padding-top: 9px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 15px; color: var(--edoc-azul); } /* --- 13. Regla del árabe ------------------------------------------------- Ningún campo mezcla los dos alfabetos. El nombre viaja aislado. */ .nombre-nativo { unicode-bidi: isolate; } .nombre-nativo[dir="rtl"] { direction: rtl; text-align: right; font-size: 13.5px; } .celda-ar { text-align: right; } .celda-ar .edoc-secundario { text-align: right; } .marca-ar { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--edoc-gris-texto); border: 1px solid #c9cdcc; border-radius: 3px; padding: 0 4px; margin-inline-start: 6px; vertical-align: 1px; unicode-bidi: isolate; } /* --- 14. Notas de diseño (capa de revisión) ------------------------------ */ .nota { display: none; margin-top: 8px; border-left: 3px solid var(--edoc-verde); background: #fbfdf4; padding: 8px 12px; font-size: 11.5px; color: #40460f; border-radius: 0 4px 4px 0; } .nota strong { color: #2f3607; } .nota--decidido { border-left-color: var(--edoc-verde); background: #f7fbec; } .nota--abierto { border-left-color: var(--naranja-1); background: #fff8ef; color: #6d4300; } .nota--fuera { border-left-color: var(--edoc-gris); background: #f4f5f5; color: #4a4a4a; } body.con-notas .nota { display: block; } .nota__sello { display: inline-block; font-family: var(--fuente-titulos); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; margin-right: 7px; border-radius: 3px; padding: 1px 6px; background: var(--edoc-verde); color: #2f3607; } .nota--abierto .nota__sello { background: var(--naranja-1); color: #4a2b00; } .nota--fuera .nota__sello { background: var(--gris-3); color: #33393a; } /* --- 15. Pie ------------------------------------------------------------- Fijo abajo: la versión, el aviso de que esto es una maqueta y el enlace a las bases de diseño tienen que estar siempre a la vista mientras se revisa. La página reserva su alto para que el pie no tape la última fila. */ .edoc-pie { position: sticky; bottom: 0; z-index: 1028; background: var(--edoc-azul); color: rgba(255,255,255,.82); font-size: 11.5px; padding: 11px 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 0 -1px 4px rgba(28,28,28,.18); } .edoc-pie a { color: #fff; } /* --- 16. Piezas sueltas -------------------------------------------------- */ .edoc-clave-doc { font-family: var(--fuente-cifras); font-size: 12px; color: var(--edoc-azul); font-weight: 600; } .edoc-secundario { color: #6d6d6d; font-size: 11.5px; } .edoc-separador { height: 1px; background: #e6e6e6; margin: 16px 0; } .edoc-etiqueta-mvp { font-family: var(--fuente-titulos); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; padding: 2px 7px; } .edoc-etiqueta-mvp--posterior { background: #eceded; color: #5a5a5a; border: 1px solid #d3d5d5; } .edoc-etiqueta-mvp--abierto { background: #fff4e4; color: #8a5200; border: 1px solid #fcd39a; } .muestra-color { border-radius: var(--radio); height: 74px; border: 1px solid rgba(0,0,0,.12); } .muestra-color + .muestra-pie { font-size: 11px; margin-top: 6px; } .muestra-pie code { font-family: var(--fuente-cifras); color: #444; } /* Acceso · login y pantallas fuera de sesión */ .edoc-acceso { min-height: 100vh; display: grid; grid-template-columns: .92fr 1.08fr; } @media (max-width: 900px) { .edoc-acceso { grid-template-columns: 1fr; } } /* Portada del acceso. La marca que manda es el imagotipo de arriba; el fondo solo acompaña, con las formas redondeadas y los tonos de la paleta. */ .edoc-acceso__lienzo { background: radial-gradient(760px 520px at 78% 6%, rgba(38,151,209,.30), transparent 62%), radial-gradient(620px 480px at 6% 96%, rgba(168,198,52,.20), transparent 60%), linear-gradient(155deg, #001174 0%, #00206b 55%, #101c56 100%); color: #fff; padding: 52px 46px 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; position: relative; overflow: hidden; } /* Dos arcos suaves, del mismo lenguaje redondeado del imagotipo. */ .edoc-acceso__lienzo::before, .edoc-acceso__lienzo::after { content: ""; position: absolute; border-radius: 50%; } .edoc-acceso__lienzo::before { right: -170px; top: -140px; width: 380px; height: 380px; background: rgba(255,255,255,.05); } .edoc-acceso__lienzo::after { left: -120px; bottom: -150px; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.12); background: transparent; } /* La filigrana queda como un guiño en la esquina, no como un cartel. */ .edoc-acceso__filigrana { position: absolute; right: -46px; bottom: -40px; left: auto; transform: none; width: 240px; height: auto; opacity: .05; pointer-events: none; } .edoc-acceso__portada { position: relative; z-index: 2; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 13px; } .edoc-acceso__titulo { font-size: clamp(24px, 2.4vw, 31px); font-weight: 600; margin: 0; } .edoc-acceso__pais { font-family: var(--fuente-titulos); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: -7px 0 0; } .edoc-acceso__lema { max-width: 42ch; font-size: 13.5px; color: rgba(255,255,255,.78); margin: 0; } .edoc-acceso__pie { position: relative; z-index: 2; font-size: 12px; color: rgba(255,255,255,.5); margin: 0; } .edoc-acceso__panel { display: grid; place-items: center; padding: 40px 24px; background: var(--edoc-fondo); } .edoc-acceso__tarjeta { width: 100%; max-width: 470px; } /* Inicio · solo la imagen, sin botonera y sin cuadro de mando. Ocupa exactamente el hueco que dejan encabezado, menú y pie fijos, para que la pantalla de bienvenida no genere desplazamiento. */ /* El lienzo del inicio ocupa el hueco que queda, sea cual sea el alto del pie: nada de restar altos a mano. Con las notas de diseño abiertas sí crece y la página se desplaza, que es lo esperable. */ /* El lienzo respeta el mismo margen que el resto de la página: pegado al pie se veía como un descuadre, no como una decisión. */ .edoc-pagina.edoc-pagina--lienzo { padding-bottom: 16px; display: flex; flex-direction: column; } body.con-notas .edoc-pagina.edoc-pagina--lienzo { padding-bottom: var(--alto-pie); } .edoc-bienvenida { flex: 1; min-height: 320px; border-radius: var(--radio); position: relative; overflow: hidden; background: radial-gradient(1100px 520px at 82% 8%, rgba(168,198,52,.30), transparent 62%), radial-gradient(760px 520px at 12% 96%, rgba(38,151,209,.30), transparent 60%), linear-gradient(140deg, #001174 0%, #002978 52%, #16225e 100%); display: flex; align-items: flex-end; padding: 46px; } .edoc-bienvenida__texto { color: #fff; max-width: 660px; position: relative; z-index: 2; } /* Inicio · la asociación pendiente en EmaraTax, arriba a la derecha del lienzo, que es el espacio que estaba vacío. */ .edoc-pendiente { position: absolute; top: 46px; right: 46px; z-index: 3; max-width: 380px; background: #fff; color: var(--edoc-texto, #212121); border-radius: var(--radio); padding: 20px 22px; box-shadow: 0 12px 32px rgba(0, 10, 60, .28); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .edoc-pendiente__titulo { font-family: var(--fuente-titulos); font-size: 19px; font-weight: 600; color: var(--edoc-azul); margin: 4px 0 0; padding-right: 24px; } .edoc-pendiente__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; padding: 4px 8px; font-size: 20px; line-height: 1; color: #5f6771; cursor: pointer; border-radius: 6px; } .edoc-pendiente__x:hover { background: #f0f2f7; color: var(--edoc-azul); } .edoc-pendiente__pie { font-size: 12.5px; color: #5f6771; margin: 4px 0 0; } .edoc-pendiente p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; } @media (max-width: 991px) { .edoc-bienvenida { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 24px; } .edoc-pendiente { position: static; max-width: none; } } .edoc-bienvenida__texto h1 { font-size: clamp(22px, 2.4vw + 6px, 34px); } .edoc-bienvenida__texto p { font-size: clamp(13px, .5vw + 10px, 15px); } .edoc-bienvenida__texto img { height: clamp(34px, 3.4vh + 14px, 52px); } @media (max-height: 720px) { .edoc-bienvenida { padding: 26px; } } .edoc-bienvenida__trama { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 12%, transparent 72%); mask-image: radial-gradient(120% 90% at 70% 20%, #000 12%, transparent 72%); } /* Modales */ .modal-content { border: 0; border-radius: var(--radio); overflow: hidden; } .modal-header { background: var(--edoc-azul); color: #fff; border: 0; padding: 13px 18px; } .modal-header .modal-title { font-family: var(--fuente-titulos); font-size: 15px; font-weight: 600; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; } .modal-footer { border-top: 1px solid #e6e6e6; padding: 12px 18px; background: #fafafa; } .modal-body { padding: 18px; } /* Menú de acciones de una fila */ .dropdown-menu { font-size: 13px; border-color: #d0d0d0; border-radius: var(--radio-chico); box-shadow: var(--sombra-tablero); } .dropdown-item { padding: 7px 14px; display: flex; align-items: center; gap: 9px; } .dropdown-item svg { width: 15px; height: 15px; flex: none; } .dropdown-item:active { background: var(--edoc-azul); } .dropdown-header { font-family: var(--fuente-titulos); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--edoc-gris-texto); padding: 8px 14px 3px; } .dropdown-item.disabled { color: #adadad; } /* --- 17. Anchos pequeños ------------------------------------------------- La página nunca se desplaza en horizontal. Lo que no cabe se recorta o se desplaza dentro de su propio contenedor: es el defecto que la auditoría de Francia encontró en las diez tablas del portal. */ @media (max-width: 1200px) { .edoc-empresa__nombre, .edoc-empresa__usuario { max-width: 18ch; } } @media (max-width: 1000px) { .edoc-empresa__usuario { display: none; } .edoc-empresa__nombre { max-width: 14ch; } } @media (max-width: 1000px) { /* Solo el rótulo de texto: la bandera también es un y ocultarla dejaba un círculo vacío en la barra. */ .edoc-btn-util__texto { display: none; } .edoc-btn-util { padding: 6px 10px; } .edoc-encabezado__util { gap: 6px; } } @media (max-width: 640px) { .edoc-encabezado { padding: 0 10px; } /* La marca deja de estar centrada y pasa a seguir a la cápsula del ambiente; el margen izquierdo es el aire que evita que se toquen. */ .edoc-encabezado__marca { position: static; transform: none; margin: 0 auto 0 12px; } .edoc-encabezado__marca img { height: 26px; } .edoc-usuario .edoc-usuario__avatar { width: 26px; height: 26px; } .edoc-menu { overflow-x: auto; padding: 0 4px; } .edoc-menu__item { padding: 0 11px; white-space: nowrap; } .edoc-menu__panel { position: fixed; left: 0; right: 0; min-width: 0; } .edoc-pagina { padding: 12px 10px var(--alto-pie); } .edoc-titulo { font-size: 18px; } .visor-hoja { padding: 18px 16px; } .visor-partes { grid-template-columns: 1fr; } .visor-totales { width: 100%; } } /* --- 18. Utilidades que Bootstrap 4 no trae ------------------------------ Bootstrap 4.4.1 no tiene `gap-*` (llegó en la 5). Se declaran aquí para no ensuciar el marcado con márgenes sueltos en cada hijo. */ .hueco-1 { gap: .25rem; } .hueco-2 { gap: .5rem; } .hueco-3 { gap: 1rem; } /* Equivalente de `row g-3`: separación uniforme entre columnas de formulario. */ .rejilla { margin-left: -8px; margin-right: -8px; } .rejilla > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; } .rejilla-2 { margin-left: -6px; margin-right: -6px; } .rejilla-2 > [class*="col-"] { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; } /* La aspa de cierre de Bootstrap 4 es `.close`, y en la cabecera azul va blanca. */ .modal-header .close { color: #fff; opacity: .9; text-shadow: none; font-weight: 400; } .modal-header .close:hover { color: #fff; opacity: 1; } /* --- 19. DataTables 1.10.25 sobre Bootstrap 4 ---------------------------- Bolivia sirve esta misma versión. Aquí solo se le pone la ropa de marca: los controles que genera DataTables tienen que leerse como el resto. */ .dt-cabecera { padding: 10px 16px; border-bottom: 1px solid #e3e3e3; } .dt-cuerpo { overflow-x: auto; } .dt-pie { padding: 11px 16px; border-top: 1px solid #e3e3e3; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dataTables_length, .dataTables_info, .dataTables_paginate { font-size: 12px; color: #4d4d4d; } .dataTables_length label { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 400; } .dataTables_length select { width: auto; display: inline-block; font-size: 12px; padding: 3px 24px 3px 8px; border: 1px solid #b6b6b6; border-radius: var(--radio-chico); background-color: #fff; } .dataTables_info { padding: 0 !important; } .dataTables_paginate { padding: 0 !important; margin: 0 !important; } .dataTables_paginate .pagination { margin: 0; } .dataTables_paginate .page-link { font-size: 12px; padding: 4px 10px; color: var(--edoc-azul); border-color: #d5d7dc; } .dataTables_paginate .page-item.active .page-link { background: var(--edoc-azul); border-color: var(--edoc-azul); color: #fff; } .dataTables_paginate .page-item.disabled .page-link { color: #a5a5a5; } /* Las flechas de ordenación, en el azul de marca y sin las imágenes de serie. */ table.edoc-tabla.dataTable thead th { position: relative; } table.edoc-tabla.dataTable thead .sorting, table.edoc-tabla.dataTable thead .sorting_asc, table.edoc-tabla.dataTable thead .sorting_desc { background-image: none; cursor: pointer; padding-right: 24px; } table.edoc-tabla.dataTable thead .sorting::after, table.edoc-tabla.dataTable thead .sorting_asc::after, table.edoc-tabla.dataTable thead .sorting_desc::after { content: "⇅"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #9aa0a6; } table.edoc-tabla.dataTable thead .sorting_asc::after { content: "↑"; color: var(--edoc-azul); } table.edoc-tabla.dataTable thead .sorting_desc::after { content: "↓"; color: var(--edoc-azul); } table.edoc-tabla.dataTable thead th.agrupador { padding-right: 12px; } table.edoc-tabla.dataTable thead th.agrupador::after { content: none; } table.edoc-tabla.dataTable { border-collapse: separate !important; margin: 0 !important; } table.edoc-tabla.dataTable tbody tr.odd td, table.edoc-tabla.dataTable tbody tr.even td { background: transparent; } table.edoc-tabla.dataTable tbody tr:hover td { background: #f7f9fc; } /* Las acciones de fila son botones en línea, como en Bolivia: no hay menú flotante que pueda quedar recortado por el desplazamiento de la tabla, y se llega a cada acción con un clic en vez de dos. */ .edoc-acciones-fila { display: flex; gap: 4px; align-items: center; } .edoc-acciones-fila .separador { width: 1px; height: 20px; background: #dcdfe4; margin: 0 3px; flex: none; } .edoc-accion[aria-disabled="true"] { opacity: .35; pointer-events: none; border-color: #b6b6b6; color: #666666; } .edoc-accion--exito { border-color: #8fae22; color: #5f7410; } .edoc-accion--exito:hover { background: var(--senal-exito); color: var(--edoc-negro); } .edoc-accion--error { border-color: var(--senal-error); color: var(--senal-error); } .edoc-accion--error:hover { background: var(--senal-error); color: #fff; } .edoc-accion--aviso { border-color: #d68300; color: #a45f00; } .edoc-accion--aviso:hover { background: var(--senal-advertencia); color: var(--edoc-negro); } /* --- 20. Ajustes tras cablear DataTables --------------------------------- */ /* El indicador de orden no debe robar tanto ancho: con catorce columnas, veinticuatro píxeles por cabecera empujan la última fuera de la pantalla. */ table.edoc-tabla.dataTable thead .sorting, table.edoc-tabla.dataTable thead .sorting_asc, table.edoc-tabla.dataTable thead .sorting_desc { padding-right: 19px; } table.edoc-tabla.dataTable thead .sorting::after, table.edoc-tabla.dataTable thead .sorting_asc::after, table.edoc-tabla.dataTable thead .sorting_desc::after { right: 6px; } table.edoc-tabla thead th { padding-left: 7px; padding-right: 7px; } table.edoc-tabla tbody td { padding-left: 7px; padding-right: 7px; } /* `custom-select` de Bootstrap 4 trae su propia flecha; el relleno de la izquierda no puede pisarla ni dejar que asome la del navegador. */ .custom-select { padding: 6px 30px 6px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23001174' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 10px; } .custom-select-sm { padding: 3px 26px 3px 8px; background-position: right 8px center; } .dataTables_length select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23001174' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 10px; } /* --- 21. Accesibilidad y remates de usabilidad --------------------------- */ /* Salto al contenido: lo primero que alcanza el teclado, invisible con el ratón. */ .salto-contenido { position: absolute; left: -9999px; top: 0; z-index: 1100; background: var(--edoc-verde); color: var(--edoc-negro); font-family: var(--fuente-titulos); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 0 0 var(--radio) 0; } .salto-contenido:focus { left: 0; text-decoration: none; } #armazon:focus { outline: none; } /* Texto solo para lectores de pantalla: la pastilla dice «Aprobado», pero quien la escucha necesita oír «C5 Autoridad: Aprobado». */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* La ayuda de la cabecera agrupada. */ .agrupador__ayuda { width: 16px; height: 16px; margin-left: 7px; padding: 0; line-height: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font-size: 10px; font-weight: 700; vertical-align: 1px; } .agrupador__ayuda:hover { background: #fff; color: var(--edoc-azul); border-color: #fff; } /* Foco visible en todo lo que se puede alcanzar con el teclado. */ a:focus-visible, button:focus-visible, .edoc-accion:focus-visible, .form-control:focus-visible, .custom-select:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--edoc-verde); outline-offset: 2px; } .edoc-encabezado a:focus-visible, .edoc-encabezado button:focus-visible { outline-color: #fff; } /* Tabs · BrandBook p.39 y p.40: alineados, misma altura, y sobre el fondo gris van en blanco con borde gris #575756. */ /* Los tabs no se parten en varias líneas: el manual pide que queden alineados y con la misma altura. Si no caben, se desplazan de lado. */ .edoc-tabs { display: flex; gap: 4px; border-bottom: 1px solid #c2c2c2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .edoc-tabs__item { flex: none; } .edoc-tabs__item { display: flex; align-items: center; height: 38px; padding: 0 18px; font-family: var(--fuente-titulos); font-size: 13px; font-weight: 500; color: var(--edoc-negro); background: #fff; border: 1px solid var(--edoc-gris-borde); border-bottom: 0; border-radius: var(--radio-chico) var(--radio-chico) 0 0; margin-bottom: -1px; } .edoc-tabs__item:hover { text-decoration: none; color: var(--edoc-azul); background: #f4f4f4; } .edoc-tabs__item.activo { background: var(--edoc-azul); border-color: var(--edoc-azul); color: #fff; font-weight: 600; } /* --- 22. Densidad de la tabla ------------------------------------------- Con catorce columnas cada píxel cuenta. El número de documento es además el enlace al visor: es la afordancia natural y ahorra un botón por fila. */ .edoc-tabla .edoc-accion { width: 27px; height: 27px; } .edoc-tabla .edoc-accion svg { width: 15px; height: 15px; } .edoc-acciones-fila { gap: 2px; } a.edoc-clave-doc { text-decoration: none; border-bottom: 1px dotted #9aa8d0; } a.edoc-clave-doc:hover { color: var(--azul-2); border-bottom-color: var(--azul-2); text-decoration: none; } .edoc-tabla td [data-nombre-latino] { display: inline-block; min-width: 128px; } /* ========================================================================== 23. Responsive Cuatro anchos, los mismos que midió la auditoría de Francia. El defecto que allí se encontró —«la misma tabla ocupa lo mismo en un teléfono que en un escritorio»— es justo lo que estas reglas evitan. ========================================================================== */ /* --- 23.1 · Cabecera fija ----------------------------------------------- El encabezado y el menú se quedan arriba en todos los anchos. Al despegarse del inicio de la página se les marca la sombra, para que se lea que flotan. */ .edoc-encabezado { box-shadow: 0 1px 0 rgba(0,0,0,.15); } .edoc-menu { box-shadow: 0 1px 3px rgba(28,28,28,.09); } /* La cabecera de la tabla también se queda fija mientras se recorre el listado. DataTables pone `position: relative` en sus `th`, así que hay que ganarle. */ .dt-cuerpo { max-height: calc(100vh - 360px); min-height: 180px; overflow: auto; /* Sin esto, al llevar una fila a la vista queda debajo de la cabecera fija y no se puede ni leer ni pulsar. Reserva su alto. */ scroll-padding-top: 64px; } table.edoc-tabla.dataTable thead th, table.edoc-tabla thead th { position: sticky !important; top: 0; z-index: 3; } table.edoc-tabla.dataTable thead tr:first-child th.agrupador { top: 0; z-index: 4; } /* La segunda fila de cabecera baja el alto de la primera. Solo cuando hay dos: `:not(:first-child)` evita que la regla pise las tablas de una sola fila y les tape el primer registro. */ table.edoc-tabla.dataTable thead tr:last-child:not(:first-child) th { top: 28px; } /* --- 23.2 · Escritorio pequeño · hasta 1200 px --------------------------- */ @media (max-width: 1200px) { .edoc-pagina { padding: 14px 12px var(--alto-pie); } .edoc-titulo { font-size: 19px; } } /* --- 23.3 · Tableta · hasta 992 px --------------------------------------- */ @media (max-width: 992px) { .edoc-tablero__cabecera { align-items: flex-start; } .visor-partes { grid-template-columns: 1fr; } .visor-totales { width: 100%; } .corner-rejilla { grid-template-columns: repeat(2, 1fr); } } /* --- 23.4 · Móvil · hasta 900 px ----------------------------------------- La tabla deja de ser tabla y pasa a ser una lista de fichas. Cada celda enseña el rótulo de su columna, que `tablas.js` copió a `data-rotulo`. */ @media (max-width: 900px) { table.edoc-tabla.apilable, table.edoc-tabla.apilable tbody, table.edoc-tabla.apilable tr, table.edoc-tabla.apilable td { display: block; width: auto; } table.edoc-tabla.apilable thead { position: absolute; left: -9999px; } table.edoc-tabla.apilable tbody tr { border: 1px solid #dcdfe4; border-radius: var(--radio); margin-bottom: 10px; background: #fff; overflow: hidden; } table.edoc-tabla.apilable tbody tr:hover td { background: transparent; } table.edoc-tabla.apilable tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 12px; border: 0; border-bottom: 1px solid #f0f1f3; text-align: left; } table.edoc-tabla.apilable tbody td:last-child { border-bottom: 0; } table.edoc-tabla.apilable tbody td::before { content: attr(data-rotulo); /* El rótulo es texto, no cifra: no puede heredar la monoespaciada de la celda. */ font-family: var(--fuente-texto); font-variant-numeric: normal; letter-spacing: 0; font-weight: 700; font-size: 11px; color: #5c5c5c; flex: 0 0 40%; text-transform: none; text-align: left; } /* El valor ocupa lo que queda y se parte si hace falta, sin salirse. */ table.edoc-tabla.apilable tbody td > * { min-width: 0; } table.edoc-tabla.apilable tbody td [data-nombre-latino] { min-width: 0; } /* El dato secundario —el registro fiscal bajo el nombre— baja a su propia línea en vez de pelear por el ancho con el nombre y partirse en dos. */ table.edoc-tabla.apilable tbody td { flex-wrap: wrap; } table.edoc-tabla.apilable tbody td > .edoc-secundario { flex: 1 0 100%; text-align: right; } table.edoc-tabla.apilable tbody td:not(.col-acciones) { overflow-wrap: anywhere; } /* Los importes siguen alineados a la derecha, que es donde se comparan. */ table.edoc-tabla.apilable tbody td.cifra-der { justify-content: space-between; } /* La primera celda —las acciones— encabeza la ficha, a todo el ancho. */ table.edoc-tabla.apilable tbody td.col-acciones { background: #f7f9fc; border-bottom: 1px solid #e3e6ea; padding: 9px 12px; } table.edoc-tabla.apilable tbody td.col-acciones::before { content: none; } table.edoc-tabla.apilable tbody td.col-acciones .edoc-acciones-fila { width: 100%; } /* Apilada, la tabla ya cabe: sobra la altura fija. El desplazamiento lateral se deja como red de seguridad para cualquier tabla que no se apile. */ .dt-cuerpo { max-height: none; min-height: 0; overflow-x: auto; overflow-y: visible; } .corner-rejilla { grid-template-columns: 1fr; } .dt-pie { flex-direction: column; align-items: flex-start; gap: 8px; } } /* --- 23.5 · Móvil estrecho · hasta 576 px -------------------------------- */ @media (max-width: 576px) { .edoc-titulo-barra { flex-direction: column; align-items: flex-start; } .edoc-tablero__cabecera { flex-direction: column; align-items: stretch; gap: 10px; } .edoc-tablero__cuerpo { padding: 13px; } table.edoc-tabla.apilable tbody td::before { flex-basis: 46%; } .modal-footer { flex-direction: column-reverse; align-items: stretch; } .modal-footer .btn, .modal-footer .d-flex { width: 100%; } .modal-footer .d-flex { flex-direction: column; } } /* El pie fijo, en pantallas estrechas, se queda en una sola línea legible. */ @media (max-width: 576px) { .edoc-pie { flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 10.5px; } } /* --- 24. Menú en pantallas estrechas ------------------------------------- Por encima de 900 px manda la barra horizontal; por debajo, el cajón. */ /* Las tres rayas salen del centro del botón y se separan 6 px. Antes se repartían con space-between: a 44 px de alto (táctil) quedaban a 13 px y el aspa, que asume 6, se quedaba en una flecha. Así da igual el tamaño. */ .edoc-menu__hamburguesa { display: none; position: relative; width: 38px; height: 32px; margin: auto 6px auto 0; padding: 0; background: transparent; border: 1px solid #c2c2c2; border-radius: var(--radio-chico); flex: none; } .edoc-menu__hamburguesa span { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background: var(--edoc-azul); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } .edoc-menu__hamburguesa span:nth-child(1) { transform: translateY(-6px); } .edoc-menu__hamburguesa span:nth-child(3) { transform: translateY(6px); } .edoc-menu__hamburguesa.abierta span:nth-child(1) { transform: rotate(45deg); } .edoc-menu__hamburguesa.abierta span:nth-child(2) { opacity: 0; } .edoc-menu__hamburguesa.abierta span:nth-child(3) { transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .edoc-menu__hamburguesa span { transition: none; } } .edoc-menu-movil { display: none; } .edoc-menu-movil__seccion { display: flex; align-items: center; gap: 8px; padding: 11px 16px 6px; font-family: var(--fuente-titulos); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--edoc-azul); border-top: 1px solid #ececec; } .edoc-menu-movil__seccion:first-child { border-top: 0; } a.edoc-menu-movil__seccion:hover { text-decoration: none; background: #eef0f7; } .edoc-menu-movil__seccion svg { width: 15px; height: 15px; } /* El rótulo del grupo se alinea con sus hermanos de primer nivel, no con la sección: es un hijo de la sección, igual que ellos. */ .edoc-menu-movil__grupo { font-family: var(--fuente-titulos); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #6c6c6c; padding: 9px 16px 3px 26px; } .edoc-menu-movil__enlace { display: block; padding: 9px 16px 9px 26px; font-size: 13.5px; color: var(--edoc-negro); } .edoc-menu-movil__hijos { position: relative; } .edoc-menu-movil__hijos::before { content: ""; position: absolute; left: 31px; top: 2px; bottom: 4px; width: 1px; background: #dcdfe4; } .edoc-menu-movil__hijos .edoc-menu-movil__enlace { padding-left: 42px; } .edoc-menu-movil__enlace:hover { background: #eef0f7; color: var(--edoc-azul); text-decoration: none; } .edoc-menu-movil__enlace.activo { color: var(--edoc-azul); font-weight: 600; box-shadow: inset 3px 0 0 var(--edoc-verde); } @media (max-width: 900px) { .edoc-menu { overflow: visible; padding: 0 8px; } .edoc-menu__hamburguesa { display: flex; } .edoc-menu .edoc-menu__contenedor { display: none; } .edoc-menu::after { content: attr(data-seccion-actual); font-family: var(--fuente-titulos); font-size: 13px; font-weight: 600; color: var(--edoc-azul); align-self: center; } .edoc-menu-movil { display: block; position: sticky; top: calc(var(--alto-encabezado) + var(--alto-menu)); z-index: 1028; background: #fff; border-bottom: 1px solid #c2c2c2; box-shadow: 0 6px 14px rgba(28,28,28,.14); max-height: 70vh; overflow-y: auto; } .edoc-menu-movil[hidden] { display: none; } } /* --- 25. Alcance de la entrega ------------------------------------------- Lo que está en el mapa pero no en la entrega de hoy se marca en el menú y, si se entra, muestra el aviso en vez de la pantalla. */ .edoc-menu__enlace--obra, .edoc-menu-movil__enlace.edoc-menu__enlace--obra { color: #5e5e5e; } .edoc-menu__enlace--obra:hover, .edoc-menu-movil__enlace.edoc-menu__enlace--obra:hover { background: #f4f4f4; color: #5c5c5c; } .edoc-pagina--obra { display: flex; flex-direction: column; } .edoc-obra { flex: 1; display: grid; place-items: center; padding: 24px 0; } .edoc-obra__tarjeta { background: var(--edoc-tablero); border: var(--borde-suave); border-radius: var(--radio); box-shadow: var(--sombra-tablero); padding: 42px 38px; max-width: 620px; text-align: center; } .edoc-obra__marca { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: #eef0f7; display: grid; place-items: center; color: var(--edoc-azul); } .edoc-obra__marca svg { width: 28px; height: 28px; } .edoc-obra__titulo { font-family: var(--fuente-titulos); font-size: 23px; font-weight: 600; color: var(--edoc-azul); margin: 0 0 4px; } .edoc-obra__rotulo { font-family: var(--fuente-titulos); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--edoc-gris-texto); margin: 0 0 16px; } .edoc-obra__texto { font-size: 13.5px; color: #4a4a4a; margin: 0 0 24px; } .edoc-obra__botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } @media (max-width: 576px) { .edoc-obra__tarjeta { padding: 30px 20px; } .edoc-obra__botones .btn { width: 100%; } } /* --- 26. El código de la entidad, detrás del nombre ---------------------- Se decidió en la revisión: el cliente lee «Autoridad», no «C5». El código se conserva porque es el nombre que usa la red en todos los países, pero va detrás y en gris, como ayuda y no como titular. */ .clave-corner { font-family: var(--fuente-cifras); font-weight: 400; font-size: .92em; color: #5f6771; letter-spacing: 0; /* 5,9:1; antes 3,6:1 fuera de la cabecera */ } .edoc-tabla thead th .clave-corner { color: #555c67; } .corner__nombre .clave-corner { font-size: .82em; } /* Enlaces legales del acceso. Van visibles, no escondidos en un pie diminuto: se decidió que el tratamiento de datos no es negociable. */ /* La línea de «al continuar, aceptas…». Es una frase con su casilla, no una caja ni una lista de enlaces: se lee de corrido, alineada a la izquierda, y los dos documentos van dentro del propio texto. */ .edoc-legal { margin: 16px 0 0; padding: 0; border: 0; text-align: left; font-size: 12px; line-height: 1.5; color: var(--edoc-gris-texto); } .edoc-legal a { text-decoration: underline; } /* El hito del panel del registro: no es un paso del formulario, así que ni se numera ni se puede pulsar. Se ve porque el camino termina ahí. */ .reg__paso--hito { border-style: dashed; opacity: .92; cursor: default; } .reg__paso--hito .reg__paso-n { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } /* Un dato que nos dio la autoridad: se ve, pero no se reescribe. */ .reg__campo-autoridad { background: #f4f7ef; border-color: #cfe0a8; } /* Lo que devuelve la autoridad: se lee, no se escribe. Mismo aspecto que el campo traído de fuera, pero sin ser un campo. */ /* --- La ficha de la autoridad ------------------------------------------- Un bloque donde NADA se puede editar no se dibuja como un formulario. La caja verde de .reg__dato-autoridad sirve en Administración, donde marca el único campo bloqueado entre otros que sí se escriben; aquí, con los seis datos bloqueados, seis cajas verdes solo parecen seis campos rellenos y el verde deja de significar nada. Esto es una ficha: rótulo pequeño, dato en negro y una línea fina. El verde se queda para el aviso de éxito, que es para lo que el manual lo reserva. */ /* Dos columnas, como la propia pantalla de la autoridad. Con cuatro, en una pantalla ancha, se pierde el orden de lectura: el ojo no sabe si sigue a la derecha o abajo, y una celda con nota debajo desalinea la fila entera. */ .reg__ficha { display: grid; grid-template-columns: 1fr; gap: 0 36px; margin: 4px 0 0; } @media (min-width: 768px) { .reg__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .reg__ficha > div { padding: 11px 0; border-bottom: 1px solid #e7e9ec; } /* La declaración iba pegada a la línea de la última fila de la ficha. */ .reg__ficha ~ .form-check { margin-top: 18px; } .reg__ficha-rotulo { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6a6a6a; margin-bottom: 3px; } .reg__ficha-dato { display: block; font-size: 14px; color: var(--edoc-negro, #212121); font-weight: 600; word-break: break-word; } .reg__ficha-dato:empty::after { content: "—"; font-weight: 400; color: #8a8a8a; } .reg__ficha-nota { display: block; font-size: 10.5px; color: #666666; margin-top: 4px; font-weight: 400; line-height: 1.35; } .reg__dato-autoridad { background: #f4f7ef; border: 1px solid #cfe0a8; border-radius: var(--radio-chico, 6px); padding: 8px 12px; min-height: 38px; font-size: 13.5px; color: var(--edoc-negro, #212121); display: flex; align-items: center; word-break: break-word; } /* Las utilidades de Bootstrap como d-flex llevan !important y pisaban el atributo hidden: el bloque se veía aunque estuviera oculto. */ [hidden].d-flex, [hidden].d-block, [hidden].d-inline-flex { display: none !important; } /* El correo y su botón «Enviar código», en la misma fila. */ .reg__correo-fila { display: flex; gap: 8px; align-items: stretch; } .reg__correo-fila .form-control { flex: 1; min-width: 0; } .reg__correo-fila .btn { flex: none; white-space: nowrap; } @media (max-width: 575px) { .reg__correo-fila { flex-direction: column; } } /* La puerta del registro es el paso 0: va dentro del cuerpo del asistente, con el panel de pasos al lado, no como una tarjeta suelta en medio de la página. */ .reg-puerta { border: 0; box-shadow: none; background: transparent; } .reg-puerta > .edoc-tablero__cuerpo { padding: 0; } .reg-puerta__pasos { margin-bottom: 0; } /* Sin el marco de las otras casillas del acceso: aquí no es un campo del formulario, es el pie legal. */ .edoc-acceso .form-check--legal .form-check-label { align-items: flex-start; min-height: 0; padding: 0 0 0 28px; border: 0; border-radius: 0; font-size: 12px; line-height: 1.5; color: var(--edoc-gris-texto); } .edoc-acceso .form-check--legal .form-check-label:hover { border: 0; } .edoc-acceso .form-check--legal .form-check-input { left: 0; top: 10px; width: 16px; height: 16px; } /* Las dos vías del alta, numeradas: el número dice que hay un orden y que la segunda no se puede hacer antes que la primera. */ .edoc-acceso__otros-guia { margin: -4px 0 10px; font-size: 12px; color: var(--edoc-gris-texto); } .edoc-acceso__via-paso { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #eef1f8; color: var(--edoc-azul); font-family: var(--fuente-cifras); font-size: 13px; font-weight: 600; } /* El selector de idioma, con el código y el chevron, igual que en Francia. */ .edoc-btn-util--idioma { padding: 6px 12px 6px 13px; gap: 8px; } .edoc-btn-util__chevron { width: 9px; height: 6px; opacity: .8; flex: none; } /* --- 27. Acceso · elegir empresa ----------------------------------------- Sustituye al campo del registro fiscal: el cliente no tiene que escribir un número de quince dígitos que nosotros ya tenemos. Con una sola empresa este paso no aparece. */ .edoc-empresa-opcion { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid #d6d9de; border-radius: var(--radio); padding: 12px 14px; margin-bottom: 9px; color: var(--edoc-negro); transition: border-color .15s, background .15s; } .edoc-empresa-opcion:hover { border-color: var(--edoc-azul); background: #f7f9fc; } .edoc-empresa-opcion:focus-visible { outline: 2px solid var(--edoc-verde); outline-offset: 2px; } .edoc-empresa-opcion__icono { width: 38px; height: 38px; border-radius: 50%; background: #eef0f7; display: grid; place-items: center; color: var(--edoc-azul); flex: none; } .edoc-empresa-opcion__icono svg { width: 19px; height: 19px; } .edoc-empresa-opcion__textos { display: flex; flex-direction: column; min-width: 0; flex: 1; } .edoc-empresa-opcion__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .edoc-empresa-opcion__dato { font-size: 11.5px; color: #6d6d6d; } .edoc-empresa-opcion__flecha { font-size: 20px; color: var(--edoc-gris-texto); flex: none; } /* La versión, al pie de la tarjeta de acceso: es lo primero que pide soporte. */ .edoc-version { text-align: center; margin-top: 10px; font-size: 11px; color: var(--edoc-gris-texto); } /* --- 26 bis. El plazo del codigo ------------------------------------------ El naranja del ultimo minuto es el de ADVERTENCIA del manual: se acaba el tiempo. El rojo del final es el de ERROR: ya no vale. */ .edoc-reloj { margin-top: 8px; font-size: 12.5px; color: #5f5f5f; } .edoc-reloj--poco { color: var(--senal-advertencia); } .edoc-reloj--fuera { color: var(--senal-error); } /* --- 26 ter. Paneles que se pliegan -------------------------------------- Para lo que es material de consulta y no de cada dia: se deja recogido y se abre quien lo necesite, en vez de hacer scroll por encima siempre. */ .edoc-tablero--plegable .edoc-tablero__cabecera { padding: 0; } .edoc-plegar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 18px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; } .edoc-plegar:hover { color: var(--edoc-azul); } .edoc-plegar:focus-visible { outline: 2px solid var(--edoc-azul); outline-offset: -2px; } .edoc-plegar__flecha { width: 18px; height: 18px; flex: 0 0 18px; transform: rotate(-90deg); transition: transform .16s ease; } .edoc-plegar[aria-expanded="true"] .edoc-plegar__flecha { transform: rotate(0deg); } /* --- 27. El '?' de ayuda -------------------------------------------------- Para lo que solo hace falta si se pregunta. Un aviso permanente para una duda ocasional acaba siendo ruido que nadie lee. */ .edoc-ayuda-que { display: inline-grid; place-items: center; vertical-align: middle; width: 17px; height: 17px; margin-left: 5px; padding: 0; border: 1px solid #c2c4c6; border-radius: 50%; background: none; color: #6d6f71; font-family: var(--fuente-titulos); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; } .edoc-ayuda-que:hover { background: #6d6f71; border-color: #6d6f71; color: #fff; } .edoc-ayuda-que:focus { outline: 2px solid var(--edoc-azul); outline-offset: 2px; } .popover { font-family: var(--fuente-texto); font-size: 12.5px; max-width: 288px; } .popover-body { color: #3d3f42; line-height: 1.5; } /* --- 27 bis. La salida del simulacro -------------------------------------- Solo se ve cuando hay un escenario fijado. Gris oscuro: es una herramienta de la maqueta, no un estado del producto, y por eso no usa ninguno de los cuatro colores que el manual reserva para senalizar. */ .edoc-chincheta { position: fixed; left: 16px; bottom: 16px; z-index: 2001; max-width: 280px; padding: 10px 12px; border-radius: 6px; background: #2b2b2b; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); font-size: 12px; line-height: 1.4; } .edoc-chincheta__t { display: block; font-family: var(--fuente-titulos); font-size: 12.5px; } .edoc-chincheta__d { display: block; margin-top: 2px; color: #b9b9b9; font-size: 11px; } .edoc-chincheta__x { margin-top: 8px; padding: 4px 10px; border: 1px solid #6d6d6d; border-radius: 4px; background: none; color: #fff; font-family: var(--fuente-titulos); font-size: 11.5px; font-weight: 600; cursor: pointer; } .edoc-chincheta__x:hover { background: #fff; color: #2b2b2b; border-color: #fff; } /* En pantalla estrecha no compite con el contenido: se pega abajo, a lo ancho. */ @media (max-width: 575.98px) { .edoc-chincheta { left: 8px; right: 8px; bottom: 8px; max-width: none; } } /* --- 28. Notificaciones --------------------------------------------------- Los avisos que hoy salen en un popup que se desvanece necesitan un sitio donde queden: si el usuario aparta la vista, el aviso no puede perderse. */ .edoc-campana { position: relative; } .edoc-campana__punto { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px; background: var(--senal-error); color: #fff; font-family: var(--fuente-titulos); font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--edoc-azul); } .edoc-notificaciones { min-width: 320px; max-width: 360px; padding-bottom: 0; } /* El renglon es el
  • : lleva la caja y el borde. Dentro van el cuerpo -que es lo que se pulsa- y el aspa, que tiene que quedar fuera del enlace: un