/* ============================================================ GRIMORIO — ÍNDICE DE PERSONAJES Spread 2 ============================================================ */ .character-selector-spread.active { display: flex; } .character-selector-spread .grimorio-page { overflow: hidden; } .character-selector-spread .page-content { height: 100%; } /* ============================================================ HOJA IZQUIERDA ============================================================ */ .character-selector-intro { display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; } .character-selector-kicker { margin-bottom: 8px; font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 3px; text-align: center; opacity: .62; } .character-selector-title { margin: 0; font-family: "Cinzel", serif; font-size: 25px; font-weight: 500; letter-spacing: 3px; text-align: center; color: #443327; } .character-selector-ornament { margin: 10px 0 14px; text-align: center; font-size: 18px; color: #7d5d35; } .character-selector-copy { margin: 0 auto 20px; max-width: 310px; text-align: center; font-size: 14px; font-style: italic; line-height: 1.35; color: #564333; } /* ============================================================ CONTROLES ============================================================ */ .gcs-selector-controls { width: 100%; max-width: 330px; margin: 0 auto; } .gcs-selector-search { position: relative; margin-bottom: 9px; } .gcs-selector-search input, .gcs-selector-controls select { width: 100%; min-height: 35px; padding: 6px 10px; border: 1px solid rgba(67, 47, 31, .42); border-radius: 2px; background: rgba(246, 228, 190, .54); color: #443327; font-family: "Cormorant Garamond", serif; font-size: 13px; outline: none; } .gcs-selector-search input { padding-left: 29px; } .gcs-selector-search::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 17px; opacity: .55; } .gcs-selector-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .gcs-selector-controls select:last-child { margin-bottom: 0; } .gcs-selector-count { margin-top: 13px; text-align: center; font-size: 11px; font-style: italic; opacity: .63; } /* ============================================================ HOJA DERECHA ============================================================ */ .character-selector-page { display: flex; flex-direction: column; padding: 24px 25px 18px; } .grimorio-character-selector { display: flex; flex: 1; flex-direction: column; min-height: 0; } /* ============================================================ TARJETAS ============================================================ */ .gcs-selector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; align-content: start; } .gcs-selector-card { --race-main: #607d98; --race-dark: #405a70; display: grid; grid-template-columns: 70px minmax(0, 1fr); min-height: 94px; overflow: hidden; border: 1px solid rgba(65, 47, 31, .38); border-left: 3px solid var(--race-main); background: rgba(244, 225, 186, .30); color: #443327; text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); transition: transform .16s ease, box-shadow .16s ease; } .gcs-selector-card:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(58, 39, 21, .14), inset 0 0 0 1px var(--race-main); } .gcs-selector-card[data-race="humano"] { --race-main: #607d98; --race-dark: #405a70; } .gcs-selector-card[data-race="centauro"] { --race-main: #78845a; --race-dark: #4f5b3b; } .gcs-selector-card[data-race="elfo"] { --race-main: #527a57; --race-dark: #35533b; } .gcs-selector-card[data-race="enano"] { --race-main: #996c39; --race-dark: #684723; } .gcs-selector-card[data-race="ogro"] { --race-main: #8d5140; --race-dark: #64362b; } .gcs-selector-card[data-race="no-muerto"] { --race-main: #71617e; --race-dark: #4c4056; } /* ============================================================ RETRATO ============================================================ */ .gcs-selector-portrait { width: 70px; height: 100%; min-height: 94px; overflow: hidden; border-right: 1px solid rgba(62, 45, 31, .22); } .gcs-selector-portrait img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) contrast(.94); mix-blend-mode: multiply; } /* ============================================================ INFORMACIÓN ============================================================ */ .gcs-selector-card-content { display: flex; flex-direction: column; min-width: 0; padding: 8px 9px 7px; } .gcs-selector-race { margin-bottom: 2px; color: var(--race-dark); font-family: "Cinzel", serif; font-size: 7px; letter-spacing: 1.3px; text-transform: uppercase; } .gcs-selector-name { margin: 0 0 2px; overflow: hidden; font-family: "Cinzel", serif; font-size: 12px; font-weight: 600; letter-spacing: .8px; white-space: nowrap; text-overflow: ellipsis; } .gcs-selector-subtitle { display: -webkit-box; overflow: hidden; font-size: 10px; font-style: italic; line-height: 1.05; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gcs-selector-card-footer { display: flex; justify-content: space-between; align-items: end; gap: 4px; margin-top: auto; padding-top: 5px; border-top: 1px solid rgba(62,45,31,.17); font-family: "Cinzel", serif; font-size: 6.5px; letter-spacing: .3px; } /* ============================================================ PAGINACIÓN ============================================================ */ .gcs-selector-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 25px; margin-top: 9px; } .gcs-selector-pagination button { min-width: 25px; height: 24px; padding: 0 6px; cursor: pointer; border: 1px solid rgba(63,45,30,.32); border-radius: 2px; background: rgba(242,222,183,.45); color: #453328; font-family: "Cinzel", serif; font-size: 8px; } .gcs-selector-pagination button.active { background: #49372b; color: #e8d3a5; } .gcs-selector-pagination button:disabled { cursor: default; opacity: .28; } /* ============================================================ ESTADOS ============================================================ */ .gcs-selector-loading, .gcs-selector-empty, .gcs-selector-error { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 270px; text-align: center; font-size: 13px; font-style: italic; opacity: .65; } /* ============================================================ FIX — SELECTOR COMO DOBLE PÁGINA COMPLETA ============================================================ */ .grimorio-stage > .character-selector-spread { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: none; transform: none !important; opacity: 0; visibility: hidden; pointer-events: none; } .grimorio-stage > .character-selector-spread.active { display: flex !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: none !important; z-index: 5; } /* Las dos hojas ocupan exactamente media apertura */ .grimorio-stage > .character-selector-spread > .grimorio-page { position: relative !important; flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* Hoja izquierda */ .grimorio-stage > .character-selector-spread > .page-left { left: auto !important; right: auto !important; transform: none !important; transform-origin: right center !important; } /* Hoja derecha */ .grimorio-stage > .character-selector-spread > .page-right { left: auto !important; right: auto !important; transform: none !important; transform-origin: left center !important; } /* Contenido interno */ .character-selector-spread .page-content { width: 100% !important; height: 100% !important; min-width: 0 !important; overflow: hidden; } /* ============================================================ FIX — HACER VISIBLE EL CONTENIDO DEL SELECTOR ============================================================ */ .grimorio-stage > .character-selector-spread.active > .grimorio-page { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .grimorio-stage > .character-selector-spread.active > .grimorio-page > .page-content { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } /* Hoja izquierda */ .grimorio-stage > .character-selector-spread.active > .page-left > .character-selector-intro { display: flex !important; flex-direction: column !important; opacity: 1 !important; visibility: visible !important; z-index: 20 !important; } /* Hoja derecha */ .grimorio-stage > .character-selector-spread.active > .page-right > .character-selector-page { display: flex !important; flex-direction: column !important; opacity: 1 !important; visibility: visible !important; z-index: 20 !important; } /* Contenedor donde JS monta las tarjetas */ .grimorio-stage #grimorio-character-selector { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; position: relative !important; z-index: 25 !important; } /* ============================================================ SELECTOR V2 — GRID 3 × 2 Seis personajes por página ============================================================ */ /* ------------------------------------------------------------ HOJA DERECHA ------------------------------------------------------------ */ .character-selector-spread .character-selector-page { padding: 24px 22px 18px !important; } .character-selector-spread .grimorio-character-selector { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; } /* ------------------------------------------------------------ GRID 3 COLUMNAS × 2 FILAS ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; align-content: stretch !important; } /* ------------------------------------------------------------ TARJETA VERTICAL ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card { --race-main: #607d98; --race-dark: #405a70; position: relative !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; border: 1px solid rgba(70, 49, 30, .42) !important; border-top: 3px solid var(--race-main) !important; border-left: 1px solid rgba(70, 49, 30, .42) !important; border-radius: 2px !important; background: linear-gradient( 180deg, rgba(255, 247, 221, .25), rgba(221, 190, 137, .14) ) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 2px 5px rgba(61, 40, 20, .09) !important; text-decoration: none !important; color: #453429 !important; transform: none; } .character-selector-spread .gcs-selector-card:hover { transform: translateY(-3px) !important; box-shadow: inset 0 0 0 1px var(--race-main), 0 7px 14px rgba(55, 35, 18, .18) !important; } /* ------------------------------------------------------------ RETRATO GRANDE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-portrait { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / .82 !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid var(--race-main) !important; background: rgba(121, 84, 46, .07) !important; } .character-selector-spread .gcs-selector-portrait img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; mix-blend-mode: multiply !important; filter: sepia(.15) contrast(.96) !important; } /* ------------------------------------------------------------ CUERPO DE TARJETA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 0 !important; padding: 7px 7px 6px !important; text-align: center !important; } /* ------------------------------------------------------------ RAZA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-race { display: inline-block !important; margin: 0 0 4px !important; padding: 1px 9px 2px !important; border-top: 1px solid var(--race-main) !important; border-bottom: 1px solid var(--race-main) !important; color: var(--race-dark) !important; font-family: "Cinzel", serif !important; font-size: 6.5px !important; line-height: 1.2 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ------------------------------------------------------------ NOMBRE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-name { width: 100% !important; margin: 0 0 3px !important; overflow: hidden !important; color: #3f2e24 !important; font-family: "Cinzel", serif !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: .8px !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* ------------------------------------------------------------ SUBTÍTULO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-subtitle { display: -webkit-box !important; width: 100% !important; min-height: 21px !important; overflow: hidden !important; color: #5d4938 !important; font-size: 8.5px !important; font-style: italic !important; line-height: 1.08 !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } /* ------------------------------------------------------------ PIE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-footer { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 5px !important; margin-top: auto !important; padding-top: 5px !important; border-top: 1px solid rgba(63, 46, 32, .18) !important; color: #594536 !important; font-family: "Cinzel", serif !important; font-size: 5.8px !important; line-height: 1 !important; letter-spacing: .25px !important; } /* ------------------------------------------------------------ PAGINACIÓN ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-pagination { flex: 0 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 4px !important; min-height: 27px !important; margin-top: 8px !important; } /* ------------------------------------------------------------ CUANDO SOLO HAY 1 O 2 PERSONAJES No estiramos las tarjetas horizontalmente. ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-grid { justify-content: start !important; } /* ------------------------------------------------------------ COLORES POR RAZA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card[data-race="humano"] { --race-main: #607d98; --race-dark: #405a70; } .character-selector-spread .gcs-selector-card[data-race="centauro"] { --race-main: #78845a; --race-dark: #4f5b3b; } .character-selector-spread .gcs-selector-card[data-race="elfo"] { --race-main: #557b59; --race-dark: #37573d; } .character-selector-spread .gcs-selector-card[data-race="enano"] { --race-main: #976a38; --race-dark: #654522; } .character-selector-spread .gcs-selector-card[data-race="ogro"] { --race-main: #8b5140; --race-dark: #61362b; } .character-selector-spread .gcs-selector-card[data-race="no-muerto"] { --race-main: #71617d; --race-dark: #4d4155; } /* ============================================================ SELECTOR V3 CABECERA + CONTROLES + TEXTOS MÁS GRANDES ============================================================ */ /* ------------------------------------------------------------ CABECERA EN HOJA DERECHA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header { flex: 0 0 auto !important; width: 100% !important; margin: 0 0 15px !important; padding: 0 2px 12px !important; border-bottom: 1px solid rgba(67, 47, 31, .24) !important; text-align: center !important; } .character-selector-spread .gcs-selector-header .character-selector-kicker { margin-bottom: 4px !important; font-size: 8px !important; letter-spacing: 2.4px !important; } .character-selector-spread .gcs-selector-header .character-selector-title { margin: 0 0 3px !important; font-size: 21px !important; line-height: 1.05 !important; letter-spacing: 2.2px !important; } .character-selector-spread .gcs-selector-header .character-selector-ornament { margin: 4px 0 5px !important; font-size: 12px !important; } .character-selector-spread .gcs-selector-header .character-selector-copy { margin: 0 auto 10px !important; max-width: 440px !important; font-size: 11px !important; line-height: 1.15 !important; } /* ------------------------------------------------------------ HERRAMIENTAS DE BÚSQUEDA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .gcs-selector-controls { width: 100% !important; max-width: none !important; margin: 0 !important; } .character-selector-spread .gcs-selector-search { margin-bottom: 7px !important; } .character-selector-spread .gcs-selector-search input { min-height: 32px !important; padding: 5px 10px 5px 30px !important; font-size: 12px !important; } .character-selector-spread .gcs-selector-filter-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-bottom: 7px !important; } .character-selector-spread .gcs-selector-controls select { min-height: 30px !important; padding: 4px 7px !important; font-size: 11px !important; } .character-selector-spread .gcs-selector-count { margin-top: 6px !important; font-size: 10px !important; } /* ------------------------------------------------------------ LAS FICHAS EMPIEZAN MÁS ABAJO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-grid { flex: 1 1 auto !important; margin-top: 3px !important; gap: 12px !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; grid-template-rows: repeat( 2, minmax(0, 1fr) ) !important; } /* ------------------------------------------------------------ RETRATO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-portrait { aspect-ratio: 1 / .78 !important; } /* ------------------------------------------------------------ RAZA MÁS LEGIBLE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-race { margin-bottom: 5px !important; padding: 2px 9px !important; font-size: 8px !important; letter-spacing: 1.35px !important; } /* ------------------------------------------------------------ NOMBRE MÁS GRANDE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-name { margin-bottom: 4px !important; font-size: 15px !important; line-height: 1.05 !important; letter-spacing: .8px !important; } /* ------------------------------------------------------------ SUBTÍTULO MÁS GRANDE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-subtitle { min-height: 27px !important; font-size: 10.5px !important; line-height: 1.12 !important; } /* ------------------------------------------------------------ NIVEL / ABRIR ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-footer { padding-top: 6px !important; font-size: 7.5px !important; letter-spacing: .35px !important; } /* ------------------------------------------------------------ CUERPO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-content { padding: 8px 9px 7px !important; } /* ------------------------------------------------------------ HOJA IZQUIERDA Ahora queda como parte decorativa del índice. ------------------------------------------------------------ */ .character-selector-spread .selector-left-decoration { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: .36; } .character-selector-spread .selector-left-symbol { font-size: 46px; color: #765936; } .character-selector-spread .selector-left-label { margin-top: 12px; font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 3px; } /* ============================================================ SELECTOR V4 — GRID DEFINITIVO 3 × 1 Tres fichas grandes por página ============================================================ */ /* ------------------------------------------------------------ CABECERA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header { margin: 0 0 18px !important; padding: 0 0 15px !important; } .character-selector-spread .gcs-selector-header .character-selector-kicker { margin-bottom: 5px !important; font-size: 8.5px !important; letter-spacing: 3px !important; } .character-selector-spread .gcs-selector-header .character-selector-title { margin: 0 0 6px !important; font-size: 25px !important; line-height: 1 !important; letter-spacing: 2.8px !important; } .character-selector-spread .gcs-selector-header .character-selector-ornament { margin: 5px 0 7px !important; font-size: 14px !important; } .character-selector-spread .gcs-selector-header .character-selector-copy { max-width: 460px !important; margin: 0 auto 12px !important; font-size: 12px !important; line-height: 1.18 !important; } /* ------------------------------------------------------------ BUSCADOR ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-search { margin-bottom: 8px !important; } .character-selector-spread .gcs-selector-search input { min-height: 36px !important; padding: 6px 10px 6px 31px !important; font-size: 13px !important; } /* ------------------------------------------------------------ FILTROS EN UNA SOLA FILA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-filter-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; } .character-selector-spread .gcs-selector-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .character-selector-spread .gcs-selector-controls select { min-height: 34px !important; padding: 5px 8px !important; font-size: 12px !important; } .character-selector-spread #grimorio-order-filter { width: 100% !important; } .character-selector-spread .gcs-selector-count { margin: 1px 0 0 !important; font-size: 10.5px !important; } /* ------------------------------------------------------------ GRID 3 COLUMNAS × 1 FILA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-grid { display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; grid-template-rows: minmax(0, 1fr) !important; gap: 14px !important; flex: 1 1 auto !important; width: 100% !important; min-height: 0 !important; margin-top: 5px !important; align-items: stretch !important; align-content: stretch !important; } /* ------------------------------------------------------------ FICHA GRANDE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; border: 1px solid rgba(67,47,31,.46) !important; border-top: 4px solid var(--race-main) !important; border-radius: 4px !important; overflow: hidden !important; background: linear-gradient( 180deg, rgba(255,248,224,.34), rgba(222,191,139,.16) ) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 4px 9px rgba(52,33,17,.12) !important; } .character-selector-spread .gcs-selector-card:hover { transform: translateY(-4px) !important; box-shadow: inset 0 0 0 1px var(--race-main), 0 9px 17px rgba(50,31,16,.22) !important; } /* ------------------------------------------------------------ RETRATO GRANDE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-portrait { flex: 0 0 48% !important; width: 100% !important; height: 48% !important; min-height: 0 !important; aspect-ratio: auto !important; overflow: hidden !important; border-bottom: 1px solid var(--race-main) !important; background: rgba(115,78,41,.07) !important; } .character-selector-spread .gcs-selector-portrait img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; mix-blend-mode: multiply !important; filter: sepia(.12) contrast(.97) !important; } /* ------------------------------------------------------------ CUERPO DE LA FICHA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; min-height: 0 !important; padding: 10px 10px 9px !important; text-align: center !important; } /* ------------------------------------------------------------ RAZA ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-race { margin: 0 0 7px !important; padding: 2px 12px 3px !important; border-top: 1px solid var(--race-main) !important; border-bottom: 1px solid var(--race-main) !important; font-size: 8.5px !important; line-height: 1.1 !important; letter-spacing: 1.6px !important; } /* ------------------------------------------------------------ NOMBRE ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-name { width: 100% !important; margin: 0 0 6px !important; font-size: 17px !important; line-height: 1.05 !important; letter-spacing: 1.1px !important; } /* ------------------------------------------------------------ SUBTÍTULO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-subtitle { width: 100% !important; min-height: 32px !important; font-size: 11.5px !important; line-height: 1.14 !important; } /* ------------------------------------------------------------ NIVEL / ABRIR ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card-footer { width: 100% !important; margin-top: auto !important; padding-top: 8px !important; border-top: 1px solid rgba(62,45,31,.22) !important; font-size: 8.5px !important; line-height: 1 !important; letter-spacing: .45px !important; } /* ------------------------------------------------------------ PAGINACIÓN ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-pagination { flex: 0 0 28px !important; min-height: 28px !important; margin-top: 10px !important; } .character-selector-spread .gcs-selector-pagination button { min-width: 28px !important; height: 27px !important; font-size: 9px !important; } /* ------------------------------------------------------------ HOJA IZQUIERDA DECORATIVA ------------------------------------------------------------ */ .character-selector-spread .selector-left-decoration { opacity: .42 !important; } .character-selector-spread .selector-left-symbol { position: relative; font-size: 58px !important; color: #82623c !important; } .character-selector-spread .selector-left-symbol::before { content: "☾ ✦ ☽"; display: block; margin-bottom: 17px; font-size: 18px; letter-spacing: 17px; opacity: .7; } .character-selector-spread .selector-left-label { max-width: 250px; margin-top: 18px !important; text-align: center; font-size: 10px !important; line-height: 1.6; letter-spacing: 3px !important; } /* ------------------------------------------------------------ SOLO PUEDEN APARECER 3 FICHAS ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-card:nth-child(n+4) { display: none !important; } /* ============================================================ SELECTOR V4.1 AJUSTE FINO DE CABECERA ============================================================ */ /* Dejamos libre la zona superior derecha para III / V */ .character-selector-spread .gcs-selector-header { position: relative !important; padding-top: 5px !important; padding-right: 62px !important; padding-left: 8px !important; margin-bottom: 16px !important; } /* ------------------------------------------------------------ REGISTRO DEL GRIMORIO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .character-selector-kicker { margin: 0 0 6px !important; font-size: 7.5px !important; line-height: 1 !important; letter-spacing: 2.8px !important; opacity: .55 !important; white-space: nowrap !important; } /* ------------------------------------------------------------ TÍTULO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .character-selector-title { margin: 0 auto 7px !important; max-width: 100% !important; font-size: 22px !important; line-height: 1.05 !important; letter-spacing: 2.1px !important; white-space: nowrap !important; } /* ------------------------------------------------------------ ORNAMENTO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .character-selector-ornament { margin: 4px 0 7px !important; font-size: 12px !important; line-height: 1 !important; } /* ------------------------------------------------------------ TEXTO INTRODUCTORIO ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .character-selector-copy { max-width: 395px !important; margin: 0 auto 11px !important; font-size: 10.5px !important; line-height: 1.22 !important; text-align: center !important; } /* ------------------------------------------------------------ LOS CONTROLES RECUPERAN TODO EL ANCHO El espacio reservado es solamente para la cabecera. ------------------------------------------------------------ */ .character-selector-spread .gcs-selector-header .gcs-selector-controls { width: calc(100% + 54px) !important; max-width: none !important; margin-right: -54px !important; } /* ============================================================ FIX BRINCO III / V Mantener selector visible mientras termina su salida. NO modifica transforms ni geometría. ============================================================ */ .grimorio-stage > .character-selector-spread.turn-out-forward, .grimorio-stage > .character-selector-spread.turn-out-backward { display: flex !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; z-index: 50 !important; } /* ============================================================ FIN FIX BRINCO III / V ============================================================ */