/* ===================================================================== SISTEMA DE DISEÑO UCIPS · v1.1 --------------------------------------------------------------------- Hoja canónica compartida por las plataformas digitales de la UCIPS: · plataformaucips.com (Moodle · tema "ucips") · agora.plataformaucips.com (Portal editorial Ágora Policial) Los tokens --p-* y las clases .ucips-p-* replican EXACTAMENTE los que ya operan en el portal de Moodle, para que ambos sitios se vean como un solo sistema. Todo lo que se agregue aquí debe agregarse en las dos plataformas: esta hoja es la fuente de verdad. Modo oscuro: se activa con el atributo data-ucips-theme="dark" en , igual que en Moodle. Convenciones ------------ · Prefijo de clase: ucips-p- · Prefijo de token: --p- · Tipografía: Montserrat 400–800 (variable, woff2 local) · Ancho de columna: 1180px · Radio de botón: 6px ===================================================================== */ /* ------------------------------------------------------------------ 1 · Tipografía institucional ------------------------------------------------------------------ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------ 2 · Tokens · modo claro ------------------------------------------------------------------ */ body.ucips-portal-body { /* Institucionales (idénticos al tema de Moodle) */ --p-fondo: #f6f5f2; --p-navy: #0b1f38; --p-navy-2: #0a1a2e; --p-azul: #0f2a4a; --p-oro: #fdc82f; --p-dorado: #d4b264; --p-bronce: #b08d3e; --p-bronce-2: #8a6d2f; --p-bronce-hover: #c6a154; --p-texto: #1c2733; --p-gris: #5a6675; --p-gris-2: #4a5665; --p-borde: #e3e0d8; --p-borde-2: #e9e6de; --p-fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Extensiones para aplicaciones (Ágora). Mantener nombres al ampliar. */ --p-superficie: #ffffff; --p-superficie-2: #fbfaf8; --p-campo: #ffffff; --p-campo-borde: #d6d2c8; --p-sombra: 0 10px 30px rgba(11, 31, 56, .07); --p-sombra-fuerte: 0 22px 60px rgba(11, 31, 56, .18); --p-radio: 6px; --p-radio-lg: 14px; /* Colores de señal */ --p-exito: #1f6b37; --p-exito-bg: #e8f3ea; --p-alerta: #8a5a12; --p-alerta-bg: #fbf3e2; --p-peligro: #a32718; --p-peligro-bg: #fbeae8; --p-info: #14507f; --p-info-bg: #e8f0f8; margin: 0; background: var(--p-fondo); color: var(--p-texto); font-family: var(--p-fuente); } /* ------------------------------------------------------------------ 3 · Tokens · modo oscuro ------------------------------------------------------------------ */ body.ucips-portal-body[data-ucips-theme="dark"] { --p-fondo: #0a1420; --p-texto: #e6ecf3; --p-azul: #e8eef6; --p-gris: #9aa7b6; --p-gris-2: #aab6c4; --p-bronce-2: #d4b264; --p-borde: rgba(255, 255, 255, .10); --p-borde-2: rgba(255, 255, 255, .08); --p-superficie: #0f1d2e; --p-superficie-2: #132339; --p-campo: #0c1929; --p-campo-borde: rgba(255, 255, 255, .16); --p-sombra: 0 10px 30px rgba(0, 0, 0, .40); --p-sombra-fuerte: 0 22px 60px rgba(0, 0, 0, .55); --p-exito-bg: rgba(56, 161, 105, .16); --p-exito: #7fd6a0; --p-alerta-bg: rgba(212, 178, 100, .16); --p-alerta: #e3c583; --p-peligro-bg: rgba(214, 106, 92, .16); --p-peligro: #f0a89d; --p-info-bg: rgba(90, 150, 210, .16); --p-info: #9cc4ea; } /* ------------------------------------------------------------------ 4 · Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body.ucips-portal-body a { text-decoration: none; color: var(--p-bronce-2); } body.ucips-portal-body a:hover { text-decoration: underline; } body.ucips-portal-body img { max-width: 100%; } body.ucips-portal-body h1, body.ucips-portal-body h2, body.ucips-portal-body h3 { font-family: var(--p-fuente); } :where(body.ucips-portal-body) :focus-visible { outline: 3px solid var(--p-bronce); outline-offset: 2px; border-radius: 3px; } .ucips-p-wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } .ucips-p-wrap--angosto { max-width: 760px; } .ucips-p-kicker { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .ucips-p-kicker--oro { color: var(--p-dorado); } .ucips-p-kicker--bronce { color: var(--p-bronce-2); } .ucips-p-h1 { font-size: 44px; line-height: 1.12; margin: 0 0 20px; font-weight: 700; color: #fff; } .ucips-p-h2 { font-size: 32px; color: var(--p-azul); margin: 0; line-height: 1.18; font-weight: 700; } .ucips-p-h2--mb { margin-bottom: 36px; } .ucips-p-h3 { font-size: 20px; color: var(--p-azul); margin: 0 0 10px; font-weight: 700; line-height: 1.25; } .ucips-p-lead { font-size: 17px; color: var(--p-gris); line-height: 1.6; } .ucips-p-muted { color: var(--p-gris); } .ucips-p-small { font-size: 13px; } /* ------------------------------------------------------------------ 5 · Botones ------------------------------------------------------------------ */ .ucips-p-btn { display: inline-block; padding: 10px 24px; border-radius: var(--p-radio); font-weight: 700; font-size: 14px; font-family: var(--p-fuente); background: var(--p-azul); color: #fff; border: 0; cursor: pointer; text-align: center; transition: background .15s ease, opacity .15s ease; } .ucips-p-btn:hover { background: #1a4272; color: #fff; text-decoration: none; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-btn { background: #24568f; color: #fff; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-btn:hover { background: #2e69ab; } .ucips-p-btn--oro { background: var(--p-bronce); color: var(--p-navy); font-size: 15px; padding: 14px 30px; } .ucips-p-btn--oro:hover { background: var(--p-bronce-hover); color: var(--p-navy); } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-btn--oro { background: var(--p-bronce); color: var(--p-navy); } .ucips-p-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; padding: 13px 26px; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; } .ucips-p-btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* Botón secundario sobre fondo claro (extensión para aplicaciones). */ .ucips-p-btn--suave { background: transparent; color: var(--p-azul); border: 1px solid var(--p-campo-borde); } .ucips-p-btn--suave:hover { background: rgba(176, 141, 62, .10); color: var(--p-azul); } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-btn--suave { background: transparent; color: var(--p-texto); } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-btn--suave:hover { background: rgba(212, 178, 100, .12); } .ucips-p-btn--peligro { background: var(--p-peligro); color: #fff; } .ucips-p-btn--peligro:hover { background: #8c1f12; color: #fff; } .ucips-p-btn--bloque { display: block; width: 100%; } .ucips-p-btn[disabled], .ucips-p-btn:disabled { opacity: .55; cursor: not-allowed; } /* ------------------------------------------------------------------ 6 · Barra superior y encabezado ------------------------------------------------------------------ */ .ucips-p-topbar { background: var(--p-navy); color: #c9d3e0; font-size: 13px; } .ucips-p-topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } .ucips-p-topbar a { color: #c9d3e0; } .ucips-p-topbar a:hover { color: var(--p-dorado); } .ucips-p-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--p-borde); position: sticky; top: 0; z-index: 40; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-header { background: rgba(9, 17, 28, .92); border-bottom-color: rgba(255, 255, 255, .08); } .ucips-p-header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; } .ucips-p-brand { display: flex; align-items: center; gap: 13px; color: inherit; } .ucips-p-brand:hover { text-decoration: none; } .ucips-p-brand__logo { height: 44px; width: auto; display: block; } .ucips-p-brand__nombre { font-weight: 800; font-size: 17px; color: var(--p-azul); line-height: 1.15; } .ucips-p-brand__sub { font-size: 11.5px; color: var(--p-gris); letter-spacing: .02em; } .ucips-p-nav { display: flex; align-items: center; gap: 22px; } .ucips-p-nav a { font-size: 14px; font-weight: 600; color: var(--p-gris-2); } .ucips-p-nav a:hover { color: var(--p-bronce-2); text-decoration: none; } .ucips-p-nav a.es-activo { color: var(--p-bronce-2); } .ucips-p-themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--p-borde); background: transparent; color: var(--p-gris); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .ucips-p-themetoggle:hover { color: var(--p-azul); border-color: var(--p-bronce); background: rgba(176, 141, 62, .08); } .ucips-p-themetoggle svg { width: 19px; height: 19px; display: block; } .ucips-p-themetoggle .ucips-ic-sun { display: none; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-themetoggle .ucips-ic-moon { display: none; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-themetoggle .ucips-ic-sun { display: block; } /* ------------------------------------------------------------------ 7 · Superficies ------------------------------------------------------------------ */ .ucips-p-card { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: var(--p-radio-lg); box-shadow: var(--p-sombra); padding: 26px; } .ucips-p-card--plano { box-shadow: none; } .ucips-p-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .ucips-p-hero { background: linear-gradient(135deg, var(--p-navy) 0%, var(--p-azul) 60%, #143a63 100%); color: #fff; } body.ucips-portal-body[data-ucips-theme="dark"] .ucips-p-hero { background: linear-gradient(135deg, #060e18 0%, #0b1f38 60%, #102b49 100%); } .ucips-p-hero__in { padding-top: 64px; padding-bottom: 64px; } .ucips-p-hero p { color: rgba(255, 255, 255, .82); } .ucips-p-divisor { height: 1px; background: var(--p-borde); border: 0; margin: 28px 0; } /* ------------------------------------------------------------------ 8 · Formularios ------------------------------------------------------------------ */ .ucips-p-campo { margin-bottom: 18px; } .ucips-p-label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--p-azul); } .ucips-p-req { color: var(--p-peligro); font-weight: 700; } .ucips-p-input, .ucips-p-select, .ucips-p-textarea { width: 100%; font: inherit; font-size: 14.5px; color: var(--p-texto); background: var(--p-campo); border: 1px solid var(--p-campo-borde); border-radius: var(--p-radio); padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; } .ucips-p-textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .ucips-p-input:focus, .ucips-p-select:focus, .ucips-p-textarea:focus { outline: none; border-color: var(--p-bronce); box-shadow: 0 0 0 3px rgba(176, 141, 62, .18); } .ucips-p-input[aria-invalid="true"], .ucips-p-select[aria-invalid="true"], .ucips-p-textarea[aria-invalid="true"] { border-color: var(--p-peligro); } .ucips-p-ayuda { font-size: 12.5px; color: var(--p-gris); margin-top: 5px; } .ucips-p-error { font-size: 12.5px; color: var(--p-peligro); margin-top: 5px; font-weight: 600; } .ucips-p-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .ucips-p-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--p-bronce); } .ucips-p-dropzone { border: 1.5px dashed var(--p-campo-borde); border-radius: var(--p-radio-lg); padding: 18px; background: var(--p-superficie-2); } .ucips-p-dropzone.es-activo { border-color: var(--p-bronce); background: rgba(176, 141, 62, .07); } .ucips-p-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ucips-p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ucips-p-grid--full > .es-full { grid-column: 1 / -1; } .es-full { grid-column: 1 / -1; } /* ------------------------------------------------------------------ 9 · Avisos ------------------------------------------------------------------ */ .ucips-p-aviso { border-left: 4px solid var(--p-bronce); background: var(--p-superficie-2); border-radius: 0 var(--p-radio) var(--p-radio) 0; padding: 13px 16px; font-size: 14px; margin-bottom: 14px; color: var(--p-texto); } .ucips-p-aviso--exito { border-left-color: var(--p-exito); background: var(--p-exito-bg); } .ucips-p-aviso--error { border-left-color: var(--p-peligro); background: var(--p-peligro-bg); } .ucips-p-aviso--alerta { border-left-color: var(--p-alerta); background: var(--p-alerta-bg); } .ucips-p-aviso--info { border-left-color: var(--p-info); background: var(--p-info-bg); } /* ------------------------------------------------------------------ 10 · Distintivos de estado ------------------------------------------------------------------ */ .ucips-p-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap; } .ucips-p-badge--neutro { background: var(--p-superficie-2); color: var(--p-gris); border-color: var(--p-borde); } .ucips-p-badge--info { background: var(--p-info-bg); color: var(--p-info); } .ucips-p-badge--proceso { background: var(--p-alerta-bg); color: var(--p-alerta); } .ucips-p-badge--exito { background: var(--p-exito-bg); color: var(--p-exito); } .ucips-p-badge--peligro { background: var(--p-peligro-bg); color: var(--p-peligro); } .ucips-p-badge--oro { background: rgba(176,141,62,.14); color: var(--p-bronce-2); } .ucips-p-badge__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* ------------------------------------------------------------------ 11 · Tablas ------------------------------------------------------------------ */ .ucips-p-tabla-wrap { overflow-x: auto; border-radius: var(--p-radio-lg); border: 1px solid var(--p-borde); background: var(--p-superficie); } .ucips-p-tabla { width: 100%; border-collapse: collapse; font-size: 14px; } .ucips-p-tabla th { text-align: left; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--p-gris); font-weight: 700; padding: 13px 16px; border-bottom: 1px solid var(--p-borde); background: var(--p-superficie-2); white-space: nowrap; } .ucips-p-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--p-borde-2); vertical-align: middle; } .ucips-p-tabla tr:last-child td { border-bottom: 0; } .ucips-p-tabla tbody tr:hover { background: rgba(176, 141, 62, .05); } .ucips-p-tabla__folio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--p-bronce-2); } .ucips-p-vacio { text-align: center; padding: 54px 24px; color: var(--p-gris); } .ucips-p-vacio svg { width: 46px; height: 46px; opacity: .35; margin-bottom: 14px; } /* ------------------------------------------------------------------ 12 · Línea de tiempo del dictamen ------------------------------------------------------------------ */ .ucips-p-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .ucips-p-timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--p-borde); } .ucips-p-timeline li { position: relative; padding: 0 0 24px 38px; } .ucips-p-timeline li:last-child { padding-bottom: 0; } .ucips-p-timeline__punto { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--p-superficie); border: 2px solid var(--p-borde); display: flex; align-items: center; justify-content: center; color: var(--p-gris); } .ucips-p-timeline__punto svg { width: 13px; height: 13px; } .ucips-p-timeline li.es-hecho .ucips-p-timeline__punto { background: var(--p-bronce); border-color: var(--p-bronce); color: #fff; } .ucips-p-timeline li.es-actual .ucips-p-timeline__punto { border-color: var(--p-bronce); color: var(--p-bronce-2); box-shadow: 0 0 0 4px rgba(176,141,62,.16); } .ucips-p-timeline__titulo { font-weight: 700; font-size: 14.5px; color: var(--p-azul); } .ucips-p-timeline__fecha { font-size: 12.5px; color: var(--p-gris); margin-top: 2px; } .ucips-p-timeline__nota { font-size: 13.5px; color: var(--p-gris-2); margin-top: 7px; line-height: 1.55; } /* Barra de progreso del proceso editorial */ .ucips-p-pasos { display: flex; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; } .ucips-p-pasos li { flex: 1; height: 5px; border-radius: 3px; background: var(--p-borde); } .ucips-p-pasos li.es-hecho { background: var(--p-bronce); } /* ------------------------------------------------------------------ 12b · Tarjeta de expediente --------------------------------------------------------------------- Sustituye a la tabla cuando hay pocos elementos y cada uno necesita contar su propia historia: estado, avance, tiempo y siguiente acción. Es también la forma en que las tablas se comportan en móvil. ------------------------------------------------------------------ */ .ucips-p-mcard { background: var(--p-superficie); border: 1px solid var(--p-borde); border-radius: var(--p-radio-lg); padding: 18px 20px; margin-bottom: 14px; position: relative; overflow: hidden; transition: border-color .15s ease; } .ucips-p-mcard:hover { border-color: var(--p-campo-borde); } /* Cuando la acción le corresponde a quien mira, la tarjeta se distingue. */ .ucips-p-mcard.es-tuyo { border-color: var(--p-bronce); } .ucips-p-mcard.es-tuyo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--p-bronce); } .ucips-p-mcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .ucips-p-mcard__titulo { font-size: 15.5px; font-weight: 700; color: var(--p-azul); line-height: 1.35; margin: 8px 0 8px; } .ucips-p-mcard__titulo a { color: inherit; } .ucips-p-mcard__titulo a:hover { color: var(--p-bronce-2); text-decoration: none; } .ucips-p-mcard__meta { display: flex; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--p-gris); margin-bottom: 14px; } .ucips-p-mcard__pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p-borde-2); } /* Título largo: dos líneas completas, nunca cortado en el servidor. */ .ucips-p-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------------------ 12c · Siguiente acción y reloj ------------------------------------------------------------------ */ .ucips-p-accion { font-size: 13.5px; font-weight: 600; } .ucips-p-accion--tuya { color: var(--p-bronce-2); } .ucips-p-accion--espera { color: var(--p-gris); } .ucips-p-reloj { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .ucips-p-reloj--ok { color: var(--p-gris); } .ucips-p-reloj--pronto { color: var(--p-alerta); } .ucips-p-reloj--tarde { color: var(--p-peligro); } .ucips-p-reloj svg { width: 13px; height: 13px; flex: 0 0 auto; } /* ------------------------------------------------------------------ 12d · Lista de prioridades (triaje) ------------------------------------------------------------------ */ .ucips-p-prio { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--p-borde-2); } .ucips-p-prio:last-child { border-bottom: 0; } .ucips-p-prio__marca { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; flex: 0 0 auto; } .ucips-p-prio__marca--alta { background: var(--p-peligro-bg); color: var(--p-peligro); } .ucips-p-prio__marca--media { background: var(--p-alerta-bg); color: var(--p-alerta); } .ucips-p-prio__marca--baja { background: var(--p-info-bg); color: var(--p-info); } .ucips-p-prio__cuerpo { flex: 1; min-width: 0; } .ucips-p-prio__titulo { font-size: 13.5px; font-weight: 700; color: var(--p-azul); line-height: 1.4; } .ucips-p-prio__detalle { font-size: 12.5px; color: var(--p-gris); margin-top: 2px; } /* ------------------------------------------------------------------ 12e · Franja de contexto por rol --------------------------------------------------------------------- Una misma persona puede ser autora, dictaminadora y editora. Esta franja recuerda de forma permanente con qué rol está entrando. ------------------------------------------------------------------ */ .ucips-p-ctx { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--p-radio); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 22px; } .ucips-p-ctx svg { width: 15px; height: 15px; flex: 0 0 auto; } .ucips-p-ctx__nota { font-weight: 500; opacity: .85; } .ucips-p-ctx--autor { background: rgba(176, 141, 62, .12); color: var(--p-bronce-2); } .ucips-p-ctx--editor { background: var(--p-info-bg); color: var(--p-info); } .ucips-p-ctx--revisor{ background: var(--p-navy); color: var(--p-dorado); } .ucips-p-ctx--admin { background: var(--p-superficie-2); color: var(--p-gris-2); border: 1px solid var(--p-borde); } /* ------------------------------------------------------------------ 12f · Escala de valoración con anclas ------------------------------------------------------------------ */ .ucips-p-escala { display: flex; gap: 4px; } .ucips-p-escala input { position: absolute; opacity: 0; width: 0; height: 0; } .ucips-p-escala label { width: 36px; height: 36px; border-radius: 8px; cursor: pointer; border: 1px solid var(--p-campo-borde); background: var(--p-campo); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--p-gris); margin: 0; transition: all .12s ease; } .ucips-p-escala label:hover { border-color: var(--p-bronce); } .ucips-p-escala input:checked + label { background: var(--p-bronce); border-color: var(--p-bronce); color: var(--p-navy); } .ucips-p-escala input:focus-visible + label { outline: 3px solid var(--p-bronce); outline-offset: 2px; } .ucips-p-anclas { display: flex; justify-content: space-between; font-size: 11px; color: var(--p-gris); margin-top: 5px; width: 196px; } /* ------------------------------------------------------------------ 13 · Pestañas ------------------------------------------------------------------ */ .ucips-p-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--p-borde); margin-bottom: 24px; overflow-x: auto; } .ucips-p-tabs a { padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--p-gris); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .ucips-p-tabs a:hover { color: var(--p-bronce-2); text-decoration: none; } .ucips-p-tabs a.es-activo { color: var(--p-bronce-2); border-bottom-color: var(--p-bronce); } /* ------------------------------------------------------------------ 14 · Pie de página ------------------------------------------------------------------ */ .ucips-p-footer { background: var(--p-navy); color: #a9b6c7; font-size: 13.5px; margin-top: 64px; } .ucips-p-footer__in { padding-top: 40px; padding-bottom: 40px; } .ucips-p-footer strong { color: #fff; } .ucips-p-footer a { color: var(--p-dorado); } /* ------------------------------------------------------------------ 15 · Utilidades ------------------------------------------------------------------ */ .ucips-p-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ucips-p-fila--fin { justify-content: flex-end; } .ucips-p-fila--entre { justify-content: space-between; } .ucips-p-pila > * + * { margin-top: 16px; } .ucips-p-mt-0 { margin-top: 0; } .ucips-p-mb-0 { margin-bottom: 0; } .ucips-p-mb-24 { margin-bottom: 24px; } .ucips-p-mb-32 { margin-bottom: 32px; } .ucips-p-seccion { padding-top: 44px; padding-bottom: 44px; } .ucips-p-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ucips-p-chip { display: inline-block; background: rgba(176, 141, 62, .12); color: var(--p-bronce-2); border: 1px solid rgba(176, 141, 62, .28); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } /* ------------------------------------------------------------------ 16 · Adaptable ------------------------------------------------------------------ */ @media (max-width: 900px) { .ucips-p-grid, .ucips-p-grid--3 { grid-template-columns: 1fr; } .ucips-p-h1 { font-size: 32px; } .ucips-p-h2 { font-size: 25px; } .ucips-p-hero__in { padding-top: 44px; padding-bottom: 44px; } } @media (max-width: 640px) { .ucips-p-wrap { padding-left: 18px; padding-right: 18px; } .ucips-p-card { padding: 20px; } .ucips-p-nav { gap: 14px; } .ucips-p-brand__sub { display: none; } } @media (prefers-reduced-motion: reduce) { body.ucips-portal-body *, body.ucips-portal-body *::before, body.ucips-portal-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { .ucips-p-header, .ucips-p-topbar, .ucips-p-footer, .ucips-p-btn { display: none !important; } body.ucips-portal-body { background: #fff; } .ucips-p-card { box-shadow: none; border-color: #ccc; } }