/* `overflow-x: hidden` en no impide que sea quien se desplace. Por eso el móvil se movía a los lados aunque el body ya lo tuviera puesto. */ html:has(> .public-body) { overflow-x: hidden; } .public-body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: radial-gradient(circle at 78% 10%, rgba(29, 201, 223, .15), transparent 24%), linear-gradient(180deg, #031126 0 430px, #f4f8fb 430px 100%); } .public-header { padding: 19px 0; color: #fff; } .public-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .public-header .brand img { width: 32px; } .public-header-actions { display: flex; align-items: center; gap: 12px; } .public-header-actions a { color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 720; } .public-header-actions a:hover { color: #fff; } .public-main { flex: 1; width: 100%; padding: 55px 0 85px; } .public-shell { width: min(calc(100% - 28px), 760px); margin-inline: auto; } .public-intro { max-width: 650px; margin: 0 auto 30px; color: #fff; text-align: center; } .public-intro .eyebrow { margin-bottom: 17px; } .public-intro h1 { margin-bottom: 15px; color: #fff; font-size: clamp(2.15rem, 5vw, 3.5rem); } .public-intro p { margin-bottom: 0; color: rgba(226, 240, 250, .7); font-size: 1rem; } .public-card { overflow: hidden; border: 1px solid rgba(8, 67, 96, .12); border-radius: 27px; background: #fff; box-shadow: 0 34px 90px rgba(0, 19, 45, .2); } .search-card { padding: 34px; } .search-card h2 { margin-bottom: 10px; font-size: 1.45rem; } .search-card > p { margin-bottom: 25px; color: var(--ink-600); } .search-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #f3d89c; border-radius: 12px; background: #fff8e8; color: #775210; font-size: .86rem; } .search-alert svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .search-field { position: relative; } .search-field svg { position: absolute; top: 50%; left: 16px; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: #1592a3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .search-field input { width: 100%; height: 58px; padding: 0 16px 0 48px; border: 1px solid #cbd9e5; border-radius: 14px; background: #fff; color: var(--ink-900); font-weight: 700; letter-spacing: .04em; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .search-field input:focus { border-color: #1ab7bf; box-shadow: 0 0 0 4px rgba(26, 183, 191, .12); } .search-helper { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--ink-500); font-size: .8rem; } .search-helper svg { width: 20px; height: 20px; fill: none; stroke: #1592a3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .public-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; } .public-trust-row div { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border: 1px solid #dce8ee; border-radius: 12px; background: rgba(255, 255, 255, .75); color: var(--ink-600); font-size: .7rem; font-weight: 700; } .public-trust-row svg { width: 17px; height: 17px; fill: none; stroke: #0b9b8a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .verify-status { position: relative; overflow: hidden; padding: 28px 28px 26px; color: #fff; text-align: center; } .verify-status::before { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 32px 32px; content: ""; } .verify-status-active { background: linear-gradient(135deg, #057c75, #0bc68f); } .verify-status-suspended { background: linear-gradient(135deg, #9a5b07, #e2a52d); } .verify-status-revoked { background: linear-gradient(135deg, #8d1d2d, #dc3d4b); } .verify-status-expired, .verify-status-superseded, .verify-status-default { background: linear-gradient(135deg, #40546a, #718297); } .verify-status-icon { position: relative; display: grid; width: 72px; height: 72px; margin: 0 auto 12px; place-items: center; border: 1px solid rgba(255, 255, 255, .56); border-radius: 50%; background: rgba(255, 255, 255, .13); box-shadow: 0 0 35px rgba(255, 255, 255, .14); } .verify-status-icon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .verify-status h1 { position: relative; margin-bottom: 5px; color: #fff; font-size: 1.55rem; } .verify-status p { position: relative; margin: 0; color: rgba(255, 255, 255, .8); font-size: .8rem; } .verify-holder { padding: 34px 34px 18px; text-align: center; } .verify-photo { width: 118px; height: 118px; margin-bottom: 15px; border: 5px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #18b89d, 0 17px 38px rgba(9, 44, 65, .18); } .verify-institution { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; color: var(--ink-500); font-size: .7rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; } .verify-institution img { max-width: 62px; max-height: 35px; object-fit: contain; } .verify-holder h2 { margin-bottom: 7px; font-size: 1.85rem; /* Un apellido compuesto no debe ensanchar la tarjeta. */ overflow-wrap: anywhere; } .verify-holder > p { margin-bottom: 0; color: var(--ink-600); overflow-wrap: anywhere; } .verify-details { padding: 15px 34px 34px; } .verify-details dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; } .verify-details dl div { /* Ver la nota en .verify-context-facts: sin esto, un folio largo ensancha la página entera en el móvil. */ min-width: 0; min-height: 78px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); } .verify-details dl div:nth-child(odd) { border-right: 1px solid var(--line-soft); } .verify-details dl div:last-child, .verify-details dl div:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .verify-details dt { margin-bottom: 4px; color: var(--ink-500); font-size: .66rem; font-weight: 770; letter-spacing: .06em; text-transform: uppercase; } .verify-details dd { margin: 0; color: var(--ink-800); font-size: .9rem; font-weight: 720; overflow-wrap: anywhere; } .verify-details code { padding: 4px 7px; border-radius: 7px; background: #e8f8f6; color: #087a70; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .83rem; } .verify-message { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 0; padding: 16px; border-radius: 14px; background: #f2f8fa; color: var(--ink-600); font-size: .81rem; line-height: 1.55; } .verify-message svg { width: 23px; height: 23px; flex: none; fill: none; stroke: #079c82; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .verify-message small { display: block; margin-top: 4px; color: var(--ink-500); } /* --------------------------------------------------------------------------- Contexto del programa. Va DESPUÉS de la tarjeta del documento y con menos peso visual: lo certificado manda, esto acompaña. --------------------------------------------------------------------------- */ .verify-context { margin-top: 18px; padding: 30px 34px 34px; } .verify-context-head h2 { margin: 0 0 5px; color: var(--ink-900); font-size: 1.02rem; font-weight: 800; } .verify-context-head p { margin: 0 0 20px; color: var(--ink-500); font-size: .82rem; line-height: 1.5; } .verify-context-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; } .verify-context-facts div { /* Sin `min-width: 0` una celda de rejilla nunca se encoge por debajo de su contenido: un domicilio largo ensancharía toda la página y el móvil tendría que desplazarse a los lados. */ min-width: 0; padding: 14px 17px; border-bottom: 1px solid var(--line-soft); } .verify-context-facts div:nth-child(odd) { border-right: 1px solid var(--line-soft); } /* Ocupa el ancho completo y, por tanto, no lleva borde derecho. */ .verify-context-facts .verify-context-wide { grid-column: 1 / -1; border-right: 0; } .verify-context-facts div:last-child { border-bottom: 0; } .verify-context-facts dt { margin-bottom: 4px; color: var(--ink-500); font-size: .66rem; font-weight: 770; letter-spacing: .06em; text-transform: uppercase; } .verify-context-facts dd { margin: 0; color: var(--ink-800); font-size: .88rem; font-weight: 640; line-height: 1.45; overflow-wrap: anywhere; } .verify-context-facts code { padding: 4px 7px; border-radius: 7px; background: #e8f8f6; color: #087a70; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .83rem; } .verify-modules-title { margin: 26px 0 12px; color: var(--ink-900); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .verify-modules { margin: 0; padding: 0; list-style: none; } .verify-modules li { padding: 13px 0 13px 20px; position: relative; border-bottom: 1px solid var(--line-soft); } .verify-modules li:last-child { border-bottom: 0; } .verify-modules li::before { content: ""; position: absolute; top: 20px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); } .verify-module-name { display: block; color: var(--ink-900); font-size: .9rem; font-weight: 740; line-height: 1.4; overflow-wrap: anywhere; } .verify-module-meta { display: block; margin-top: 3px; color: var(--ink-500); font-size: .79rem; line-height: 1.45; overflow-wrap: anywhere; } .verify-context-note { margin: 20px 0 0; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-600); font-size: .78rem; line-height: 1.55; } .public-back { display: flex; justify-content: center; margin-top: 18px; } .notfound-card { padding: 42px 34px; text-align: center; } .notfound-icon { display: grid; width: 76px; height: 76px; margin: 0 auto 18px; place-items: center; border-radius: 22px; background: #eef5f8; color: #607a8e; } .notfound-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .notfound-card h1 { margin-bottom: 12px; font-size: 1.75rem; } .notfound-card p { max-width: 530px; margin: 0 auto 25px; color: var(--ink-600); } .public-footer { padding: 23px 0; color: var(--ink-500); font-size: .72rem; } .public-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .public-footer a { color: #087e8d; font-weight: 750; } @media (max-width: 640px) { .public-body { background: linear-gradient(180deg, #031126 0 390px, #f4f8fb 390px 100%); } .public-header-actions a:first-child { display: none; } .public-main { padding-top: 36px; } .public-intro { text-align: left; } .search-card, .verify-holder, .verify-details, .verify-context, .notfound-card { padding-right: 20px; padding-left: 20px; } .verify-context-facts { grid-template-columns: 1fr; } .verify-context-facts div, .verify-context-facts div:nth-child(odd) { border-right: 0; } .verify-context { padding-top: 24px; padding-bottom: 26px; } .verify-context-head h2 { font-size: .96rem; line-height: 1.35; } .verify-context-head p { margin-bottom: 16px; } .verify-modules li { padding-left: 17px; } .search-form { grid-template-columns: 1fr; } .search-form .button { width: 100%; } .public-trust-row { grid-template-columns: 1fr; } .verify-details dl { grid-template-columns: 1fr; } .verify-details dl div, .verify-details dl div:nth-child(odd), .verify-details dl div:last-child, .verify-details dl div:nth-last-child(2):nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line-soft); } .verify-details dl div:last-child { border-bottom: 0; } .public-footer-inner { flex-direction: column; align-items: flex-start; gap: 5px; } }