/* ========================================================================== Sistema de Certificados - I.E.S.T.P. "Manuel Scorza Torre" (Acobamba, HVCA) Hoja de estilos propia. Sin CDN a proposito: el instituto debe poder servir esto sin internet y sin que el navegador compile nada en runtime. La paleta sale del logo institucional (static/img/logo.jpeg), muestreada pixel a pixel: azul del engranaje #003399, rojo de "I.E.S.T.P." #AA0F0D y dorado de las espigas #EAC723. Tema claro unico. No hay bloque prefers-color-scheme: el declara color-scheme: light para que los controles nativos (inputs, selects, date pickers) tampoco se pinten oscuros si el sistema del usuario lo esta. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* Azul del engranaje del logo (#003399) y su escala */ --azul-950: #000a20; --azul-900: #001a52; --azul-800: #002676; --azul-700: #003399; /* exacto del logo */ --azul-600: #1a47a8; --azul-500: #3c66c2; --azul-100: #d5e0f6; --azul-050: #eef2fc; /* Dorado de las espigas del logo (#EAC723) */ --oro-700: #8a7411; --oro-600: #b09318; --oro-500: #eac723; /* exacto del logo */ --oro-100: #fbf2cf; /* Estados. El rojo es el de "I.E.S.T.P." en el logo (#AA0F0D) */ --verde-700: #166b45; --verde-100: #dcefe4; --rojo-700: #aa0f0d; --rojo-100: #fae0df; --ambar-700: #8a5a00; --ambar-100: #fbeed3; /* Neutros calidos */ --gris-950: #14161a; --gris-900: #1f2329; --gris-800: #2f343c; --gris-700: #454b55; --gris-600: #5e6672; --gris-500: #7b8492; --gris-400: #a3abb7; --gris-300: #c9cfd8; --gris-200: #e2e6ec; --gris-100: #f0f2f5; --gris-050: #f8f9fb; --blanco: #ffffff; /* Roles semanticos (claro) */ --fondo: var(--gris-050); --fondo-elevado: var(--blanco); --fondo-hundido: var(--gris-100); --borde: var(--gris-200); --borde-fuerte: var(--gris-300); --texto: var(--gris-900); --texto-suave: var(--gris-600); --texto-tenue: var(--gris-500); --acento: var(--azul-700); --acento-hover: var(--azul-800); --acento-suave: var(--azul-050); /* La barra lleva el azul exacto del logo: es la firma visual del instituto */ --barra: var(--azul-700); --barra-texto: #eaf0fd; /* Tipografia */ --serif: "Cambria", "Georgia", "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", monospace; /* Medidas */ --radio: 6px; --radio-sm: 4px; --radio-lg: 10px; --ancho: 1180px; --ancho-angosto: 620px; --sombra-sm: 0 1px 2px rgba(15, 32, 57, .06), 0 1px 3px rgba(15, 32, 57, .05); --sombra: 0 2px 4px rgba(15, 32, 57, .05), 0 4px 12px rgba(15, 32, 57, .07); --sombra-lg: 0 8px 24px rgba(15, 32, 57, .12), 0 2px 6px rgba(15, 32, 57, .06); } /* --- 2. Base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Refuerza el : los controles nativos se pintan claros aunque el sistema del usuario este en modo oscuro. */ color-scheme: light; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.25; color: var(--texto); margin: 0 0 .5rem; letter-spacing: -.01em; } h1 { font-size: 2rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio-sm); } svg { flex: none; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; } .contenedor-angosto { max-width: var(--ancho-angosto); } main { flex: 1 0 auto; padding: 2.5rem 0 4rem; } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- 3. Barra institucional ---------------------------------------------- */ .barra { background: var(--barra); color: var(--barra-texto); border-bottom: 3px solid var(--oro-600); } .barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; flex-wrap: wrap; } .marca { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; } .marca:hover { text-decoration: none; } /* El logo es un JPEG con fondo blanco: va sobre una pastilla clara para que no recorte los dientes del engranaje ni deje un cuadro suelto sobre el azul. */ .marca-logo { display: block; width: 42px; height: 42px; flex: none; padding: 2px; border-radius: 8px; background: #fff; object-fit: contain; } .marca-texto { display: flex; flex-direction: column; line-height: 1.25; } .marca-nombre { font-family: var(--serif); font-size: .98rem; font-weight: 600; letter-spacing: .01em; } .marca-sub { font-size: .7rem; color: rgba(234, 240, 253, .66); letter-spacing: .07em; text-transform: uppercase; } .barra-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .barra-enlace { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: var(--radio-sm); color: rgba(232, 238, 246, .8); font-size: .875rem; font-weight: 500; } .barra-enlace:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; } .barra-enlace[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .1); } .barra-usuario { display: flex; align-items: center; gap: .5rem; padding-left: .85rem; margin-left: .35rem; border-left: 1px solid rgba(255, 255, 255, .16); font-size: .8rem; color: rgba(232, 238, 246, .7); } /* --- 4. Botones ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem 1.05rem; border: 1px solid transparent; border-radius: var(--radio); background: none; font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primario { background: var(--azul-700); color: #fff; } .btn-primario:hover:not(:disabled) { background: var(--azul-800); } .btn-secundario { background: var(--fondo-elevado); color: var(--texto); border-color: var(--borde-fuerte); } .btn-secundario:hover:not(:disabled) { background: var(--fondo-hundido); } .btn-peligro { background: var(--rojo-700); color: #fff; } .btn-peligro:hover:not(:disabled) { filter: brightness(1.12); } .btn-fantasma { color: var(--texto-suave); padding: .4rem .6rem; } .btn-fantasma:hover:not(:disabled) { background: var(--fondo-hundido); color: var(--texto); } .btn-bloque { width: 100%; } .btn-grande { padding: .7rem 1.4rem; font-size: .95rem; } /* Acciones en tabla: solo icono */ .btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radio-sm); background: none; color: var(--texto-tenue); cursor: pointer; transition: background-color .15s, color .15s; } .btn-icono:hover { background: var(--fondo-hundido); color: var(--acento); text-decoration: none; } .btn-icono.es-peligro:hover { background: var(--rojo-100); color: var(--rojo-700); } /* --- 5. Tarjetas y paneles ----------------------------------------------- */ .tarjeta { background: var(--fondo-elevado); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); } .tarjeta-cuerpo { padding: 1.5rem; } .tarjeta-cuerpo-holgado { padding: 2rem; } .tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--borde); } .tarjeta-cabecera h2, .tarjeta-cabecera h3 { margin: 0; } .tarjeta-pie { padding: .9rem 1.5rem; border-top: 1px solid var(--borde); background: var(--fondo-hundido); border-radius: 0 0 var(--radio-lg) var(--radio-lg); } /* Encabezado de pagina del panel */ .pagina-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--borde); } .pagina-cabecera h1 { font-size: 1.6rem; margin-bottom: .15rem; } .pagina-cabecera p { color: var(--texto-suave); font-size: .9rem; margin: 0; } /* --- 6. Portada publica -------------------------------------------------- */ .portada { text-align: center; margin-bottom: 2.25rem; } .portada-sello { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 1.1rem; border-radius: 50%; border: 2px solid var(--oro-600); color: var(--oro-600); background: var(--oro-100); } /* El logo institucional presidiendo la pagina publica */ .portada-logo { display: block; width: 104px; height: 104px; margin: 0 auto 1.15rem; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-sm); object-fit: contain; } .portada h1 { font-size: 2.2rem; margin-bottom: .5rem; } .portada-bajada { color: var(--texto-suave); font-size: 1.02rem; max-width: 46ch; margin: 0 auto; } /* Regla ornamental con rombo al centro */ .filete { display: flex; align-items: center; gap: .75rem; margin: 1.35rem auto 0; max-width: 220px; color: var(--oro-600); } .filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--oro-600), transparent); } .filete span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--oro-600); } /* --- 7. Formularios ------------------------------------------------------ */ .campo { margin-bottom: 1.15rem; } .campo:last-child { margin-bottom: 0; } .etiqueta { display: block; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--texto); letter-spacing: .01em; } .requerido { color: var(--rojo-700); font-weight: 400; } .control { display: block; width: 100%; padding: .58rem .75rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--fondo-elevado); color: var(--texto); font-family: inherit; font-size: .925rem; line-height: 1.5; transition: border-color .15s, box-shadow .15s; } .control::placeholder { color: var(--texto-tenue); } .control:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .control:disabled { background: var(--fondo-hundido); color: var(--texto-tenue); } select.control { appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235e6672'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: 16px; } .control-mono { font-family: var(--mono); letter-spacing: .02em; } .ayuda { margin: .4rem 0 0; font-size: .78rem; color: var(--texto-tenue); } .grupo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; } /* Bloque de seccion dentro de un formulario largo */ .seccion { padding: 1.5rem 0; border-bottom: 1px solid var(--borde); } .seccion:first-of-type { padding-top: 0; } .seccion:last-of-type { border-bottom: 0; padding-bottom: .5rem; } .seccion-titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-tenue); } .seccion-titulo svg { color: var(--acento); } /* Campo con boton pegado (generar codigo) */ .control-con-accion { position: relative; } .control-con-accion .control { padding-right: 2.6rem; } .control-con-accion .btn-icono { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } .acciones-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.35rem; margin-top: .5rem; border-top: 1px solid var(--borde); } /* --- 8. Zona de subida --------------------------------------------------- */ .zona-archivo { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2rem 1.25rem; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio-lg); background: var(--fondo-hundido); text-align: center; transition: border-color .15s, background-color .15s; } .zona-archivo:hover, .zona-archivo.arrastrando { border-color: var(--acento); background: var(--acento-suave); } .zona-archivo svg { color: var(--texto-tenue); } .zona-archivo.arrastrando svg { color: var(--acento); } .zona-archivo-texto { font-size: .9rem; color: var(--texto-suave); } .zona-archivo-texto strong { color: var(--acento); font-weight: 600; } .archivo-elegido { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; margin-top: .85rem; padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-elevado); text-align: left; } .archivo-elegido-nombre { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archivo-elegido-peso { font-size: .78rem; color: var(--texto-tenue); } /* --- 9. Certificado verificado (resultado publico) ----------------------- */ .acta { border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--fondo-elevado); box-shadow: var(--sombra); overflow: hidden; margin-bottom: 1.25rem; } .acta-franja { display: flex; align-items: center; gap: .55rem; padding: .7rem 1.5rem; background: var(--verde-700); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .acta-franja.es-pendiente { background: var(--ambar-700); } .acta-cuerpo { padding: 1.75rem 1.5rem 1.5rem; } .acta-nombre { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0 0 .3rem; } .acta-dni { font-family: var(--mono); font-size: .875rem; color: var(--texto-suave); margin: 0 0 1.35rem; } .acta-evento { padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin-bottom: 1.25rem; } .acta-evento-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .3rem; } .acta-evento-nombre { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 0 0 .55rem; } .acta-periodo { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--texto-suave); } .acta-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin-bottom: 1.5rem; } .dato-etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .2rem; } .dato-valor { font-size: .925rem; } .dato-valor.es-codigo { font-family: var(--mono); font-size: .875rem; } .acta-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--borde); } .acta-nota { font-size: .78rem; color: var(--texto-tenue); max-width: 40ch; } /* --- 10. Distintivos ----------------------------------------------------- */ .distintivo { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 100px; font-size: .73rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .distintivo.es-valido { background: var(--verde-100); color: var(--verde-700); } .distintivo.es-pendiente { background: var(--ambar-100); color: var(--ambar-700); } .distintivo.es-neutro { background: var(--fondo-hundido); color: var(--texto-suave); } /* --- 11. Avisos ---------------------------------------------------------- */ .avisos { margin-bottom: 1.5rem; } .aviso { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin-bottom: .6rem; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--radio); font-size: .9rem; } .aviso-texto { flex: 1; } .aviso svg { margin-top: 2px; } .aviso.es-exito { background: var(--verde-100); border-color: var(--verde-700); color: var(--verde-700); } .aviso.es-error { background: var(--rojo-100); border-color: var(--rojo-700); color: var(--rojo-700); } .aviso.es-info { background: var(--azul-050); border-color: var(--azul-600); color: var(--acento); } .aviso-cerrar { flex: none; padding: 0; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; line-height: 0; } .aviso-cerrar:hover { opacity: 1; } /* Estado vacio / sin resultados */ .vacio { padding: 3rem 1.5rem; text-align: center; color: var(--texto-suave); } .vacio svg { color: var(--texto-tenue); margin-bottom: .85rem; } .vacio h3 { margin-bottom: .35rem; } .vacio p { font-size: .9rem; max-width: 42ch; margin: 0 auto; } /* Cargando */ .cargando { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 2.5rem; color: var(--texto-suave); font-size: .9rem; } .girador { width: 18px; height: 18px; border: 2px solid var(--borde-fuerte); border-top-color: var(--acento); border-radius: 50%; animation: girar .7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- 12. Indicadores del panel ------------------------------------------- */ .rejilla-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .indicador { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; background: var(--fondo-elevado); border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); } .indicador.es-exito { border-left-color: var(--verde-700); } .indicador.es-espera { border-left-color: var(--ambar-700); } .indicador-icono { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radio); background: var(--acento-suave); color: var(--acento); } .indicador.es-exito .indicador-icono { background: var(--verde-100); color: var(--verde-700); } .indicador.es-espera .indicador-icono { background: var(--ambar-100); color: var(--ambar-700); } .indicador-cifra { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.1; } .indicador-rotulo { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); } /* Accesos rapidos */ .rejilla-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .acceso { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-elevado); color: var(--texto); transition: border-color .15s, background-color .15s; } .acceso:hover { border-color: var(--acento); background: var(--acento-suave); text-decoration: none; } .acceso svg { color: var(--acento); } .acceso-titulo { font-weight: 600; font-size: .92rem; } .acceso-sub { font-size: .8rem; color: var(--texto-tenue); } /* --- 13. Tablas ---------------------------------------------------------- */ .tabla-scroll { overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabla th { padding: .7rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-tenue); background: var(--fondo-hundido); border-bottom: 1px solid var(--borde); white-space: nowrap; } .tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; } .tabla tbody tr:last-child td { border-bottom: 0; } .tabla tbody tr:hover { background: var(--fondo-hundido); } .tabla .col-acciones { text-align: right; white-space: nowrap; } .tabla .celda-mono { font-family: var(--mono); font-size: .82rem; white-space: nowrap; } .tabla .celda-nombre { font-weight: 600; } .tabla .celda-tenue { color: var(--texto-suave); font-size: .85rem; } .tabla .celda-fecha { color: var(--texto-suave); font-size: .85rem; white-space: nowrap; } .acciones-fila { display: inline-flex; gap: .15rem; } /* Filtros sobre la tabla */ .filtros { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: .85rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--borde); } .buscador { position: relative; } .buscador .control { padding-left: 2.35rem; } .buscador svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; } /* Fila de filtros aplicados, sobre la tabla */ .filtros-activos { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 1.5rem; background: var(--acento-suave); border-bottom: 1px solid var(--borde); font-size: .85rem; } /* Paginacion */ .paginacion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .paginacion-info { margin: 0; font-size: .85rem; color: var(--texto-suave); } .paginacion-info strong { color: var(--texto); font-weight: 600; } .paginacion-controles { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } .pag-enlace { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 .5rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo-elevado); color: var(--texto-suave); font-size: .85rem; font-variant-numeric: tabular-nums; transition: border-color .15s, background-color .15s, color .15s; } .pag-enlace:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; } .pag-enlace.es-actual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; } /* Flecha del extremo cuando ya no hay a donde ir: ocupa sitio pero no invita */ .pag-enlace.es-inerte { opacity: .38; cursor: default; background: var(--fondo-hundido); } .pag-elipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 34px; color: var(--texto-tenue); } /* --- 14. Ventana modal --------------------------------------------------- */ .velo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.25rem; /* Sin backdrop-filter a proposito: es costoso en GPU y se compone mal en equipos modestos, que es lo que hay en el instituto. */ background: rgba(10, 18, 32, .62); } .velo[hidden] { display: none; } .modal { width: 100%; max-width: 440px; background: var(--fondo-elevado); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); overflow: hidden; } .modal-cuerpo { padding: 1.5rem; } .modal-icono { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 50%; background: var(--rojo-100); color: var(--rojo-700); } .modal p { font-size: .9rem; color: var(--texto-suave); } .modal-acciones { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem; background: var(--fondo-hundido); border-top: 1px solid var(--borde); } .modal-acciones form { margin: 0; } /* --- 15. Pie ------------------------------------------------------------- */ .pie { flex: none; padding: 1.75rem 0; background: var(--barra); color: rgba(232, 238, 246, .62); border-top: 3px solid var(--oro-600); font-size: .8rem; } .pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pie strong { color: rgba(232, 238, 246, .85); font-weight: 600; } /* --- 16. Utilidades ------------------------------------------------------ */ .pila { display: flex; flex-direction: column; gap: 1.25rem; } .fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .empuja { margin-left: auto; } .centrado { text-align: center; } .tenue { color: var(--texto-tenue); } [hidden] { display: none !important; } @media (max-width: 640px) { h1 { font-size: 1.6rem; } .portada h1 { font-size: 1.7rem; } main { padding: 1.75rem 0 3rem; } .tarjeta-cuerpo, .tarjeta-cuerpo-holgado, .filtros { padding: 1.15rem; } .acta-cuerpo { padding: 1.25rem; } .barra-fila { min-height: 0; padding: .6rem 0; } .acciones-form { flex-direction: column-reverse; align-items: stretch; } .acciones-form .btn { width: 100%; } .paginacion { justify-content: center; text-align: center; } .paginacion-controles { justify-content: center; flex-wrap: wrap; } .filtros-activos { padding: .7rem 1.15rem; } }