*{ margin: 0; padding: 0; box-sizing: border-box; } :root { --accent: #0066ff; --accent-light: rgba(0, 102, 255, 0.2); --bg-input: #f5f7fa; --text-input: #333; --placeholder: #999; --bg: #f6f9fe; --text: #1f2937; --muted: #495067; --primary: #f4b43c; --primary-contrast: #ffffff; --card: #ffffff; --border: #e6e7ef; --shadow: 0 10px 24px rgba(0,0,0,.14); --radius: 18px; --radius-sm: 12px; --radius-lg: 22px; --dnd-paper: #f7f1e1; --dnd-paper-2: #f3ead2; --dnd-ink: #2b2518; --dnd-brown: #4a3720; --dnd-gold: #b68c45; --dnd-gold-2: #e3cf98; --dnd-muted: #7b6a4b; --felt-700: #0f4d2f; --felt-600: #16663d; --felt-500: #1e7a47; --brass: #d6b25a; --brass-dark: #7a5b27; --ink: #1e293b; --ink-soft: #4b5563; --sheet: #ffffff; --shadow-soft: 0 6px 14px rgba(0,0,0,.10); --lapis-700: #163a6b; --lapis-500: #1f57a5; --lapis-100: #eaf3ff; --paper: #fff; --paper-warm: #fffaf0; --parchment: #fcf7ea; --parchment-2: #f4e6c3; --parchment-edge: #e6d6a8; --footer-bg: #ffffff; --footer-fg: #1f2937; --footer-muted: #6b7280; --footer-border: #e5e7eb; --footer-accent: #2563eb; } .auth-page { display: flex; justify-content: center; align-items: center; background-color: #d0e7ff; } .auth-container { display: flex; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.1); overflow: hidden; max-width: 900px; width: 100%; } .auth-panel { flex: 1; padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; } .auth-panel + .auth-panel { border-left: 1px solid #eee; } .auth-panel h2 { margin-bottom: 30px; font-size: 1.8rem; color: #333; text-align: center; } .auth-panel form input { width: 100%; padding: 12px; margin-bottom: 20px; border: 2px solid #ccc; border-radius: 6px; transition: border-color .2s, box-shadow .2s; } .auth-panel form input:focus { border-color: #F2AF29; box-shadow: 0 0 6px rgba(242,175,41,0.4); outline: none; } .auth-panel form button { background-color: #F2AF29; color: white; border: none; padding: 14px; border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform .1s, box-shadow .2s; } .auth-panel form button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .error-message { color: #d93025; background: #fce8e6; border: 1px solid #f5c2c0; padding: 10px; margin-bottom: 20px; border-radius: 4px; text-align: center; } .menu-toggle { position: fixed; top: 10px; left: 10px; z-index: 1002; cursor: pointer; } .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; } .hamburger span { display: block; height: 3px; background-color: #333; border-radius: 2px; } .user-icon { cursor: pointer; margin-left: 10px; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1003; } .modal-content { background: white; padding: 20px; border-radius: 10px; display: flex; flex-direction: row; align-items: center; max-width: 700px; width: 90%; justify-content: space-between; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; color: rgb(255, 255, 255); background-color: #ff0000; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; z-index: 1103; transition: background-color 0.3s ease; } .close-btn:hover { background-color: #fc0404; } .login-container, .register-container { position: relative; display: flex; flex-direction: row; width: 100%; padding: 10px; justify-content: space-between; } .form-container { background-color: white; padding: 2rem 4rem; border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); max-width: 500px; width: 100%; } .form-container h1 { text-align: center; margin-bottom: 1.5rem; color: #2c3e50; } .form-group { flex: 1 1 45%; display: flex; flex-direction: column; } .botones { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5rem; } .form-group label { font-weight: 600; margin-bottom: 8px; font-size: 15px; color: #333; } .form-group input[type="text"], .form-group input[type="date"], .form-group input[type="time"] { padding: 12px; font-size: 15px; border: 1px solid #ccc; border-radius: 8px; outline: none; background-color: #fff; } .button-container { display: flex; margin-top: 30px; gap: 42rem; } .cancel-btn, .publish-btn { padding: 12px 26px; border: none; border-radius: 10px; font-weight: bold; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; } .cancel-btn { background-color: #e74c3c; color: white; } .cancel-btn:hover { background-color: #c0392b; } .publish-btn { display: block; width: 100%; padding: 0.8rem; font-size: 1rem; background-color: #f5b400; color: white; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 1rem; } .publish-btn:hover { background-color: #d99c00; } .publish-btn, .upload-btn { transition: all 0.3s ease, transform 0.1s ease-in-out; } .publish-btn:hover, .upload-btn:hover { transform: scale(1.05); } .publish-btn:active, .upload-btn:active { transform: scale(0.98); } .login-box { flex: 1; border-right: 2px solid #ccc; padding-right: 30px; width: 50%; padding: 30px; text-align: center; } .register-box { flex: 1; padding-right: 30px; width: 50%; padding: 30px; text-align: center; background-color: white; color: black; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; } .welcome-box { flex: 1; border-right: 2px solid #ccc; padding-right: 30px; width: 50%; padding: 30px; text-align: center; } .login-box h2, .register-box h2 { margin-bottom: 25px; font-size: 22px; } .password { display: block; margin-bottom: 15px; } .login-box input, .register-box input { display: block; width: 100%; margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .login-box button, .register-box button { background-color: #F2AF29; color: white; border: none; padding: 12px; cursor: pointer; width: 100%; border-radius: 5px; font-size: 16px; font-weight: bold; } .header-auth { position: absolute; top: 10px; right: 20px; background: #292b2c; color: white; padding: 10px 18px; border-radius: 25px; text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 8px; font-weight: bold; } .header-auth:hover { background: #505152; } .register-box p { margin-bottom: 20px; font-size: 14px; } .texto { margin-bottom: 15px; } .user-profile-card { display: inline-flex; align-items: center; gap: 0.75rem; background: #fff; padding: 0.5rem 1rem; border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-left: auto; } .user-profile-card .user-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .logout-button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; } .tabs button { flex: 1; padding: 0.5rem 0; font-size: 0.9rem; } .temporal-activity { margin-top: 1rem; } .new-game-container { position: relative; max-width: 1000px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 12px; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); border: 3px solid #F2AF29; } .top-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .game-title-input { width: 100%; font-size: 1.8rem; font-weight: bold; color: #333; border: none; outline: none; background-color: transparent; border-bottom: 2px solid #ccc; padding: 10px; text-align: center; } .game-title-input::placeholder { color: #aaa; font-weight: normal; } .new-game-form { display: flex; flex-direction: column; gap: 10px; } .image-field label { font-weight: bold; margin-bottom: 5px; color: #333; } .fields-right { display: flex; flex-wrap: wrap; gap: 20px; flex: 2; } .form-group { display: flex; flex-direction: column; min-width: 200px; flex: 1; } .form-group label { font-weight: bold; margin-bottom: 5px; color: #333; } .form-group input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; } .pawn-rating { display: flex; flex-direction: row; gap: 5px; align-items: center; justify-content: flex-start; margin: 20px 0 10px 0; position: static; text-align: left; } .pawn-rating .pawn { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; display: inline-block; border: none; outline: none; padding: 0; margin: 0; transition: background-image 0.2s; } .pawn-rating input[type="radio"] { display: none; } .profile-page main { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 1rem; gap: 1.5rem; padding: 1rem; } .profile-page .tabs { display: flex; gap: 0.5rem; } .profile-page .tabs button { padding: 0.5rem 1rem; border: none; background: #eee; cursor: pointer; } .profile-page .tabs button.active { background: #ffa500; color: #fff; } .profile-page .tab-content { display: none; width: 70%; margin: 0 auto 1.5rem; } .profile-page .tab-content.active { display: block; } .profile-page .actividad-item { display: flex; align-items: center; background-color: #f9f9f9; padding: 10px; gap: 10px; border-radius: 5px; margin-bottom: 10px; } .profile-page .create-dropdown-container { position: relative; display: inline-block; margin-left: 0.5rem; margin-right: -0.5rem; } .profile-page .create-btn { background: linear-gradient(145deg, #FFA726, #FB8C00); color: #FFFFFF; margin: 0 1.5rem 0 0; padding: 0.6rem 1rem; border: none; border-radius: 6px; font-weight: 600; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transition: box-shadow 0.2s, transform 0.1s, background 0.2s; } .profile-page .create-btn:hover { background: linear-gradient(145deg, #FFB74D, #FFA000); box-shadow: 0 6px 12px rgba(0,0,0,0.2); transform: translateY(-2px); } .profile-page .create-btn:active { background: linear-gradient(145deg, #FB8C00, #EF6C00); box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateY(0); } .profile-page .create-dropdown { display: none; position: absolute; top: calc(100% + 9px); left: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); min-width: 8rem; z-index: 100; } .profile-page .create-dropdown a { display: block; padding: 0.5rem 1rem; text-decoration: none; color: #333; } .profile-page .create-dropdown a:hover { background: #f0f0f0; } .info-usuario { display: flex; align-items: center; gap: 10px; } .usuario { position: absolute; top: 20px; left: 10px; background-color: lightgray; border-radius: 5px; font-weight: bold; } .perfil-container { width: 60%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px; } .perfil-info { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .avatar-small { width: 40px; height: 40px; border-radius: 50%; } .avatar-large { width: 100px; height: 100px; border-radius: 50%; margin-top: 10px; } .tabs { display: flex; justify-content: flex-start; margin: 20px auto; width: 60%; } .tabs button { flex-grow: 1; text-align: center; padding: 10px 15px; background-color: #ddd; border: none; cursor: pointer; border-radius: 5px; } .tabs .active { background-color: #F2AF29; color: white; } .actividad-item img { width: 40px; height: 40px; border-radius: 50%; } .form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; background-color: #fff; cursor: pointer; transition: all 0.3s ease; } .form-group select:hover { border-color: #F2AF29; box-shadow: 0px 4px 6px rgba(242, 175, 41, 0.3); } .form-group select:focus { border-color: #F2AF29; outline: none; box-shadow: 0px 4px 6px rgba(242, 175, 41, 0.5); } .middle-section { display: flex; align-items: flex-start; gap: 50px; flex-wrap: wrap; } .image-field { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; max-width: 220px; } .image-field label { font-weight: bold; margin-bottom: 8px; text-align: center; display: block; } #preview { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 10px; border: 2px solid #ccc; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); margin-top: 10px; } .fields-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; flex: 2; width: 100%; max-width: 800px; align-items: flex-start; } .image-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; z-index: -1; } .image-field label.upload-btn { display: inline-block; background-color: #F2AF29; color: white; padding: 10px 20px; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); } .image-field label.upload-btn:hover { background-color: #e09e24; transform: translateY(-2px); box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); } .image-field label.upload-btn:active { transform: translateY(1px); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); } .user-profile-container { position: relative; display: inline-block; } .user-profile { display: flex; align-items: center; justify-content: space-between; background-color: #F2AF29; color: white; font-weight: bold; padding: 8px 15px; border-radius: 25px; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; text-decoration: none; position: relative; min-width: 180px; max-width: fit-content; height: 45px; } .user-profile:hover { background-color: #e09e24; transform: scale(1.05); } .dropdown-arrow { font-size: 14px; margin-left: 5px; opacity: 0.8; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-right: 12px; border: 2px solid #F2AF29; background-color: #fff; } .user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; flex-grow: 1; } .user-name { font-size: 14px; align-content: center; white-space: nowrap; } .user-level { font-size: 12px; color: #fff; opacity: 0.8; display: flex; align-items: center; } .user-dropdown { display: none; position: absolute; top: 50px; right: 0; background-color: white; width: 180px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 100; } .user-dropdown a { display: flex; align-items: center; padding: 12px; color: #333; text-decoration: none; font-size: 14px; transition: background 0.3s ease; } .user-dropdown a:hover { background-color: #F2AF29; color: white; } .profile-container { width: 60%; background-color: #fff; border: 2px solid #f1c40f; border-radius: 15px; padding: 30px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); text-align: center; display: flex; flex-direction: column; align-items: center; } .top-section { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 2px solid #f1c40f; width: 100%; } .profile-username { font-size: 22px; font-weight: bold; border: none; background: none; color: #333; text-align: center; width: 100%; } .profile-tabs { display: flex; background: #fff9db; padding: 10px; border-radius: 10px; margin-bottom: 10px; } .tab-button { background-color: #fff; color: #333; border: 1px solid #f1c40f; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 14px; margin-right: 5px; } .tab-button.active { background-color: #f1c40f; color: #fff; } .tab-button:hover { background-color: #d4a017; color: #fff; } .tab-content { background-color: #fff; border: 2px solid #f1c40f; padding: 20px; border-radius: 10px; width: 100%; } .watch-btn { text-decoration: none; background-color: #F2AF29; color: white; font-weight: bold; padding: 10px 16px; border-radius: 6px; display: inline-block; transition: background-color 0.3s ease; } .watch-btn:hover { background-color: #e09e24; } nav#perfil-tabs.tabs { display: flex !important; gap: 0.5rem !important; padding: 0.5rem 0 !important; } nav#perfil-tabs.tabs > button { flex: none !important; width: auto !important; min-width: 120px !important; max-width: 150px !important; padding: 0.5rem 1rem !important; font-size: 0.9rem !important; border-radius: 4px !important; background: #f0f0f0 !important; border: none !important; cursor: pointer !important; } nav#perfil-tabs.tabs > button.active { background: #f5a623 !important; color: #fff !important; } .enlace-contrasena { margin-bottom: 20px; text-align: center; } .enlace-contrasena a { color: #007bff; text-decoration: none; font-size: 15px; transition: color 0.3s ease; } .enlace-contrasena a:hover { color: #0056b3; text-decoration: underline; } .btn-entrar { background-color: #f5b400; color: white; border: none; padding: 12px 24px; font-weight: bold; font-size: 16px; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .btn-entrar:hover { background-color: #d99c00; } .edit-icon-btn { background: none; border: none; padding: 0 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #F2AF29; transition: color 0.2s, transform 0.1s; } .edit-icon-btn:hover .edit-icon { color: #e09e24; transform: scale(1.15); } .edit-icon { font-size: 1.3rem; pointer-events: none; } .page-title-moderation { text-align: center; margin: 2rem 0; } .moderation-page { display: inherit; flex-direction: column; align-items: center; } .modal-moderation { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5) !important; z-index: 9999 !important; justify-content: center; align-items: center; } .modal-content-moderation { background: #fff; border-radius: 8px; padding: 1.5rem; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; display: grid; grid-template-columns: 1fr; box-shadow: 0 4px 12px rgba(0,0,0,0.15); position: relative; } .modal-content-moderation .close-btn { font-size: 1.5rem; cursor: pointer; position: absolute; right: 1rem; } .game-title-moderation { margin: 0; font-size: 1.75rem; text-align: center; } .game-image-moderation { width: 100%; height: auto; border-radius: 4px; object-fit: contain; max-height: 250px; } .game-info-box-moderation { display: grid; grid-template-columns: 1fr 2fr; align-items: start; } .game-info-box-moderation p { margin: 0.25rem 0; } .game-info-box-moderation p strong { display: block; } #moderator-comment { width: 100%; resize: vertical; padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; } .button-group-moderation { display: flex; justify-content: space-between; gap: 1rem; } .button-delete, .button-group-moderation button { color: white; border: none; padding: 8px 16px; margin: 10px 0; font-weight: bold; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; } .button-delete:hover, .button-group-moderation button:hover { background-color: #a93226; } .button-group-moderation button[type="submit"] { background-color: #27ae60; color: #fff; } .button-delete, .button-group-moderation button.reject { background-color: #c0392b; color: #fff; } .perfil-datos.perfil-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr min-content; column-gap: 0.5rem; row-gap: 0.5rem; align-items: center; } .perfil-datos.perfil-grid .full-span { grid-column: 1 / -1; } .perfil-datos.perfil-grid .edit-btn { background: none; border: none; padding: 0.25rem; cursor: pointer; line-height: 0; } .perfil-datos.perfil-grid .edit-btn .icon-pencil { font-size: 1.25rem; width: 1rem; height: 1rem; } .perfil-datos.perfil-grid .user-name { font-size: 1.75rem; font-weight: 700; line-height: 1; } .stars { display: flex; gap: 3px; margin-top: 5px; } .star { width: 20px; height: 20px; flex-shrink: 0; } .card-content { padding: 1rem; background-color: #f9fafb; } .card-content h3 { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.5rem; } .card-content .meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .card-content p { font-size: 0.9rem; margin-bottom: 1rem; color: #374151; } .card-content button { background-color: #facc15; border: none; border-radius: 0.375rem; color: #000; font-weight: bold; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.2s; } .card-content button:hover { background-color: #eab308; } .form-container-password { margin-top: 100px; background-color: white; padding: 2rem 4rem; border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); max-width: 500px; width: 100%; } .form-container-password h1 { text-align: center; margin-bottom: 1.5rem; color: #2c3e50; } .formulario-password .form-group { display: flex; flex-direction: column; margin-bottom: 1.2rem; } .formulario-password label { margin-bottom: 0.4rem; font-weight: bold; color: #34495e; } .formulario-password input[type="text"], .formulario-password input[type="password"] { padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } .formulario-password input:focus { border-color: #3498db; outline: none; } .pagination-float { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 1rem 0; background: #f9f9f9; border-top: 1px solid #e0e0e0; font-family: Arial, sans-serif; } .pagination-float a, .pagination-float strong { display: inline-block; padding: 0.5em 0.75em; text-decoration: none; border: 1px solid #ccc; border-radius: 4px; min-width: 2em; text-align: center; } .pagination-float a { color: #333; background: #fff; transition: background 0.2s, border-color 0.2s; } .pagination-float a:hover { background: #e6e6e6; border-color: #bbb; } .pagination-float strong { background: #00b1ff; border-color: #00b1ff; color: #fff; font-weight: normal; } .news-cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: stretch; max-width: 1200px; margin: 0 auto 2rem auto; padding: 0 20px; } .news-card-novedad { display: flex; flex-direction: column; height: 410px; max-width: 500px; min-width: 350px; margin: 0 auto; background: #fff; border: 2px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); text-align: center; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; justify-content: flex-start; padding-top: 24px; } .news-img-novedad { width: 60%; height: 40%; object-fit: cover; border-radius: 10px 10px 0 0; display: block; margin-bottom: 18px; align-self: center; } .news-title-novedad { font-weight: bold; font-size: 1.2rem; display: block; margin: 1rem 0 0.5rem 0; color: #000; } .news-content-novedad { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; } .news-meta-novedad { margin: 0 0 0.5rem 0; color: #888; font-size: 0.9rem; } .read-more-novedad { align-self: flex-end; color: #007bff; text-decoration: underline; font-weight: bold; font-size: 0.95rem; } .read-more-novedad:hover { color: #F2AF29; } .modal-content-moderation { z-index: 10000; } .inicio-header-bg { background: linear-gradient(rgba(33,150,243,0.75), rgba(33,150,243,0.85)), url('imagenes/Banner.webp') center/cover no-repeat; padding: 2rem 0 0; text-align: center; max-height: 200px; color: #fff; border-bottom: 4px solid #F2AF29; position: relative; } .login-btn { position: absolute; top: 24px; right: 40px; background-color: #F2AF29; color: white; font-weight: bold; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; z-index: 10; } .login-btn:hover { background-color: #e09e24; transform: translateY(-2px); } .inicio-header-bg .logo-inicio { font-size: 4rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 0.5rem; display: flex; flex-direction: column; align-items: center; color: #F5F5F5; margin-top: -20px; text-shadow: 0 2px 4px rgba(13, 71, 161, 0.8), 0 0 6px rgba(13, 71, 161, 0.5); } .logo-inicio-img { width: 70px; height: auto; margin-bottom: 0.5rem; } .inicio-nav-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1rem 0 0.5rem 0; } .inicio-nav-btn { background: #F2AF29; color: #fff; font-weight: bold; border: none; border-radius: 8px; padding: 0.7rem 1.5rem; font-size: 1.1rem; margin: 0.2rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: background 0.2s, transform 0.1s; text-decoration: none; letter-spacing: 1px; } .inicio-nav-btn:hover { background: #e09e24; transform: translateY(-2px) scale(1.04); color: #fff; } .main, .inicio-main { max-width: 1100px; margin: 1.5rem auto 2.5rem auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.07); padding: 1.5rem 1.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: start; } .inicio-img-col { flex: 1 1 350px; min-width: 320px; display: flex; flex-direction: column; align-items: center; } .inicio-img-col .inicio-img-juegos { width: 100%; max-width: 420px; border-radius: 12px; box-shadow: 0 4px 16px rgba(33,150,243,0.13); } .inicio-img-col .inicio-img-title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; font-size: 2.2rem; font-weight: bold; color: #fff; text-shadow: 2px 2px 8px #000, 0 0 4px #2196f3; pointer-events: none; } .inicio-img-stack { position: relative; width: 100%; max-width: 420px; } .inicio-text-col { margin-top: 0px; flex: 2 1 400px; min-width: 320px; display: flex; flex-direction: column; justify-content: center; } .inicio-text-col h1 { color: #2196f3; font-size: 2rem; font-weight: bold; margin-bottom: 1rem; } .inicio-text-col p { color: #333; font-size: 1.1rem; margin-bottom: 0.7rem; line-height: 1.7; } @media (max-width: 900px) { .main, .inicio-main { flex-direction: column; gap: 1.5rem; padding: 1.5rem 0.5rem; } .inicio-img-col, .inicio-text-col { min-width: 0; } } .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 40px; max-width: 1200px; margin: 20px auto; padding: 0 20px; justify-items: center; box-sizing: border-box; } .card { width: 200px; height: 300px; background: #fff; border: 2px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; flex-direction: column; text-align: center; overflow: hidden; transition: transform .2s, box-shadow .2s; } .card:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.25); } .card img { max-width: 100%; max-height: 70%; object-fit: contain; margin: auto; display: block; } .card span { font-weight: bold; color: #000; } .card a { margin-top: auto; margin-bottom: 1rem; color: #FFF; font-weight: bold; text-decoration: none; } .card a:hover { text-decoration: underline; } main { margin-left: auto; display: flex; justify-content: center; align-items: flex-start; padding-top: 0; padding-bottom: 20px; background-color:#d0e7ff; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #d0e7ff; margin: 0; padding: 0; } .search-bar { width: auto; height: 80px; display: flex; align-items: center; justify-content: center; position: initial; z-index: 1000; } .search-container { flex: 1; display: flex; justify-content: center; align-items: center; } .search-container input[type="text"] { width: 100%; min-width: 400px; padding: 6px; border: 1px solid #ccc; border-radius: 20px; } .search-form { position: relative; width: 100%; max-width: 420px; } .search-form input { font-size: 1rem; color: var(--text-input); background: var(--bg-input); outline: none; transition: box-shadow 0.3s, background 0.3s; } .search-form input:focus { background: #fff; box-shadow: 0 0 0 3px var(--accent-light); } .search-form button { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); transition: transform 0.2s; } .search-form button:hover { transform: translateY(-50%) scale(1.1); } .search-form button:active { transform: translateY(-50%) scale(0.95); } .search-form input::placeholder { color: var(--placeholder); font-style: italic; } .ordenar-menu, .ordenar-menu-novedades-reg { display: none; position: absolute; top: 100%; margin-top: 8px; flex-direction: column; background-color: white; border: 2px solid #F2AF29; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); overflow: hidden; min-width: 200px; z-index: 1000; } .ordenar-menu-novedades-reg { right: 0; left: auto; } .ordenar-menu button, .ordenar-menu-novedades-reg button, .ordenar-menu a, .ordenar-menu-novedades-reg a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; text-decoration: none; color: #333; background: white; border: none; font-size: 14px; font-weight: bold; cursor: pointer; transition: background 0.2s; } .ordenar-menu button:hover, .ordenar-menu-novedades-reg button:hover, .ordenar-menu a:hover, .ordenar-menu-novedades-reg a:hover { background-color: #fce8b2; } #ordenar-toggle, #login-btn { background-color: #F2AF29; color: white; height: 34px; font-weight: bold; border: none; padding: 0 20px; border-radius: 20px; cursor: pointer; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; } #ordenar-toggle:hover, #login-btn:hover { background-color: #e09e24; transform: translateY(-2px); } .juego-link { color: inherit; text-decoration: none; cursor: pointer; display: inline-block; transition: color 0.3s ease; } .juego-link:hover { color: #e60023; animation: shake 0.3s infinite; } .logo-auth { display: block; margin: 0 auto 0; border-radius: 4px; width: 100px; } @-webkit-keyframes shake { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 40% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 60% { transform: translate(0.5px, 0.5px) rotate(0deg); } 80% { transform: translate(0.5px, -0.5px) rotate(0.5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @media (prefers-color-scheme: light) { :root { --bg: #f6f9fe; --text: #1f2937; --muted: #495067; --primary: #f4b43c; --primary-contrast: #ffffff; --card: #ffffff; --border: #e6e7ef; --shadow: 0 10px 24px rgba(17, 24, 39, 0.08); } } @media (max-width: 900px) { .about-container .cta .contact-line { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .about-container .cta .contact-line .btn { margin: 0; min-height: 44px; padding: 12px 16px; } } @media (max-width: 420px) { .about-container .cta .contact-line .btn { flex: 1 1 100%; } } .about-container { max-width: 97vw; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; } .about-container, .about-container * { box-sizing: border-box; } .about-container { --content-w: min(1100px, 92vw); margin: 0 auto; width: var(--content-w); padding: clamp(16px, 2vw, 28px) 0; color: var(--text); } .about-container a { text-decoration: none; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: clamp(28px, 4vw, 40px); } h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 28px; } h3 { font-size: clamp(18px, 2.4vw, 22px); } p { color: var(--text); opacity: 0.95; margin: 0 0 14px; } ul { padding-left: 18px; } ul li { margin: 6px 0; } .about-hero { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: center; background: linear-gradient(180deg, rgba(31,127,209,0.10), transparent 45%), var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 2.5vw, 28px); box-shadow: var(--shadow); margin-bottom: 26px; } .about-hero__logo img { width: 120px; height: 120px; border-radius: 20%; object-fit: cover; display: block; border: 1px solid var(--border); box-shadow: 0 8px 18px rgba(17,24,39,0.07); } .about-hero__greeting, .about-hero__cta { margin-top: 8px; font-weight: 600; } .link-cta { padding-bottom: 2px; border-bottom: 2px solid var(--primary); color: var(--primary) !important; } .story-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2.2vw, 24px); box-shadow: var(--shadow); margin-bottom: 26px; } .story-section p { text-wrap: pretty; line-height: 1.65; } .founders { display: grid; gap: 16px; margin-bottom: 26px; } .founder-card { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(14px, 2vw, 20px); box-shadow: var(--shadow); } .founder-card img { width: 140px; height: 140px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); } .founder-card__body p { margin-bottom: 12px; } .founder-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .founder-badges li { background: linear-gradient(0deg, rgba(244,180,60,0.16), rgba(244,180,60,0.16)); border: 1px dashed var(--border); color: var(--text); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; } .values { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2.2vw, 24px); box-shadow: var(--shadow); margin-bottom: 26px; } .values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 10px 0 0; } .values-list li::marker { color: var(--primary); } .timeline { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2.2vw, 24px); box-shadow: var(--shadow); margin-bottom: 26px; } .timeline-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 18px; position: relative; border-left: 2px solid var(--border); } .timeline-list li { position: relative; padding: 8px 0 8px 12px; } .timeline__dot { position: absolute; left: -10px; top: 14px; width: 12px; height: 12px; background: var(--primary); border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 0 0 3px rgba(244,180,60,0.25); } .cta { text-align: center; background: linear-gradient(180deg, rgba(31,127,209,0.08), transparent 60%), var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 2.8vw, 28px); box-shadow: var(--shadow); margin-bottom: 20px; } .cta__actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .btn { --btn-bg: transparent; --btn-text: var(--text); --btn-border: var(--border); appearance: none; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text); padding: 10px 14px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; justify-content: center; line-height: 1; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid rgba(31,127,209,0.5); outline-offset: 2px; } .btn--primary { --btn-bg: var(--primary); --btn-text: var(--primary-contrast); --btn-border: transparent; box-shadow: 0 8px 20px rgba(244,180,60,0.35); } .btn--primary:hover { box-shadow: 0 10px 26px rgba(244,180,60,0.45); } .btn--ghost { --btn-bg: #3792cb; --btn-text: var(--text); --btn-border: var(--border); } .footnote { opacity: 0.85; font-size: 14px; text-align: center; margin-top: 10px; } @media (max-width: 920px) { .about-hero { grid-template-columns: 110px 1fr; } .founder-card { grid-template-columns: 110px 1fr; } .values-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { .about-hero { grid-template-columns: 1fr; text-align: center; } .about-hero__logo img { margin: 0 auto; } .founder-card { grid-template-columns: 1fr; text-align: left; } .founder-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; } .timeline-list { padding-left: 12px; } } .news-section { max-width: 1200px; padding: 20px 20px; } .news-title { font-size: 2.8rem; color: #F2AF29; text-align: center; margin-bottom: 20px; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .news-card { display: flex; flex-direction: column; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; } .news-card:hover { transform: translateY(-5px); } .news-img { width: 100%; height: 200px; object-fit: contain; background-color: #fff; } .news-image img { max-height: 100%; object-fit: contain; } .news-content { padding: 20px; } .news-heading { font-size: 1.5rem; color: #333; margin-bottom: 10px; text-align: center; } .news-meta { font-size: 0.9rem; color: #999; margin-bottom: 15px; text-align: center; } .news-text { color: #555; font-size: 1rem; margin-bottom: 20px; text-align: justify; } .game-details-container { max-width: 850px; margin: 20px auto; padding: 20px 20px 10px 30px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative; } .game-title { text-align: left; font-size: 2.5rem; color: #2c3e50; } .game-main-info { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 30px; } .game-image { width: 300px; height: 351px; object-fit: contain; object-position: center; background: #fff; border: 2px solid #ddd; border-radius: 8px; flex-shrink: 0; } .game-info-box { flex: 1; min-width: 300px; background-color: #f7f7f7; border: 1px solid #e1e1e1; border-radius: 8px; padding: 20px; line-height: 1.6; } .game-info-box p { margin: 10px 0; color: #34495e; } .game-hooks, .game-description { margin-bottom: 20px; } .game-hooks h2, .game-description h2 { margin-bottom: 15px; color: #2c3e50; border-bottom: 2px solid #ecf0f1; padding-bottom: 5px; } .game-hooks-list, .game-description p { font-size: 1.1rem; color: #555; text-align: justify; } .game-reviews { position: relative; } .game-reviews h2 { margin-bottom: 15px; color: #2c3e50; } .review-textarea { width: 100%; height: 100px; padding: 12px 50px 12px 12px; border: 1px solid #ccc; border-radius: 8px; resize: vertical; font-family: inherit; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); transition: border-color 0.2s ease; } .review-textarea:focus { border-color: #10A37F; outline: none; } .reviews-list { margin-top: 30px; } .review-item { background-color: #fafafa; border: 1px solid #ddd; border-radius: 5px; padding: 12px 15px; margin-bottom: 12px; } .review-item strong { color: #333; } .review-flex { display: flex; align-items: flex-start; gap: 10px; } .review-time { color: #888; min-width: 55px; font-size: 0.95em; text-align: right; margin-top: 2px; } .filters-panel{ position:absolute; left:20px; top:197px; width:320px; max-width:92vw; max-height:calc(100vh - 221px - 44px); overflow:auto; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.06); padding-left: 18px; padding-right: 18px; padding-bottom: 18px; color:#1f2937; } .filters-header{ position:sticky; top:0; z-index:1; background:#fff; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top: 18px; } .filters-title{ margin:0; font:700 1.1rem/1 system-ui,sans-serif; letter-spacing:.2px; } .filters-header-actions{ display:flex; align-items:center; gap:8px; } .filters-clear{ appearance:none; background:transparent; border:1px solid transparent; color:#6b7280; font-weight:600; font-size:.95rem; text-decoration:underline; cursor:pointer; padding:6px 8px; border-radius:8px; } .filters-clear:hover{ color:#374151; } .filters-panel nav > ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .filters-panel nav > ul > li{ border:1px solid #e5e7eb; border-radius:12px; background:#fff; } details{ padding:6px; } summary{ cursor:pointer; list-style:none; user-select:none; padding:8px 10px; border-radius:10px; display:flex; align-items:center; gap:6px; font-weight:600; } summary::-webkit-details-marker{ display:none; } summary .icon{ margin-left:auto; font-size:.85em; transition:transform .18s ease; } details[open] summary .icon{ transform:rotate(180deg); } details > ul, details > div{ margin:6px 4px 8px; padding:8px 8px 2px; border-top:1px dashed #d1d5db; } details > ul{ list-style:none; display:grid; gap:6px; } details > ul > li{ display:flex; align-items:center; gap:8px; } input[type="checkbox"]{ width:18px; height:18px; accent-color:#4f46e5; cursor:pointer; } label{ font-size:.95rem; cursor:pointer; } label[for="dificultad"]{ display:inline-block; margin-bottom:6px; color:#6b7280; } input[type="range"]{ width:100%; height:28px; background:transparent; cursor:pointer; } input[type="range"]::-webkit-slider-runnable-track{ height:8px; background:#e5e7eb; border-radius:999px; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#4f46e5; border:2px solid #fff; margin-top:-6px; transition:box-shadow .15s, transform .05s; } input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgba(79,70,229,.35); } input[type="range"]::-webkit-slider-thumb:active{ transform:scale(1.02); } input[type="range"]::-moz-range-track{ height:8px; background:#e5e7eb; border-radius:999px; } input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#4f46e5; border:2px solid #fff; } input[type="range"]::-moz-range-progress{ height:8px; background:#9aa0f8; border-radius:999px 0 0 999px; } #dif_value{ margin-top:6px; font-size:.85rem; color:#6b7280; font-weight:600; } .filters-actions{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .filters-actions button{ appearance:none; border-radius:10px; padding:10px 12px; font-weight:700; font-size:.95rem; border:1px solid #d1d5db; background:#f9fafb; color:#1f2937; cursor:pointer; transition:background .15s, border-color .15s, transform .02s; } .filters-actions button:hover{ background:#f3f4f6; } .filters-actions button:active{ transform:translateY(1px); } #applyFilters{ background:#4f46e5; color:#fff; border-color:#4f46e5; } #applyFilters:hover{ filter:brightness(.97); } summary:focus-visible, input[type="checkbox"]:focus-visible, button:focus-visible, input[type="range"]:focus-visible{ outline:3px solid rgba(79,70,229,.35); outline-offset:2px; border-radius:8px; } details:hover summary{ background:#f9fafb; } .filters-panel::-webkit-scrollbar{ width:10px; } .filters-panel::-webkit-scrollbar-track{ background:transparent; } .filters-panel::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; border:2px solid #fff; } @media (max-width:1024px){ .filters-panel{ left:auto; right:0; top:221px; bottom:0; width:420px; max-width:92vw; max-height:none; transform:translateX(100%); transition:transform .25s ease; z-index:999; border-left:1px solid #e5e7eb; border-top-left-radius:14px; border-bottom-left-radius:14px; } #filters-toggle:checked + .filters-panel{ transform:translateX(0%); } } .filters-panel.is-collapsed{ width:fit-content; max-width:none; padding:8px 10px; height:auto; overflow:visible; box-shadow:0 6px 18px rgba(0,0,0,.06); } .filters-panel.is-collapsed form, .filters-panel.is-collapsed .filters-clear{ display:none; } .filters-panel.is-collapsed .filters-header{ padding-bottom:0; padding-top:0; margin-bottom:0; border-bottom:0; white-space:nowrap; } .filters-panel.is-collapsed .filters-title{ font-size:1rem; line-height:1; } .filters-panel.is-collapsed .filters-header-actions{ gap:6px; } .filters-fold{ appearance:none; background:#E8F0FF; border:1px solid #9DB8FF; width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#374151; transition: background .15s, border-color .15s; } .filters-fold:hover{ background:#DBE6FF; border-color:#82A4FF; } .filters-panel.is-collapsed .filters-fold{ background:#E8F0FF; border-color:#9DB8FF; } .filters-panel .divider{ border: 0; color: white; } .filters-panel.is-collapsed .divider{ display: none; } .container { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; } .filters-bar { position: sticky; top: 0; z-index: 20; margin: 8px 0 22px; padding: 12px; background: rgba(255,255,255,0.85); border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); backdrop-filter: blur(8px); } .filters-bar form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; } .filters-bar label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: #374151; } .filters-bar select, .filters-bar button { height: 40px; border-radius: 12px; border: 1px solid #d1d5db; background-color: #fff; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); transition: border-color .2s, box-shadow .2s, transform .05s ease; } .filters-bar select { padding: 0 36px 0 12px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><path fill='%236b7280' d='M5.5 7.5l4.5 5 4.5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } .filters-bar select:focus, .filters-bar button:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59,130,246,.25); } .filters-bar button[type="submit"] { padding: 0 18px; font-weight: 700; color: #fff; border: none; background: linear-gradient(135deg, #3b82f6, #06b6d4); box-shadow: 0 8px 16px rgba(59,130,246,.20); cursor: pointer; } .filters-bar button[type="submit"]:hover { filter: brightness(1.05); transform: translateY(-1px); } .filters-bar button[type="submit"]:active { transform: translateY(0); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; } .product-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.06); transition: transform .18s ease, box-shadow .18s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.10); } .product-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #f1f5f9; } .product-name { font-weight: 800; font-size: 1.05rem; padding: 14px 16px 4px; color: #0f172a; } .product-desc { padding: 0 16px 10px; color: #6b7280; font-size: .93rem; } .product-price { margin-top: auto; padding: 0 16px 14px; font-weight: 800; color: #2563eb; font-size: 1.1rem; } .buy-btn { margin: 0 16px 16px; height: 42px; border-radius: 12px; border: none; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-weight: 800; letter-spacing: .2px; cursor: pointer; box-shadow: 0 10px 18px rgba(34,197,94,.25); transition: transform .15s ease, box-shadow .15s ease, filter .2s; } .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(34,197,94,.35); filter: brightness(1.03); } .buy-btn:active { transform: translateY(0); } .buy-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,.40); } .buy-btn:disabled { opacity: .65; cursor: not-allowed; } .products-grid > p { grid-column: 1 / -1; text-align: center; padding: 40px; background: rgba(255,255,255,.9); border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 768px) { .filters-bar { border-radius: 14px; } .filters-bar form { gap: 10px; } .filters-bar label { width: 100%; } .filters-bar select { flex: 1; width: 100%; } } .container a { color: #2563eb; } .container a:hover { text-decoration: underline; } .search-btn{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:999px; transition:background .2s, box-shadow .2s, transform .05s; } .search-btn:hover{ background:#f1f5f9 } .search-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.25) } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } .title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px } .search-head { display: flex; align-items: center; gap: 10px; flex: 1 1 500px; max-width: 600px; } .search-control { position: relative; flex: 1 1 500px; min-width: 250px; max-width: 600px; } .search-control input[type="search"] { width: 100%; height: 44px; border-radius: 12px; border: 1px solid #d1d5db; padding: 0 12px 0 44px; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); font-size: 1.08rem; } .search-control input[type="search"]:focus{ outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.25) } .search-btn{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:999px } .search-btn:hover{ background:#f1f5f9 } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } .filters-form{ width:100%; display:flex; flex-wrap:wrap; gap:12px; align-items:center } .filters-form label{ display:flex; align-items:center; gap:8px; font-weight:600 } .filters-form select{ height:40px; border-radius:12px; border:1px solid #d1d5db; padding:0 36px 0 12px; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><path fill='%236b7280' d='M5.5 7.5l4.5 5 4.5-5z'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px } .filters-form button[type="submit"]{ height:40px; border:none; border-radius:12px; padding:0 18px; font-weight:800; color:#fff; background:linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow:0 8px 16px rgba(59,130,246,.2); cursor:pointer } .filters-form .spacer{ flex:1 1 auto } .sort{ position:relative } .sort-trigger{ height:40px; border:1px solid #d1d5db; border-radius:12px; background:#fff; padding:0 12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer } .sort-trigger .caret{ width:14px; height:14px } .sort-menu{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:240px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.08); padding:6px; display:none; list-style: none; margin: 0; } .sort-menu.open{ display:block } .sort-menu button{ width:100%; text-align:left; border:none; background:transparent; border-radius:10px; padding:10px 12px; cursor:pointer } .sort-menu button:hover{ background:#f3f4f6 } .sort-menu button[aria-selected="true"]{ background:#e5f0ff } @media (max-width: 600px) { .container { padding: 8px 2vw; } .filters-bar form { flex-direction: column; gap: 10px; } .product-card { width: 260px; min-width: 260px; max-width: 260px; height: 370px; min-height: 370px; max-height: 370px; } } @media (max-width: 1100px) { .search-head, .search-control { min-width: 100%; max-width: 100%; flex: 1 1 100%; } } @media (max-width: 700px) { .search-head, .search-control { min-width: 0; max-width: 100%; flex: 1 1 100%; } } .flecha-volver{ position:relative; top:20px; left:16px; z-index:1000; background:#ffffffd9; border:1px solid var(--border); padding:.5rem .8rem; border-radius:999px; backdrop-filter:blur(6px); text-decoration:none; color:#111; font-weight:600; box-shadow:var(--shadow); } .flecha-volver:hover { background: #f0f0f0; transform: scale(1.1); } .delete-btn{ --red:#e53e3e; --red-700:#c53030; appearance:none; border:1px solid #ffd4d4; background: linear-gradient(180deg,#ffffff,#fff6f6); color:var(--red); border-radius:12px; padding:6px 10px; display:contents; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.85); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease; } .delete-btn:hover{ background:#fff0f0; border-color:#ffb9b9; color:var(--red-700); transform:translateY(-1px); box-shadow: 0 6px 14px rgba(229,62,62,.15); } .delete-btn:active{ transform:translateY(0); } .delete-btn:focus-visible{ outline:2px solid #ffe0e0; outline-offset:2px; } .delete-btn svg{ width:20px; height:20px; stroke: currentColor; fill:none; stroke-width:2; } .reviews-list{ display:flex; flex-direction:column; gap:12px; } .review-item{ display:flex; align-items:flex-start; gap:10px; position:relative; padding:10px 10px 10px 10px; border:1px solid #eaeaea; border-radius:12px; background:#fff; } .review-item .review-time{ flex:0 0 auto; color:#64748b; font-size:.92rem; white-space:nowrap; } .review-item > div{ flex:1 1 auto; min-width:0; } .review-item > div > span{ display:inline; overflow-wrap:anywhere; word-break:break-word; white-space:normal; line-height:1.5; } .review-item a{ overflow-wrap:anywhere; word-break:break-word; } .review-item form[action="EliminarComentarioJuego"]{ position:absolute; right:6px; transform:translateY(-50%); } @media (max-width:600px){ .review-item{ padding-right:64px; } } .game-header-flex { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .contadores { display: flex; gap: 20px; } #like-btn, #save-btn { background: none; border: none; cursor: pointer; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } #save-btn { width: 36px; height: 36px; } .profile-hero.dnd-card{ min-width: 260px; position:relative; max-width: 1180px; padding: clamp(22px, 3.8vw, 42px); border-radius:20px; background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--dnd-paper) 0%, var(--dnd-paper-2) 100%); border:1px solid #d8c7a3; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 0 rgba(0,0,0,.03), 0 14px 28px rgba(0,0,0,.09); outline:6px solid rgba(230,218,188,.6); overflow: hidden; } .profile-hero.dnd-card::before{ content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; box-shadow: inset 0 0 54px rgba(0,0,0,.06); } .profile-hero.dnd-card::after, .dnd-seal{ display:none !important; } .dnd-card .perfil-info{ position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap: clamp(16px, 3vw, 36px); align-items:center; } .dnd-card .avatar-large{ width: clamp(108px, 14vw, 148px); height: clamp(108px, 14vw, 148px); object-fit: cover; border-radius:50%; background:#fff; border:3px solid #f1e8d3; box-shadow: 0 0 0 6px var(--dnd-gold-2), 0 0 0 9px var(--dnd-gold), 0 10px 20px rgba(0,0,0,.15); } .dnd-card .avatar-edit-btn{ position:absolute; right:6px; bottom:6px; border:none; background:#fff; color:var(--dnd-brown); border-radius:999px; padding:6px 8px; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; } .dnd-card .avatar-edit-btn:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); } .dnd-card .perfil-datos .user-name{ display:inline-block; color:var(--dnd-ink); font-size: clamp(24px, 3.6vw, 36px); font-weight: 800; text-transform: uppercase; font-variant: small-caps; letter-spacing: .8px; margin-right: 6px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); } .dnd-card .edit-btn{ border:none; background:transparent; cursor:pointer; font-size:20px; color:var(--dnd-brown); } .dnd-card .edit-btn:hover{ transform: scale(1.08); } .dnd-card .perfil-datos .meta{ display:block; color:var(--dnd-muted); margin-top:8px; font-size:15px; } .dnd-card a{ color:#7a5a2b; text-decoration-color: rgba(182,140,69,.45); text-underline-offset: 2px; } .dnd-card a:hover{ text-decoration-color: rgba(182,140,69,.9); } .dnd-card .error-message{ background:#fff7f5; border:1px solid #f4c5c5; color:#7a1f18; border-radius:10px; padding:10px 12px; display:inline-block; box-shadow: inset 0 2px 6px rgba(122,15,26,.06); } .dnd-icons{ position:absolute; inset:0; pointer-events:none; z-index:0; color: #6b533d; opacity: .16; mix-blend-mode: multiply; } .dnd-icons svg{ position:absolute; display:block; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 0 rgba(255,255,255,.25)); } .icon-d20 { width: clamp(56px, 7.5vw, 88px); height: auto; top: 10px; left: 22px; } .icon-dragon{ width: clamp(72px, 9vw, 110px); height: auto; top: 6px; right: 26px; transform: rotate(-6deg); } .icon-meeple{ width: clamp(56px, 7.5vw, 84px); height: auto; bottom: 14px; right: 20px; } .icon-rook { width: clamp(46px, 6vw, 70px); height: auto; top: 50%; right: -6px; transform: translateY(-50%); } .icon-giant { width: clamp(78px, 10vw, 120px); height: auto; bottom: 10px; left: 18px; } @media (max-width: 720px){ .dnd-card .perfil-info{ grid-template-columns:1fr; text-align:center; } .icon-rook{ display:none; } .icon-giant{ left:8px; bottom:6px; } .icon-d20{ left:10px; top:8px; } .icon-dragon{ right:10px; top:8px; } .icon-meeple{ right:10px; bottom:8px; } } @media (prefers-reduced-motion: reduce){ .dnd-card .avatar-edit-btn{ transition:none !important; } } .btn-dnd-secure{ position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-weight: 700; letter-spacing: .2px; color: var(--dnd-brown); text-decoration: none; background: linear-gradient(180deg, #fbf6e7 0%, #efe4c7 100%); border: 1px solid #d8c7a3; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 14px rgba(0,0,0,.08); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .btn-dnd-secure:hover{ transform: translateY(-1px); background: linear-gradient(180deg, #fffaf0 0%, #f3e8cc 100%); border-color: var(--dnd-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px rgba(0,0,0,.12); } .btn-dnd-secure:active{ transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px rgba(0,0,0,.1); } .btn-dnd-secure:focus-visible{ outline: 3px solid var(--dnd-gold); outline-offset: 2px; } .perfil-datos .meta .btn-dnd-secure{ color: var(--dnd-brown); } .btn-dnd-secure .icon-lock{ width: 18px; height: 18px; stroke: currentColor; } @media (prefers-reduced-motion: reduce){ .btn-dnd-secure{ transition: none !important; } } .colecciones-header{ max-width:1180px; margin: 0 auto 10px; display:flex; align-items:center; justify-content:space-between; } .colecciones-title{ color:var(--dnd-ink); font-weight:800; letter-spacing:.3px; } .colecciones-grid{ max-width:1180px; margin: 0 auto 36px; display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .collection-card{ position:relative; overflow:hidden; cursor:pointer; border-radius:16px; background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--dnd-paper) 0%, var(--dnd-paper-2) 100%); border:1px solid #d8c7a3; outline:4px solid rgba(230,218,188,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease; } .collection-card:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 14px 28px rgba(0,0,0,.12); outline-color: rgba(230,218,188,.8); } .collection-cover{ display:block; width:100%; background: #fff; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; border-bottom:1px solid #e2d4b1; filter: saturate(1.02) contrast(1.02); transform: translateZ(0); transition: transform .25s ease; } .collection-card:hover .collection-cover{ transform: scale(1.03); } .collection-body{ position:relative; z-index:2; padding: 12px 14px 8px; color: var(--dnd-ink); } .collection-name{ display:inline-block; font-size:18px; font-weight:800; color: var(--dnd-brown); text-transform: uppercase; font-variant: small-caps; letter-spacing:.4px; text-decoration: none; } .collection-name:hover{ text-decoration: underline; text-decoration-color: rgba(182,140,69,.85); text-underline-offset: 2px; } .collection-meta{ color:var(--dnd-muted); font-size:13.5px; margin-top:4px; } .collection-actions{ position:relative; z-index:3; display:flex; gap:8px; padding: 8px 14px 14px; } @media (max-width:720px){ .colecciones-grid{ gap:14px; } } @media (prefers-reduced-motion: reduce){ .collection-card, .collection-cover{ transition:none !important; } } .collection-card.add-new{ cursor: default; display: block; background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #fbf7ea 0%, #f3ead2 100%); border: 1px dashed #d8c7a3; outline: 4px solid rgba(230,218,188,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.06); transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, outline-color .15s ease, background .15s ease; } .collection-card.add-new:hover{ transform: translateY(-1px); border-color: #ceb684; outline-color: rgba(230,218,188,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 18px rgba(0,0,0,.10); } .add-new-link{ position: relative; display: grid; place-items: center; gap: 8px; text-decoration: none; color: var(--dnd-brown); padding: 26px 14px; min-height: 180px; } .add-new-link:focus-visible{ outline: 4px solid var(--dnd-gold); outline-offset: 2px; border-radius: 12px; } .add-new-link .icon-plus{ width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: .9; } .add-new-title{ font-weight: 800; letter-spacing: .3px; text-transform: uppercase; font-variant: small-caps; } .add-new-sub{ font-size: 13px; color: var(--dnd-muted); } @media (max-width:720px){ .add-new-link{ min-height: 150px; padding: 22px 12px; } } .colecciones-header .btn-primary{ display:none !important; } .brand svg { width: 1rem; height: 1rem; fill: #f66; } .brand{ display: flex; gap:10px; } .toolbar{ position:sticky; top:0; z-index:30; margin:20px auto 18px; max-width: fit-content; border-radius:16px; border:1px solid #e9edf3; background:linear-gradient(180deg,#ffffffcc,#ffffffbf); backdrop-filter:blur(6px); box-shadow:0 8px 22px rgba(15,23,42,.06) } .toolbar-inner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px } .control{ height:44px; border-radius:12px; border:1px solid #d8dee8; background:#fff; transition:border-color .2s,box-shadow .2s,background .2s } .control:focus-within{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.22) } .search-wrap{ position:relative; flex:1 1 320px; max-width: fit-content; min-width:295px; display:flex; align-items:center; background:#fff } .search-input{ flex:1 1 auto; height:100%; border:none; outline:none; padding:0 12px 0 44px; border-radius:12px; color:#0f172a } .search-input::placeholder{ color:#94a3b8 } .search-btn{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; background:transparent; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; cursor:pointer } .search-btn:hover{ background:#f1f5f9 } .sep{ width:1px; height:28px; background:#eaeef3; border-radius:1px } .sort{ position:relative } .sort-trigger{ position:relative; height:44px; border:1px solid #d8dee8; border-radius:12px; background:#fff; padding:0 40px 0 44px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; } .sort-trigger:focus{ outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.22) } .sort-trigger:before{ content:""; position:absolute; left:14px; width:18px; height:18px; background:no-repeat center/18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236b7280' d='M8 4h2v12h2l-3 4-3-4h2zM16 20h-2V8h-2l3-4 3 4h-2z'/></svg>"); } .sort-trigger .caret{ width:14px; height:14px; margin-left:6px } .sort-trigger strong{ font-weight:800 } .pretty-menu{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:260px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.08); padding:6px; display:none; } .pretty-menu.open{ display:block } .pretty-menu li{ list-style:none } .pretty-menu button{ width:100%; text-align:left; border:none; background:transparent; border-radius:10px; padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; } .pretty-menu button:hover{ background:#f3f4f6 } .pretty-menu button[aria-selected="true"]{ background:#e5f0ff } @media (max-width:720px){ .sep{ display:none } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important } } .cta-price{ --ring: rgba(0,0,0,.12); --glow: rgba(59,130,246,.45); display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700; letter-spacing:.2px; background: linear-gradient(135deg,#3b82f6 0%, #06b6d4 100%); color:#fff; box-shadow: 0 6px 18px var(--glow), 0 1px 0 var(--ring) inset; position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; } .cta-price:hover{ transform: translateY(-1px) scale(1.015); filter: saturate(1.05) brightness(1.02); box-shadow: 0 10px 24px var(--glow); } .cta-price:active{ transform: translateY(0) scale(0.995); } .cta-price:focus-visible{ outline:none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(59,130,246,.55), 0 10px 24px var(--glow); } .cta-price::after{ content:""; position:absolute; top:0; left:-120%; width:45%; height:100%; background: linear-gradient( 115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.50) 50%, rgba(255,255,255,0) 100% ); transform: skewX(-20deg); animation: shine 2.8s ease-in-out infinite; } .cta-price::before{ content:""; position:absolute; inset:-20%; background: radial-gradient(60% 60% at 50% 50%, rgba(6,182,212,.22), transparent 60% ); opacity:.12; animation: pulse 2.6s ease-in-out infinite; } .cta-price .arrow{ display:inline-block; transform: translateX(0); transition: transform .18s ease; } .cta-price:hover .arrow{ transform: translateX(3px); } @keyframes shine{ 0%{ left:-120%; } 60%,100%{ left:140%; } } @keyframes pulse{ 0%,100%{ opacity:.12; } 50%{ opacity:.22; } } @media (max-width:768px){ .cta-price{ justify-content:center; } } @media (prefers-reduced-motion: reduce){ .cta-price, .cta-price::before, .cta-price::after{ animation: none !important; transition:none !important; } } .game-action-buttons{ display:flex; justify-content:flex-end; gap:12px; margin-top: -40px; align-items: center; } .action-btn{ display:flex; flex-direction:column; align-items:center; position:relative; } .action-anchor{ position:absolute; top:calc(100% + 8px); width:160px; height:32px; opacity:0; pointer-events:none; border:0; padding:0; } .collection-card.add-new { position: relative; } .collection-card.add-new #formNuevaColeccion.collection-body{ display: flex; flex-direction: column; padding: 16px 16px 62px; box-sizing: border-box; } .collection-card.add-new #formNuevaColeccion .form-row{ display: flex; flex-direction: column; gap: 6px; } .collection-card.add-new #formNuevaColeccion .form-label{ font-weight: 600; font-size: .95rem; color: var(--ba-ink, #2b2b2b); } .collection-card.add-new #formNuevaColeccion .input-text{ width: 100%; padding: 5px 12px; font-size: .95rem; border-radius: 12px; border: 1.5px solid rgba(0,0,0,.12); background: linear-gradient(180deg, #fff, #fafafa); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.06); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } .collection-card.add-new #formNuevaColeccion .input-text:focus{ border-color: var(--ba-accent, #6C63FF); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ba-accent, #6C63FF) 25%, transparent); background: #fff; } .collection-card.add-new #formNuevaColeccion textarea.input-text{ resize: vertical; } .collection-card.add-new #formNuevaColeccion .form-actions{ position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0 !important; } .collection-card.add-new #formNuevaColeccion .btn-primary{ justify-self: start; min-width: 80px; padding: 10px 14px; border-radius: 12px; border: 0; background: var(--ba-accent, #6C63FF); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; } .collection-card.add-new #formNuevaColeccion .btn-primary:hover{ filter: brightness(1.05); } .collection-card.add-new #formNuevaColeccion .btn-secondary{ justify-self: end; padding: 10px 14px; border-radius: 12px; background: transparent; color: var(--ba-accent, #6C63FF); border: 1.5px solid var(--ba-accent, #6C63FF); box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: pointer; } .collection-card.add-new #formNuevaColeccion .btn-secondary:hover{ background: rgba(108,99,255,.06); } .collection-card.add-new #formNuevaColeccion .input-text::placeholder{ color: color-mix(in srgb, #000 40%, transparent); opacity: .7; } #formNuevaColeccion[hidden] { display: none !important; visibility: hidden; } #cardNuevaColeccion.is-open #formNuevaColeccion.collection-body{ display: flex; } #cardNuevaColeccion.is-open .add-new-link { display: none !important; } .save-menu { position: fixed; top: 0; left: 0; display: none; min-width: 240px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.1); padding: 8px; z-index: 1000; } .save-menu.visible { display: block; } .save-menu-title { font-weight: 600; font-size: 14px; padding: 6px 8px 8px; color: #333; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; } #save-menu-list { list-style: none; margin: 0; padding: 0; } .save-menu-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #222; } .save-menu-item:hover { background: #f6f6f6; } .save-menu-empty { padding: 10px; color: #777; font-size: 14px; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .2s ease-in-out; z-index: 1100; font-size: 14px; } .toast.show { opacity: 1; } .char-counter{ display:block; margin-top:4px; font-size:12px; color:#666; } .input-text.is-invalid{ border-color:#e74c3c; box-shadow:0 0 0 2px rgba(231,76,60,.15); } .error-hint{ color:#e74c3c; font-size:12px; margin-top:4px; display:none } .error-hint.show{ display:block } .entry-sheet{ display: block; max-width:1060px; margin:0 auto 42px; background:var(--sheet); border-radius:22px; box-shadow:0 14px 28px var(--shadow-soft); padding:16px 14px 22px; } .title-card{ position: relative; padding: 22px 22px 28px; border-radius: 16px; background:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, rgba(0,0,0,.03) 2px 4px),linear-gradient(180deg,#efe0b9 0%, #e3cf9a 100%); border: 1px solid #c7b07b; box-shadow:0 14px 24px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35); } .title-card::before{ content:"EXPEDIENTE"; position:absolute; top:-14px; left:18px; height:28px; min-width:160px; padding:0 14px; display:flex; align-items:center; font:600 12px/1 "Courier New",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#5d4b1f; background:linear-gradient(180deg,#f6e7c1,#ead79e); border:1px solid #c9b27c; border-bottom:none; border-radius:8px 8px 0 0; box-shadow:0 6px 0 -4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); } .title-card::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:8px; border-bottom-left-radius:16px; border-bottom-right-radius:16px; background:repeating-linear-gradient(135deg,#ffd400 0 12px,#151515 12px 24px); opacity:.85; box-shadow:0 2px 6px rgba(0,0,0,.18); } .entry-title{ position:relative; margin:0; padding:10px 6px 6px; font-family:"Cinzel",serif; font-size:clamp(2rem,4vw,3.1rem); line-height:1.08; letter-spacing:.02em; color:#1f272d; text-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 10px rgba(0,0,0,.06); border-bottom:2px solid rgba(93,75,31,.25); } .entry-title::after{ content:"CONFIDENCIAL"; position:absolute; right:10px; top:-8px; padding:4px 10px; font:700 12px/1 "Courier New",ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; color:#b33434; border:2px solid #b33434; border-radius:4px; transform:rotate(-8deg); opacity:.78; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); } .cover{ margin-top:16px; border-radius:16px; overflow:hidden; background:#fff; border:1px solid #d8e3f0; box-shadow:0 12px 24px var(--shadow-soft); } .cover img{ display:block; width:100%; height:420px; object-fit:cover; filter:saturate(.98) contrast(1.02); } .parchment{ margin-top:14px; border-radius:18px; box-shadow:0 10px 22px rgba(0,0,0,.10); background:linear-gradient(180deg,#fff8e6,#f4e0b6 65%,#ecd292); border:1px solid #dbc48a; } .parchment-inner{ padding:18px 22px 22px; } .divider{ --line:#ceb880; text-align:center; position:relative; margin:.2rem 0 .9rem; } .divider::before,.divider::after{ content:""; position:absolute; top:50%; width:38%; border-top:1.5px solid var(--line); transform:translateY(-50%); } .divider::before{ left:0; } .divider::after{ right:0; } .divider span{ display:inline-block; padding:.12rem .6rem; border-radius:999px; background:linear-gradient(180deg,#fff6d7,#f1dea6); border:1px solid #d6bf86; font-family:"Cinzel",serif; color:var(--brass-dark); letter-spacing:.3px; } .intro { color:var(--ink-soft); line-height:1.7; font-size:1.04rem; margin:.35rem 0; } .section h2{ font-family:"Cinzel",serif; color:#6a4b1b; font-size:clamp(1.15rem,2.2vw,1.55rem); margin:.75rem 0 .35rem; display:inline-block; vertical-align:middle; } .section p{ color:var(--ink-soft); line-height:1.7; font-size:1.04rem; margin:.35rem 0; } .intro{ margin:.4rem 0 1rem; } .final-text{ margin-top:.8rem; } .preview-block{ margin:.55rem 0 1rem; } .frame{ background:linear-gradient(180deg,#f2d49f,#d5ae6a); padding:6px; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; } .embed-16x9{ position:relative; width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; box-shadow:0 8px 16px rgba(0,0,0,.12); } .embed-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .meta-foot{ margin-top:.9rem; font-size:.92rem; color:#5c4a25; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; opacity:.95; } .meta-foot strong{ color:#4e3c1b; } .clip-num{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-right:.6rem; vertical-align:middle; padding:.28rem .56rem; border-radius:6px; font-size:1.28rem; font-weight:900; line-height:1; letter-spacing:.02em; color:#111; border:1.8px solid #1c1c1c; box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); transform:rotate(-2deg); overflow:hidden; user-select:none; text-shadow:0 1px 0 rgba(255,255,255,.35); } .clip-num::before{ content:""; position:absolute; inset:-6px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 2px, rgba(255,255,255,.03) 2px 4px), radial-gradient(12px 12px at 20% 30%, rgba(0,0,0,.05) 20%, transparent 22%) repeat; mix-blend-mode:multiply; opacity:.45; pointer-events:none; } .clip-num::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.08)); pointer-events:none; } .clip-10{ font-family:"Courier New", monospace; color:#1b1409; background: linear-gradient(180deg,#e3c39c,#cfaa7e); border-style:dashed; border-color:#2b2216; transform:rotate(-4deg); } .clip-9{ font-family:"Times New Roman", serif; color:#0f0f0f; background: repeating-linear-gradient(0deg,#f5f5f5 0 6px,#ececec 6px 12px); border-style:dotted; border-color:#333; transform:rotate(2deg); } .clip-8{ font-family:"Arial Black", Arial, sans-serif; color:#ffffff; background: linear-gradient(180deg,#f06ea6,#e05290); border-color:#1a1a1a; text-shadow:0 1px 0 rgba(0,0,0,.35); transform:rotate(-1deg) skewX(-2deg); } .clip-7{ font-family:Georgia, serif; color:#fff; background: linear-gradient(180deg,#2b2b2b,#0f0f10); border-color:#0a0a0a; text-shadow:none; } .clip-6{ font-family:"Lucida Console","Courier New",monospace; color:#1d1a06; background: linear-gradient(180deg,#f3d267,#e1b72c); border-color:#1e1e1e; transform:rotate(4deg); } .clip-5{ font-family:"Trebuchet MS", sans-serif; color:#10220f; background: linear-gradient(180deg,#d7f0df,#bce3cb); border-color:#182b1a; transform:rotate(-3deg); } .clip-4{ font-family:Garamond, serif; color:#222; background: linear-gradient(180deg,#efe6fb,#dbc9f3); border-style:double; border-color:#2a2149; } .clip-3{ font-family:Verdana, sans-serif; color:#ffffff; background: linear-gradient(180deg,#4267b2,#2d4c88); border-color:#1a2c53; text-shadow:0 1px 0 rgba(0,0,0,.4); transform:rotate(3deg) skewX(1deg); } .clip-2{ font-family:Impact,"Arial Black",sans-serif; color:#101010; background: linear-gradient(180deg,#fffbef,#f1ead4); border:2px solid #1f1f1f; } .clip-1{ font-family:"Courier New", monospace; color:#ffffff; background: linear-gradient(180deg,#b31217,#8c0f13); border-color:#250507; text-shadow:0 1px 0 rgba(0,0,0,.5); transform:rotate(-5deg); } @media (max-width:760px){ .entry-sheet{ padding:14px 12px 20px; } .cover img{ height:280px; } .clip-num{ font-size:1.15rem; } } .frame{ position:relative; } .cta-aff{ position:absolute; right:10px; bottom:10px; z-index:2; padding:10px 14px; border-radius:12px; } .frame img{ display:block; width:auto; height:auto; max-width:100%; max-height:min(72vh, 680px); object-fit:contain; border-radius:6px; } .preview-block img{ max-width:100%; height:auto; object-fit:contain; } @media (max-width:760px){ .cta-aff{ padding:9px 12px; font-size:.95rem; } } .entries-cards-container{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap: 22px; align-items: center; padding: 8px 12px 24px; } @media (max-width: 860px){ .entries-cards-container{ grid-template-columns:1fr; } } .news-card-novedad{ position:relative; cursor:pointer; height:100%; display:flex; flex-direction:column; background: linear-gradient(180deg, var(--paper), var(--paper-warm)); border:1px solid #e6e6e6; border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; isolation:isolate; } .news-card-novedad::before, .news-card-novedad::after{ content:""; position:absolute; left:14px; right:14px; height:2px; background:linear-gradient(90deg, #caa751, #f1d28b, #caa751); opacity:.7; pointer-events:none; } .news-card-novedad::before{ top:12px; border-radius:2px; } .news-card-novedad::after{ bottom:12px; border-radius:2px; } .news-card-novedad:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color:#d8e5ff; } .news-img-novedad{ display:block; width: calc(100% - 36px); margin: 14px 18px 0; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; filter:saturate(.98) contrast(1.02); transition: transform .25s ease; } .news-content-novedad{ padding: 14px 16px 18px; display:flex; flex-direction:column; gap:.55rem; } .news-title-novedad{ display:block; font-family: "Cinzel", serif; font-weight:700; font-size: clamp(1.1rem, 1.25vw, 1.35rem); line-height:1.2; color:#0f2d57; padding: 10px 16px 0; text-decoration:none; } .news-meta-novedad{ margin-top:.15rem; color: var(--ink-soft); font-size:.95rem; } .news-text-novedad{ color: var(--ink); font-size:.98rem; line-height:1.6; padding: 5px; display: contents; } .read-more-novedad{ margin-top:auto; font-weight:700; padding:.45rem .8rem; border-radius:999px; background: linear-gradient(180deg, #eaf3ff, #d7e8ff); border:1px solid #b9d1ff; color:#0d3a73; text-decoration:none; box-shadow: 0 2px 6px rgba(31,87,165,.15); transition: filter .15s ease, transform .15s ease; } .read-more-novedad:hover{ filter:brightness(1.03); transform:translateY(-1px); } .news-card-novedad a{ color:inherit; text-decoration:none; } .header-actions{ display:inline-flex; align-items:center; gap:10px; } .backwrap{ max-width:1200px; margin:14px auto 2px; padding:0 2px; } .back-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background: linear-gradient(145deg,var(--parchment) 0%, var(--parchment-2) 100%); color:#0f172a; text-decoration:none; font-weight:700; border:1px solid #e2e8f0; box-shadow:0 6px 16px rgba(2,8,20,.06); transition:transform .15s ease, box-shadow .15s ease, background .15s; position:absolute; left:10px; } .back-btn svg{ width:18px; height:18px } .back-btn:hover{ background:#f8fafc; transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,8,20,.10); } .back-btn:active{ transform:translateY(0); } .collection-hero{ max-width:1200px; margin:8px auto 8px; padding:26px 24px 20px; position:relative; border-radius:16px; border:1px solid var(--parchment-edge); background:linear-gradient(145deg,var(--parchment) 0%, var(--parchment-2) 100%); box-shadow:0 8px 18px rgba(31,41,55,.10), inset 0 0 0 1px rgba(255,255,255,.5); isolation:isolate; } .collection-hero::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(ellipse at 20% 10%, rgba(0,0,0,.02) 0 35%, transparent 40%), radial-gradient(ellipse at 80% 20%, rgba(0,0,0,.02) 0 40%, transparent 45%), repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 2px, rgba(255,255,255,.02) 2px 4px); mix-blend-mode:multiply; pointer-events:none; opacity:.7; } .collection-hero::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:8px; border-top-left-radius:16px; border-top-right-radius:16px; background:radial-gradient(100% 10px at 50% 0, rgba(0,0,0,.09), transparent 70%); pointer-events:none; } .collection-title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0 0 6px; line-height:1.25; color:var(--dnd-ink); font-family:"Cinzel","Georgia",serif; letter-spacing:.2px; text-shadow:none; } .collection-title strong{ font-weight:800; font-size:clamp(26px, 3vw, 36px); } .collection-owner{ font-style:normal; color:#3a2f1f; font-weight:600; font-size:clamp(14px, 1.6vw, 16px); } .badge{ display:inline-flex; align-items:center; justify-content:center; margin-left:10px; padding:4px 8px; min-width:34px; line-height:1; border-radius:999px; font-size:12px; font-weight:800; color:#fff; border:1px solid #7f1d1d; background: radial-gradient(circle at 30% 30%, #fca5a5 0%, #ef4444 55%, #b91c1c 100%); box-shadow:0 2px 0 #7f1d1d, inset 0 1px 2px rgba(255,255,255,.35); } .collection-desc{ margin:0; max-width:70ch; color:#2f2a1f; opacity:1; font-family:"Georgia",serif; font-size:clamp(16px, 1.8vw, 18px); line-height:1.65; letter-spacing:.1px; } .collection-desc::first-letter{ font-size:1.1em; font-weight:600; margin-right:1px; color:var(--dnd-brown); } .coleccion-header{ max-width:1180px; margin:12px auto 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .coleccion-header .colecciones-title{ font-size:28px; margin:0; } .coleccion-meta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px; color:var(--dnd-brown); } .coleccion-count{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:rgba(230,218,188,.35); border:1px solid #d8c7a3; font-weight:800; color:var(--dnd-brown); font-size:12.5px; letter-spacing:.2px; } @media (max-width:720px){ .collection-title strong{ font-size:clamp(22px, 5.2vw, 29px); } .badge{ font-size:11px; padding:3px 7px; min-width:30px; } } .card-remove{ position:absolute; top:8px; right:8px; z-index:3; } .card-remove .remove-btn{ width:36px; height:36px; display:grid; place-items:center; border:2px solid rgba(0,0,0,.85); border-radius:999px; position:relative; background:linear-gradient(180deg,#ef4444 0%, #dc2626 60%, #b91c1c 100%); color:#fff; cursor:pointer; box-shadow: 0 6px 16px rgba(2,8,23,.22), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.25); transition:transform .15s ease, opacity .15s ease, filter .15s ease; opacity:0; transform:translateY(-2px) scale(.96); } .cards-container .card:hover .card-remove .remove-btn{ opacity:1; transform:translateY(0) scale(1); } .card-remove .remove-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); } .card-remove .remove-btn:active{ transform:translateY(0) scale(.98); box-shadow:0 4px 10px rgba(2,8,23,.18), inset 0 -2px 6px rgba(0,0,0,.28); } .card-remove .remove-btn svg{ display:block; } .card-remove .remove-btn .lid{ transform-origin: 28% 35%; transition: transform .18s ease; } .card-remove .remove-btn:hover .lid{ transform: rotate(-16deg) translateY(-1px); } .card-remove .remove-btn::after{ content:"Eliminar"; position:absolute; top:42px; right:0; white-space:nowrap; font: 600 11px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:#1f2937; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:6px 8px; box-shadow:0 8px 18px rgba(2,8,23,.12); opacity:0; transform:translateY(-2px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; } .card-remove .remove-btn:hover::after{ opacity:1; transform:translateY(0); } .delete-collection{ position:absolute; top:10px; right:10px; z-index:5; } .btn-danger{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-weight:800; font-size:14px; border:1.5px solid #7f1d1d; color:#fff; background:linear-gradient(180deg,#ef4444 0%, #dc2626 60%, #b91c1c 100%); box-shadow: 0 6px 16px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.25); cursor:pointer; transition:transform .15s ease, filter .15s ease, box-shadow .15s ease; } .btn-danger:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,8,23,.22), inset 0 -2px 6px rgba(0,0,0,.25); } .btn-danger:active{ transform:translateY(0) scale(.98); } @media (max-width:720px){ .delete-collection{ top:12px; right:12px; } .btn-danger{ padding:9px 12px; font-size:13px; } } .delete-collection .btn-danger{ padding:6px 8px; gap:6px; font-size:12px; font-weight:700; border-radius:10px; background:transparent; color:var(--dnd-brown); border:1px solid #d8c7a3; box-shadow:none; opacity:.8; transform:none; transition:opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .delete-collection .btn-danger:hover{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; opacity:1; transform:none; filter:none; } .delete-collection .btn-danger:active{ transform:none; } .delete-collection .btn-danger svg{ width:14px; height:14px; } .delete-collection .btn-danger:focus-visible{ outline:2px solid #fecaca; outline-offset:2px; } @media (max-width:720px){ .delete-collection .btn-danger{ padding:6px; border-radius:999px; } .delete-collection .btn-danger span{ display:none; } .delete-collection .btn-danger svg{ width:16px; height:16px; } } #confirmDeleteDialog{ border:1px solid var(--parchment-edge); border-radius:16px; padding:0; width:min(420px, 92vw); background:linear-gradient(145deg,var(--parchment) 0%, var(--parchment-2) 100%); box-shadow:0 24px 60px rgba(2,8,20,.30), inset 0 0 0 1px rgba(255,255,255,.5); } #confirmDeleteDialog::backdrop{ background:rgba(15, 23, 42, .45); backdrop-filter: blur(2px); } .cd-wrap{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px; } .cd-icon{ width:46px; height:46px; display:grid; place-items:center; font-size:20px; border-radius:12px; color:#7f1d1d; background:#fef2f2; border:1px solid #fecaca; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .cd-texts h2{ margin:2px 0 6px; font-family:"Cinzel","Georgia",serif; font-size:18px; color:var(--dnd-ink); } .cd-texts p{ margin:0; color:#3a2f1f; line-height:1.45; } .cd-texts .cd-name{ font-weight:800; color:#b91c1c; } .cd-texts .cd-help{ color:#7c6a4f; font-size:13px; } .cd-actions{ grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:12px; } .cd-btn{ appearance:none; border-radius:12px; padding:8px 12px; font-weight:700; font-size:14px; cursor:pointer; border:1px solid #d8c7a3; background:#fff; color:#2b2518; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; } .cd-btn:focus-visible{ outline:2px solid #e6d6a8; outline-offset:2px; } .cd-cancel:hover{ filter:brightness(1.03); } .cd-danger{ border-color:#fecaca; background:#fee2e2; color:#b91c1c; } .cd-danger:hover{ filter:brightness(1.02); box-shadow:0 6px 16px rgba(2,8,23,.15); } @media (max-width:480px){ .cd-wrap{ gap:12px; padding:14px; } .cd-icon{ width:40px; height:40px; font-size:18px; } .cd-btn{ padding:8px 10px; font-size:13px; } } #confirmDeleteDialog{ position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-height: 85vh; overflow: auto; z-index: 1000; } #confirmDeleteDialog[open]{ animation: cd-pop .16s ease-out; } #confirmDeleteDialog::backdrop{ background: rgba(15,23,42,.45); backdrop-filter: blur(2px); } #confirmDeleteDialog::backdrop[open]{ animation: cd-fade .16s ease-out; } @keyframes cd-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 420px){ #confirmDeleteDialog{ top: 47%; } } .site-footer{ margin-top: auto; background: var(--footer-bg); color: var(--footer-fg); border-top: 1px solid var(--footer-border); font-size: 0.95rem; line-height: 1.5; } .footer-inner{ max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-left{ display: flex; align-items: center; gap: 8px; } .footer-left strong{ font-weight: 700; } .dot{ color: var(--footer-muted); } .footer-links{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-link{ color: var(--footer-fg); text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .footer-link:hover{ color: var(--footer-accent); border-bottom-color: var(--footer-accent); } .footer-link:focus-visible{ outline: 2px solid var(--footer-accent); outline-offset: 2px; border-radius: 4px; } .sep{ color: var(--footer-muted); user-select: none; } .footer-right .subtle{ color: var(--footer-muted); font-size: 0.9rem; } @media (max-width: 640px){ .footer-inner{ flex-direction: column; align-items: flex-start; gap: 8px; } .sep{ display: none; } } @media print{ .site-footer{ background: #fff !important; color: #000 !important; border-top: 1px solid #000 !important; } .footer-link{ color: #000 !important; border: 0 !important; } } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) { --legal-txt:#1f2937; --legal-muted:#6b7280; --legal-bd:#e5e7eb; --legal-maxw:960px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-main{ max-width:var(--legal-maxw); margin:24px auto 48px; padding:0 16px; color:var(--legal-txt); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-breadcrumb{ font-size:.9rem; color:var(--legal-muted); margin:16px 0 12px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-breadcrumb a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-breadcrumb a:hover{ border-bottom-color: currentColor; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-card{ background:#fff; border:1px solid var(--legal-bd); border-radius:12px; padding:20px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-title{ font-size: clamp(1.6rem, 2.5vw, 2rem); margin: 4px 0 16px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-h2{ font-size: clamp(1.2rem, 2vw, 1.35rem); margin: 24px 0 8px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) p{ margin:0 0 12px; line-height:1.65; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-list{ margin:8px 0 16px 20px; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-list li{ margin:6px 0; } body:is([data-page="aviso-legal"], [data-page="politica-cookies"], [data-page="politica-privacidad"]) .legal-meta{ color:var(--legal-muted); font-size:.9rem; margin-top:8px; } html, body { height: 100%; } .inicio-main{ flex: 1 0 auto; } @media (max-width: 900px) { .inicio-text-col h1 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; overflow-wrap: anywhere; } .inicio-main { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 12px 16px; width: 100%; max-width: 100%; } .inicio-main > * { min-width: 0; } .inicio-img-col, .inicio-text-col { width: 100%; } .inicio-img-stack { width: 100%; max-width: 480px; margin: 0 auto; } .inicio-img-juegos { display: block; max-width: 100%; height: auto; } .inicio-text-col p { white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.6; margin: 10px 0; } .inicio-text-col .juego-link { display: inline-block; min-height: 44px; padding: 12px 18px; border-radius: 12px; text-align: center; } html, body { max-width: 100%; overflow-x: hidden; } } @media (max-width: 480px) { .inicio-text-col h1 { font-size: 1.35rem; line-height: 1.25; } .inicio-text-col p { font-size: 1rem; } } .contact-line{ gap:25px; } .contact-mail{ color: #1f2937; text-decoration:underline; } .btn{ display:inline-flex; align-items:center; gap:8px; padding:.55rem .9rem; border-radius:9999px; font-weight:700; text-decoration:none; line-height:1; border:1px solid transparent; } .btn--discord{ background:#5865F2; color:#fff; } .btn--discord:hover{ filter:brightness(1.05); transform:translateY(-1px); } .btn--discord:active{ transform:translateY(0); } .btn--discord:focus-visible{ outline:2px solid #1f2937; outline-offset:2px; } .btn--mail{ background:#fff; color:#1f2937; border:1px solid #d1d5db; } .btn--mail:hover{ filter:brightness(1.02); transform:translateY(-1px); } .btn--mail:active{ transform:translateY(0); } .btn--mail:focus-visible{ outline:2px solid #1f2937; outline-offset:2px; } @media (max-width: 900px) { html, body { max-width: 100%; overflow-x: hidden; } } @media (max-width: 900px) { .toolbar { padding: 8px 12px; } .toolbar-inner { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; } .toolbar .sep { display: none !important; } .search-wrap { max-width: none; display: flex; gap: 8px; align-items: center; width: 100%; } .search-wrap .search-input { flex: 1 1 auto; min-width: 0; } .search-wrap .search-btn { flex: 0 0 auto; } .sort { position: relative; width: 100%; } .sort .sort-trigger { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; } .sort .pretty-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 50vh; overflow: auto; z-index: 20; } } @media (max-width: 680px) { .cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 12px; } } @media (max-width: 420px) { .cards-container { grid-template-columns: 1fr; } } @media (max-width: 420px){ .card img{ height: 180px; } } @media (max-width: 900px){ html, body { max-width: 100%; overflow-x: hidden; } } @media (max-width: 900px){ .game-details-container{ padding:12px 16px; } .game-title{ font-size: clamp(1.25rem, 5.5vw, 1.6rem); line-height:1.25; margin: 6px 0 10px; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 900px){ .game-header-flex{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .contadores{ display:flex; flex-wrap:wrap; gap:10px; font-size: .95rem; } #pawn-rating-public{ display:flex; gap:6px; align-items:center; } #pawn-rating-public .pawn{ width: 30px; height: 30px; display:inline-block; background-size: 100% 100%; cursor:pointer; } } @media (max-width: 900px){ .game-main-info{ display:grid; grid-template-columns: 1fr; gap: 12px; } .game-image{ width:100%; height: clamp(180px, 48vw, 320px); object-fit: contain; object-position: center; border-radius: 10px; display:block; } .game-info-box{ padding: 12px; border-radius: 12px; display:grid; gap:6px; } .game-info-box p{ margin: 0; line-height: 1.5; } .cta-wrap{ margin-top: 6px; } .cta-price{ text-align:center; min-height:44px; padding:12px 14px; border-radius:12px; } } @media (max-width: 900px){ .game-action-buttons{ display:flex; gap:12px; align-items:center; } .game-action-buttons .action-btn button{ width: 48px; height: 48px; border-radius: 12px; display:grid; place-items:center; touch-action: manipulation; } .action-anchor{ opacity:0; left: -120px; width:160px; height:32px; pointer-events:none; } } @media (max-width: 900px){ .save-menu{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; max-height: 55vh; overflow: auto; transform: translateY(120%); transition: transform .22s ease-out; border-top-left-radius: 14px; border-top-right-radius: 14px; padding: 12px 14px; z-index: 1000; } .save-menu.visible{ transform: translateY(0); } .save-menu-title{ text-align:center; font-weight:600; margin-bottom:8px; } .save-menu-item{ padding:10px 8px; border-radius:10px; } .save-menu-item:active{ transform: translateY(1px); } } @media (max-width: 900px){ .game-hooks, .game-description, .game-reviews{ margin-top: 14px; } .game-hooks h2, .game-description h2, .game-reviews h2{ font-size: 1.1rem; margin: 0 0 8px; } .game-hooks-list, .game-description p{ line-height:1.6; white-space: normal; overflow-wrap:anywhere; } .review-textarea{ width:100%; min-height: 96px; padding:10px 12px; border-radius:10px; } .send-review-btn{ margin-top: -8px; ; } .reviews-list{ display:grid; gap:10px; } .review-item{ padding:10px; border-radius:12px; overflow-wrap:anywhere; } .review-item .review-time{ font-size:.9rem; opacity:.8; margin-right:8px; } .delete-btn{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; } .delete-btn svg{ width:18px; height:18px; } } @media (max-width: 900px){ main{ width:100%; max-width:100%; } img, svg{ max-width:100%; height:auto; } } @media (max-width: 420px){ .game-title{ font-size: 1.2rem; } #pawn-rating-public .pawn{ width:28px; height:28px; } .game-image{ height: clamp(160px, 52vw, 260px); } } @media (max-width: 900px){ .flecha-volver{ display: none !important; } .game-title{ margin-top: 8px; } } @media (max-width: 900px){ .game-hooks h2, .game-description h2{ font-size: 1.05rem; margin-bottom: 6px; } .game-hooks-list, .game-hooks li, .game-description p, .game-description li{ font-size: clamp(0.9rem, 3.4vw, 0.98rem); line-height: 1.55; } } @media (max-width: 420px){ .game-hooks p, .game-hooks li, .game-description p, .game-description li{ font-size: 0.92rem; } } @media (max-width: 900px){ .game-reviews .review-item{ font-size: clamp(0.86rem, 3.1vw, 0.94rem); line-height: 1.5; } .game-reviews .review-item .review-time{ font-size: 0.8rem; opacity: .75; } .game-reviews .review-item strong{ font-size: 1em; font-weight: 600; } } @media (max-width: 420px){ .game-reviews .review-item{ font-size: 0.88rem; } .game-reviews .review-item .review-time{ font-size: 0.78rem; } } .review-item.review-flex{ display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: start; } .review-item.review-flex form{ position: static !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; margin: 0 !important; } .review-item .delete-btn{ width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; } .review-item .delete-btn svg{ width: 18px; height: 18px; } @media (max-width: 900px){ .review-item.review-flex{ gap: 6px 10px; } .review-item .review-time{ margin-top: 2px; } } @media (max-width: 900px){ .inicio-nav-btns{ display:none !important; } .flecha-volver{ display:none !important; } .menu-toggle{ position: fixed; left: max(10px, env(safe-area-inset-left)); top: 12px; z-index: 1101; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.12); } .menu-toggle .hamburger{ width: 28px; height: 18px; } .menu-toggle .hamburger span{ height: 3px; background: #1f2937; } .cascade-mask{ position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 1100; transition: opacity .2s ease; } .mobile-cascade{ position: fixed; top: 0; left: 0; height: 100dvh; width: min(86vw, 380px); background: #fff; border-right: 1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateX(-102%); transition: transform .24s ease-out; z-index: 1102; display: flex; flex-direction: column; } .mobile-cascade .cascade-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 8px; border-bottom: 1px solid #f1f5f9; background: #ffffff; } .mobile-cascade .u-mini{ display:flex; align-items:center; gap:10px; } .mobile-cascade .u-avatar{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #F2AF29; background:#fff; } .mobile-cascade .u-name{ font-weight: 700; color:#111827; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-cascade .cascade-close{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e5e7eb; cursor: pointer; background: #fff; font-size: 18px; line-height: 1; } .cascade-list{ list-style: none; margin: 6px 0 0; padding: 6px 6px 14px; overflow: auto; flex: 1 1 auto; } .cascade-link{ display: block; padding: 12px 12px; border-radius: 10px; text-decoration: none; color: #111827; font-weight: 700; } .cascade-link:active{ transform: translateY(1px); } .divider-row{ height: 1px; background: #f1f5f9; margin: 6px 10px; } .cascade-list details{ margin: 2px 4px; border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; background: #fff; } .cascade-list summary{ list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 12px; font-weight: 800; color:#0f172a; } .cascade-list summary::-webkit-details-marker{ display:none; } .cascade-list .chev{ margin-left: auto; transition: transform .18s ease; font-weight: 900; color: #6b7280; } .cascade-list details[open] .chev{ transform: rotate(90deg); } .sub-list{ list-style: none; margin: 0; padding: 6px 8px 10px 10px; border-top: 1px dashed #e5e7eb; background: #fafbff; } .sub-list li a{ display:block; padding: 10px 10px 10px 12px; border-radius: 10px; color:#111827; font-weight:700; } .sub-list li a:hover{ background:#f3f4f6; } #nav-cascade-toggle:checked ~ .mobile-cascade{ transform: translateX(0); } #nav-cascade-toggle:checked ~ .cascade-mask{ opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce){ .mobile-cascade{ transition: none !important; } .cascade-mask{ transition: none !important; } } @media (max-width: 900px){ .inicio-header-bg .user-profile-container, .inicio-header-bg .user-profile, .inicio-header-bg #userDropdown{ display: none !important; } } @media (max-width: 900px){ .inicio-header-bg{ padding: 1.1rem 12px .8rem; } .inicio-header-bg .logo-inicio{ font-size: clamp(1.9rem, 9.2vw, 2.7rem); line-height: 1.15; letter-spacing: .4px; margin: 2px auto 4px; max-width: 92%; white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 1px 2px rgba(13,71,161,.55), 0 0 3px rgba(13,71,161,.35); } } @media (max-width: 900px){ .game-title{ font-size: clamp(1.25rem, 5.6vw, 1.8rem); line-height: 1.22; letter-spacing: .2px; text-align: center; margin: 6px 0 10px; white-space: normal !important; overflow-wrap: anywhere; } .collection-title strong{ font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.2; } } @media (max-width: 900px){ .inicio-header-bg .discord-btn-reg { top: 0px !important; right: -25px !important; } .discord-btn{ top: 10px !important; right: 10px !important; } .inicio-header-bg .discord-btn-reg img, .discord-btn img{ width: 20px; height: 20px; } } @media (min-width: 901px){ #nav-cascade-toggle, .menu-toggle, .cascade-mask, .mobile-cascade { display: none !important; } } @media (max-width: 900px){ .inicio-nav-btns { display: none !important; } .user-profile-container { display: none !important; } } @media (max-width: 900px){ #login-btn, .login-btn{ display: none !important; } } @media (min-width: 901px){ #login-btn, .login-btn{ display: inline-block !important; } } @media (max-width: 900px){ .auth-page{ padding: 16px 0 24px; } .auth-container{ width: 100%; max-width: 520px; margin: 0 auto; padding: 0 12px; display: flex; flex-direction: column; gap: 16px; } .auth-panel{ padding: 16px 14px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); border: 1px solid #eef2f7; background: #fff; } .auth-panel .logo-auth{ width: 72px; height: auto; display: block; margin: 6px auto 10px; } .auth-panel h2{ font-size: clamp(1.2rem, 6vw, 1.6rem); line-height: 1.2; text-align: center; margin: 4px 0 10px; } .auth-panel form{ display: grid; gap: 10px; } .auth-panel input{ width: 100%; padding: 12px 14px; font-size: 16px; line-height: 1.2; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; } .auth-panel button{ width: 100%; min-height: 46px; border-radius: 12px; font-weight: 800; border: 1px solid #1f2937; background: #111827; color: #fff; } .auth-panel button:active{ transform: translateY(1px); } .enlace-contrasena{ margin: 0; text-align: center; } .enlace-contrasena a{ font-size: .95rem; } .error-message{ margin: 6px 0 10px; padding: 10px 12px; border-left: 4px solid #ef4444; background: #fee2e2; color: #991b1b; border-radius: 10px; font-size: .94rem; } } @media (max-width: 1100px){ .perfil-container{ width: min(94vw, 100%); padding: 16px; gap: 16px; } .colecciones-header, .colecciones-grid{ padding: 0 10px; } } @media (max-width: 900px){ .profile-page main{ padding: 12px; gap: 14px; } .perfil-container{ width: 100%; margin: 0 auto; padding: 12px; flex-direction: column; align-items: stretch; gap: 14px; } .profile-hero.dnd-card{ margin: 12px auto; padding: clamp(16px, 4vw, 24px); max-width: 980px; } .dnd-card .perfil-info{ grid-template-columns: 1fr; text-align: center; justify-items: center; } .dnd-card .perfil-datos .meta{ font-size: 14px; } .dnd-card .avatar-edit-btn{ right: 10px; bottom: 10px; } .colecciones-header{ padding: 0 6px; } .colecciones-title{ font-size: clamp(1.1rem, 4.4vw, 1.4rem); text-align: center; width: 100%; } .colecciones-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .collection-card.add-new #formNuevaColeccion .input-text{ min-height: 42px; font-size: 1rem; } .collection-card.add-new #formNuevaColeccion .form-actions{ grid-template-columns: 1fr 1fr; } } @media (max-width: 720px){ .dnd-card .perfil-info{ grid-template-columns: 1fr; } .colecciones-grid{ gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .collection-card.add-new .add-new-link{ min-height: 150px; padding: 20px 12px; } .collection-card.add-new #formNuevaColeccion .form-actions{ left: 12px; right: 12px; bottom: 12px; gap: 10px; } .collection-card.add-new #formNuevaColeccion .btn-primary, .collection-card.add-new #formNuevaColeccion .btn-secondary{ min-height: 42px; border-radius: 12px; } } @media (max-width: 420px){ .profile-hero.dnd-card{ padding: 14px; outline-width: 4px; } .dnd-card .perfil-datos .user-name{ font-size: clamp(20px, 6vw, 26px); } .dnd-card .perfil-datos .meta{ font-size: 13.5px; } .colecciones-grid{ grid-template-columns: 1fr; gap: 10px; } .collection-card.add-new #formNuevaColeccion .form-actions{ grid-template-columns: 1fr; } .collection-card.add-new #formNuevaColeccion .btn-primary, .collection-card.add-new #formNuevaColeccion .btn-secondary{ width: 100%; } } @media (max-width: 900px){ .collection-card.add-new #formNuevaColeccion.collection-body{ padding: 16px 16px max(72px, calc(56px + env(safe-area-inset-bottom))); background: linear-gradient(180deg,#fff, #fffaf2); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .collection-card.add-new #formNuevaColeccion .form-row{ gap: 8px; } .collection-card.add-new #formNuevaColeccion .form-label{ font-weight: 700; font-size: 1rem; color: #2b2b2b; } .collection-card.add-new #formNuevaColeccion .input-text{ padding: 12px 14px; font-size: 1rem; border: 2px solid rgba(0,0,0,.18); background: #fff; box-shadow: inset 0 1px 0 rgba(0,0,0,.03); } .collection-card.add-new #formNuevaColeccion .input-text::placeholder{ color: #5b5b5b; opacity: .95; } .collection-card.add-new #formNuevaColeccion .input-text:focus{ border-color: var(--ba-accent, #6C63FF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-accent, #6C63FF) 28%, transparent); } .collection-card.add-new #formNuevaColeccion .char-counter, .collection-card.add-new #formNuevaColeccion .error-hint{ font-size: .92rem; } .collection-card.add-new #formNuevaColeccion .form-actions{ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: linear-gradient(180deg, rgba(255,255,255,.7), #fff); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.12); } .collection-card.add-new #formNuevaColeccion .form-actions::before{ content:""; position:absolute; inset:-10px -10px auto -10px; height:14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.04)); border-top-left-radius: 14px; border-top-right-radius: 14px; pointer-events:none; } .collection-card.add-new #formNuevaColeccion .btn-primary, .collection-card.add-new #formNuevaColeccion .btn-secondary{ min-height: 44px; font-weight: 800; letter-spacing: .2px; } } @media (max-width: 720px){ .collection-card.add-new #formNuevaColeccion .input-text{ min-height: 44px; font-size: 1.02rem; } .collection-card.add-new #formNuevaColeccion .form-actions{ gap: 8px; } } @media (max-width: 420px){ .collection-card.add-new #formNuevaColeccion .form-actions{ grid-template-columns: 1fr; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); } .collection-card.add-new #formNuevaColeccion .btn-primary, .collection-card.add-new #formNuevaColeccion .btn-secondary{ width: 100%; } .collection-card.add-new #formNuevaColeccion .form-label{ font-size: 1.02rem; } .collection-card.add-new #formNuevaColeccion .char-counter, .collection-card.add-new #formNuevaColeccion .error-hint{ font-size: .95rem; } } @media (max-width: 900px){ #cardNuevaColeccion.is-open #formNuevaColeccion.collection-body{ --actions-h: 84px; } } @media (max-width: 420px){ #cardNuevaColeccion.is-open #formNuevaColeccion.collection-body{ --actions-h: 128px; } } @media (max-width: 420px){ .collection-card.add-new #formNuevaColeccion .form-actions{ position: static !important; box-shadow: none; background: transparent; padding: 0; min-height: 0; } } .cambiar-password-page{ --accent: #F2AF29; --bg: #d0e7ff; --text: #1f2937; --muted: #6b7280; --error: #d93025; --error-bg: #fce8e6; --error-bd: #f5c2c0; background: var(--bg); color: var(--text); min-height: 100dvh; display: flex; flex-direction: column; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .cambiar-password-page main{ margin-left: inherit; flex: 1 1 auto; display: grid; place-items: center; padding: 24px 16px; } .cambiar-password-page .form-container{ width: clamp(320px, 38vw, 480px); max-width: 92vw; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 10px 24px rgba(15,23,42,.10); padding: 24px 26px; } .cambiar-password-page .form-container h1{ margin: 0 0 14px; text-align: center; font-size: clamp(1.25rem, 2.3vw, 1.6rem); color: #2c3e50; } .cambiar-password-page label{ display: block; margin: 12px 0 6px; font-weight: 700; font-size: 0.95rem; color: var(--text); } .cambiar-password-page input[type="text"], .cambiar-password-page input[type="password"]{ width: 100%; height: 44px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; padding: 0 12px; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); transition: border-color .2s, box-shadow .2s, background .2s; } .cambiar-password-page input[type="text"]::placeholder, .cambiar-password-page input[type="password"]::placeholder{ color: #9ca3af; } .cambiar-password-page input[type="text"]:focus, .cambiar-password-page input[type="password"]:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: #fff; } .cambiar-password-page .error{ margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--error-bg); border: 1px solid var(--error-bd); color: var(--error); font-weight: 600; text-align: center; } .cambiar-password-page button[type="submit"]{ display: block; width: 100%; margin-top: 16px; min-height: 44px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .2px; cursor: pointer; box-shadow: 0 8px 18px rgba(242,175,41,.28); transition: transform .12s ease, filter .18s ease, box-shadow .18s ease; } .cambiar-password-page button[type="submit"]:hover{ filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(242,175,41,.36); } .cambiar-password-page button[type="submit"]:active{ transform: translateY(0); } .cambiar-password-page .flecha-volver{ position: absolute; top: 16px; left: 16px; z-index: 10; background: #ffffffcc; border: 1px solid #e5e7eb; padding: .5rem .8rem; border-radius: 999px; backdrop-filter: blur(6px); text-decoration: none; color: #111; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,.08); } .cambiar-password-page .flecha-volver:hover{ background: #fff; transform: scale(1.03); } .cambiar-password-page button[type="submit"]:focus-visible, .cambiar-password-page .flecha-volver:focus-visible, .cambiar-password-page input[type="text"]:focus-visible, .cambiar-password-page input[type="password"]:focus-visible{ outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } @media (max-width: 900px){ .cambiar-password-page main{ padding: 18px 12px; } .cambiar-password-page .form-container{ width: min(560px, 94vw); padding: 20px 18px; border-radius: 12px; } .cambiar-password-page .form-container h1{ margin-bottom: 10px; } } @media (max-width: 480px){ .cambiar-password-page .form-container{ width: 100%; max-width: 100%; margin: 0 0; padding: 18px 14px; border-radius: 10px; box-shadow: 0 8px 18px rgba(15,23,42,.08); } .cambiar-password-page label{ font-size: 0.93rem; } .cambiar-password-page input[type="text"], .cambiar-password-page input[type="password"]{ height: 46px; font-size: 1rem; } .cambiar-password-page button[type="submit"]{ min-height: 46px; font-size: 1rem; } .cambiar-password-page .flecha-volver{ position: fixed; top: 12px; left: 12px; } } @media (prefers-reduced-motion: reduce){ .cambiar-password-page *{ transition: none !important; } } @media (max-width: 640px) { header:has(.collection-hero) .backwrap { display: none !important; } } @media (max-width: 420px) { .cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 8px 8px !important; justify-items: stretch !important; } .card { width: 100% !important; max-width: none !important; height: 260px !important; } .card img { max-height: 65% !important; } .card span { font-size: .95rem; } } body[data-page="login"] { background: radial-gradient(1200px 500px at -10% -10%, rgba(33,150,243,.18), transparent 55%), radial-gradient(900px 380px at 110% 10%, rgba(244,180,60,.18), transparent 55%), #d0e7ff; } .auth-page { min-height: calc(100dvh - 80px); padding: 32px 16px; background: transparent; } .auth-container { max-width: 980px; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; box-shadow: 0 18px 40px rgba(15,23,42,.12); backdrop-filter: blur(6px); overflow: hidden; } .auth-split { width: 1px; background: linear-gradient(180deg, transparent, #eaeaea 40%, #eaeaea 60%, transparent); } @media (max-width: 860px) { .auth-container { flex-direction: column; } .auth-split { display: none; } } .auth-panel { padding: clamp(28px, 4vw, 42px) clamp(22px, 3.2vw, 38px); } .auth-panel h2 { margin: 14px 0 22px; font-weight: 800; color: #0f172a; letter-spacing: .2px; } .logo-auth { width: 92px; height: 92px; object-fit: cover; border-radius: 20%; box-shadow: 0 6px 16px rgba(0,0,0,.10); border: 1px solid #eee; } .auth-panel form input { border: 1.5px solid #d1d5db; border-radius: 12px; padding: 12px 14px 12px 44px; background: #f8fafc; transition: border-color .2s, box-shadow .2s, background .2s; } .auth-panel form input:focus { background: #fff; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59,130,246,.25); } .auth-panel form input[name="email"]{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%2399a3af' d='M12 13 2 6.76V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.76z'/><path fill='%2399a3af' d='M22 6L12 12 2 6l2-2h16z' opacity='.6'/></svg>"); background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; } .auth-panel form input[name="password"], .auth-panel form input[name="confirmPassword"]{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='%2399a3af' d='M6 10a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h1zm2 0a4 4 0 1 1 8 0v2H8z'/></svg>"); background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; } .auth-panel form button { border-radius: 12px; padding: 12px 16px; font-weight: 800; background: linear-gradient(135deg, #f5b400, #d99c00); box-shadow: 0 10px 22px rgba(217,156,0,.28); } .auth-panel form button:hover { transform: translateY(-1px); filter: brightness(1.03); } .error-message { border-radius: 10px; border: 1px solid #f7b8b5; background: #fdecec; color: #8b1e17; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } .auth-divider { display: grid; place-items: center; margin: 14px 0 10px; } .auth-divider span { display: inline-block; font-weight: 700; color: #6b7280; position: relative; padding: 0 10px; } .auth-divider span::before, .auth-divider span::after { content: ""; position: absolute; top: 50%; width: 120px; height: 1px; background: #e5e7eb; } .auth-divider span::before { right: 100%; margin-right: 10px; } .auth-divider span::after { left: 100%; margin-left: 10px; } .auth-google { display: grid; place-items: center; margin-bottom: 6px; } .auth-links { text-align: center; margin-top: 8px; } .auth-link { color: #2563eb; text-decoration: none; font-weight: 600; } .auth-link:hover { text-decoration: underline; } .auth-tips { margin: 10px 0 0; padding-left: 18px; color: #6b7280; font-size: .95rem; } body[data-page="login"] .flecha-volver { background: #ffffffcc; box-shadow: 0 8px 22px rgba(0,0,0,.10); } @media (max-width: 860px){ .auth-panel { padding: 22px 18px; } .auth-divider span::before, .auth-divider span::after { width: 80px; } } .inicio-header-bg .discord-btn-reg { position: relative; right: auto; top: auto; margin: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: #5865F2; border:1px solid rgba(88,101,242,.35); box-shadow:0 1px 4px black; transition:transform .12s ease, box-shadow .12s ease; } .discord-btn:hover, .inicio-header-bg .discord-btn-reg:hover { transform:translateY(-1px); box-shadow:0 2px 6px yellow } .discord-btn{ position: absolute; right:260px; top:25px; width:40px; height:40px; border-radius:50%; display:inline-grid; place-items:center; background:#5865F2; border:1px solid rgba(88,101,242,.35); box-shadow:0 1px 4px black; transition:transform .12s ease, box-shadow .12s ease; } .discord-btn img{ display:block; width:20px; height:20px } .send-review-btn{ position: absolute; right: 14px; top: calc(100px - 2px); width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #4C7DFF 0%, #2A5CE6 100%); box-shadow: 0 6px 18px rgba(76,125,255,.25), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .12s ease, filter .18s ease, box-shadow .18s ease; outline: none; } .send-review-btn::before{ content:""; position:absolute; inset:0; margin:auto; width: 20px; height: 20px; background: no-repeat center/20px url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\ <path fill='white' d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2z'/>\ </svg>"); transform: translateY(0); } .send-review-btn:hover{ filter: brightness(1.04) saturate(1.03); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(76,125,255,.28); } .send-review-btn:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(76,125,255,.22); } .send-review-btn:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(76,125,255,.45), 0 10px 26px rgba(76,125,255,.28); } @media (hover:hover){ .send-review-btn::after{ position:absolute; right: 48px; top: 50%; transform: translateY(-50%); background:#111; color:#fff; font-size:12px; font-weight:700; padding:6px 8px; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease; white-space:nowrap; } .send-review-btn:hover::after{ opacity:1; transform: translateY(-50%) translateX(-2px); } } .send-review-btn[disabled]{ cursor: not-allowed; background: linear-gradient(135deg,#AECBFF 0%, #86AAFF 100%); box-shadow: 0 2px 6px rgba(0,0,0,.12); filter: grayscale(.08); } .send-review-btn[disabled]::before{ opacity:.65; } .send-review-btn[data-state="loading"]{ cursor: progress; filter: brightness(.98); } .send-review-btn[data-state="loading"]::before{ width: 18px; height: 18px; border-radius: 999px; background: none; border: 2.5px solid rgba(255,255,255,.85); border-top-color: rgba(255,255,255,.3); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 900px){ .send-review-btn{ right: 10px; top: 86px; width: 40px; height: 40px; } } .page-size { position: relative; display: inline-flex; align-items: center; gap: .5rem; } .page-size-trigger { height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; line-height: 1; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; color: #374151; font-size: .95rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease-in-out; } .page-size-trigger:hover { background: #f9fafb; border-color: #d1d5db; } .page-size-trigger:active { transform: translateY(1px); } .page-size-trigger .caret { width: 16px; height: 16px; flex: 0 0 auto; pointer-events: none; } .page-size__label { font-size: .9rem; color: #6b7280; user-select: none; } .page-size .pretty-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 180px; padding: .375rem; margin: 0; list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 12px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06); display: none; } .page-size .pretty-menu.open { display: block; } .page-size .pretty-menu [role="option"] { width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-radius: .375rem; background: transparent; color: #374151; cursor: pointer; font-size: .95rem; } .page-size .pretty-menu [role="option"]:hover { background: #f3f4f6; } .page-size .pretty-menu [role="option"][aria-selected="true"] { background: #eef2ff; color: #1f2937; font-weight: 600; } .toolbar .sep + .page-size { margin-left: .25rem; } .profile-tabs{ position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; margin: 18px 0 0; border-radius: 14px; background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--dnd-paper) 0%, var(--dnd-paper-2) 100%); border: 1px solid #e6ecf4; box-shadow: 0 6px 22px rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.7); overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cfd8e3 transparent; } .profile-tabs::-webkit-scrollbar{ height: 8px; } .profile-tabs::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:999px; } .tab-btn{ position: relative; appearance: none; border: 0; background: #eef3f9; color: #1f2937; font: 600 0.98rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; letter-spacing: .2px; padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: transform .14s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px #e1e8f2 inset, 0 4px 12px rgba(27,60,116,.08); } .tab-btn:hover{ background: linear-gradient(180deg,#ffffff 0%, #eaf2fb 100%); box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 0 0 1px #d8e3f1 inset, 0 10px 22px rgba(27,60,116,.12); transform: translateY(-1px); } .tab-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(48,119,196,.20), 0 1px 0 rgba(255,255,255,1) inset, 0 0 0 1px #2b6cb0 inset, 0 10px 22px rgba(27,60,116,.18); background: #fff; } .tab-btn[aria-selected="true"]{ background: linear-gradient(90deg,#2b6cb0, #1e9bd7, #10a37f, #2b6cb0); background-size: 250% 100%; animation: activeTabGradient 6s ease-in-out infinite; color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,.28); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(0,0,0,.05) inset, 0 16px 32px rgba(34,132,220,.18); transform: translateY(-1px); } .tab-btn[aria-selected="true"]:hover{ filter: brightness(1.03); } .tab-btn[aria-selected="true"]::after{ content: none; } @keyframes activeTabGradient{ 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } } .tab-btn:active{ transform: translateY(0); filter: brightness(.98); } .tab-btn:disabled{ opacity: .5; cursor: not-allowed; transform: none !important; filter: none !important; } .profile-panel{ padding-top: 18px; } @media (max-width: 560px){ .profile-tabs{ gap: 10px; padding: 8px; border-radius: 12px; } .tab-btn{ font-size: .84rem; padding: 9px 12px; } } @media (prefers-reduced-motion: reduce){ .tab-btn{ transition: none !important; } .tab-btn[aria-selected="true"]{ animation: none !important; } } .profile-tabs.is-sticky{ position: sticky; top: 0; z-index: 7; border: 1px solid #dfe6f0; box-shadow: 0 10px 26px rgba(15,23,42,.06); } @media (max-width: 640px) { .backwrap { display: none !important; } } .wishlist-btn{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:999px; border:1px solid #e5e7eb; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:transform .12s ease, box-shadow .18s ease, background .18s ease; } .wishlist-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.12) } .wishlist-btn svg { width:22px; height:22px; fill: none; stroke: #6b7280; transition: fill .18s ease, stroke .18s ease, transform .12s ease, box-shadow .18s ease; } .wishlist-btn[aria-pressed="true"] svg { fill: #2563eb; stroke: #2563eb; } @media (max-width:640px){ .wishlist-btn{ width:36px; height:36px; right:8px; top:8px } } .solution{ margin-top:-18px; } .dist{ position:absolute; left: 20px; top:405px; } .dist2{ position:absolute; left: 20px; top:145px; } #filters-toggle { position:absolute; left:-9999px; } .filters-toggle-btn { display:none; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; } @media (max-width:768px){ .dist, .dist2{ position: static; } .filters-toggle-btn{ margin-left:8px; display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; font-size:.9rem; line-height:1; cursor:pointer; user-select:none; color:var(--text, #1f2937); background:var(--card, #fff); border:1px solid var(--border, #e6e7ef); border-radius:var(--radius-sm, 12px); box-shadow:0 1px 3px rgba(0,0,0,.06); } .filters-toggle-btn .icon-filters{ width:22px; height:22px; } .filters-toggle-btn:hover{ box-shadow:0 2px 6px rgba(0,0,0,.08); } .filters-toggle-btn:active{ transform:translateY(1px); } .filters-toggle-btn:focus-visible{ outline:2px solid var(--accent,#0066ff); outline-offset:2px; } .filters-panel{ position: fixed; left: 0; right: 0; bottom: 0; width: auto; top:80px; max-height: none; max-width: none; background: var(--card, #fff); border-top-left-radius: var(--radius-lg, 22px); border-top-right-radius: var(--radius-lg, 22px); box-shadow: 0 -10px 30px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .28s ease-out; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 8px); z-index: 1000; } .filters-grip{ width:36px; height:4px; border-radius:2px; background:var(--border, #e6e7ef); margin:10px auto 6px; } .filters-header{ position: sticky; top: 0; background: inherit; padding: .5rem .75rem; z-index: 1; border-bottom: 1px solid var(--border, #e6e7ef); } .filters-panel form{ overflow:auto; -webkit-overflow-scrolling: touch; padding: .5rem .75rem 1rem; } #filters-toggle:checked ~ .filters-panel{ transform: translateY(0); } .filters-backdrop{ position: fixed; inset: 0; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1001; display: block; } #filters-toggle:checked ~ .filters-backdrop{ opacity: 1; pointer-events: auto; } .filters-panel.is-collapsed{ position:absolute; left:-9999px; } } @media (min-width:769px){ .filters-toggle-btn, .filters-backdrop{ display:none; } .filters-panel{ height: auto; transform: none; box-shadow: none; z-index: auto; } } .success-message{ background:#e6ffed; border:1px solid #a7f3d0; color:#065f46; padding:10px; border-radius:8px; margin:10px 0 } .hint{ font-size:.9rem; color:#555; margin-top:6px } .inline-form{ display:inline-block; margin-left:8px } .inline-form button{ padding:6px 10px; border-radius:6px } .linklike { background:none; border:none; padding:0; color:#0ea5e9; cursor:pointer; font:inherit; text-decoration:underline; } .linklike:hover { text-decoration:none; } body.page[data-page="reset-password"] { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: #1f2937; background: radial-gradient(1200px 600px at 100% -100px, rgba(37,99,235,.08), transparent 60%), radial-gradient(1000px 500px at -100px 100%, rgba(16,185,129,.08), transparent 60%), #f5f7fb; min-height: 100dvh; padding: 24px; } .reset-wrap{ gap:25px; max-width: 560px; margin: 40px auto; padding: 40px 42px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 15px 35px rgba(0,0,0,.08), 0 8px 12px rgba(0,0,0,.04); } .reset-wrap h1{ margin: 0 0 6px; font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.25; } .errors{ color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:.85rem .95rem; border-radius:10px; margin: 8px 0 16px; } .field{ display:flex; flex-direction:column; gap: 8px; margin: 14px 0; } .field label{ font-weight: 600; font-size: .95rem; color:#111827; } .field input{ padding:.8rem 2.95rem; border:1px solid #d1d5db; border-radius:10px; background: #fff; color:#1f2937; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; } .field input::placeholder{ color: rgba(107,114,128,.75); } .field input:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.20); background:#ffffff; } .pw-box{ position:relative; } .pw-toggle{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; color:#6b7280; padding:6px 8px; border-radius:8px; transition: background-color .15s, color .15s; } .pw-toggle:hover{ background: rgba(229,231,235,.7); color:#111827; } .strength{ height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin-top:.5rem; } .strength > i{ display:block; height:100%; width:0; background: linear-gradient(90deg, #f59e0b, #10b981); transition: width .25s ease; border-radius:999px; } .small{ font-size:.9rem; color:#6b7280; margin-top:.35rem; } .actionsz{ margin-top:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap: wrap; } .actionsz button[type="submit"], .actions button[type="submit"]{ appearance: none; border: 0; padding: 10px 16px; background:#2563eb; color:#fff; border-radius:10px; font-weight:700; cursor:pointer; transition: transform .06s ease, background-color .15s ease, box-shadow .15s ease; box-shadow: 0 6px 14px rgba(37,99,235,.22); } .actionsz button[type="submit"]:hover, .actions button[type="submit"]:hover{ background:#1d4ed8; } .actionsz button[type="submit"]:active, .actions button[type="submit"]:active{ transform: translateY(1px); box-shadow: 0 4px 10px rgba(37,99,235,.22); } .hint{ color:#6b7280; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; } .hint:hover{ color:#111827; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } .friends-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; } .friend-card{ background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; } .friend-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); border-color:#d1d5db; } .friend-card--pending{ background:#fff7ed; border-color:#fed7aa; } .friend-avatar{ width:48px; height:48px; flex:0 0 48px; border-radius:50%; object-fit:cover; } .friend-body{ flex:1 1 auto; min-width:200px; } .friend-name{ display:inline-block; font-weight:600; color:#111827; text-decoration:none; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .friend-name:hover{ text-decoration:underline; } .friend-meta{ margin-top:2px; font-size:.92rem; color:#6b7280; } .friend-actions{ display:flex; align-items:center; gap:8px; } .friend-card form{ margin:0; } .btn-icon{ width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; background:#f3f4f6; font-size:18px; line-height:1; cursor:pointer; transition:background .12s ease, border-color .12s ease, transform .06s ease; } .btn-icon:hover{ background:#eef2ff; border-color:#c7d2fe; } .btn-icon:active{ transform:scale(.98); } .friend-card:focus-within{ outline:2px solid #c7d2fe; outline-offset:2px; } @media (max-width: 480px){ .friends-grid{ grid-template-columns:1fr; } .friend-avatar{ width:44px; height:44px; flex-basis:44px; } } @media (prefers-reduced-motion: reduce){ .friend-card, .btn-icon{ transition:none; } } #panel-amigos .search-toolbar{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:16px; border:1px solid #e5e7eb; border-radius:14px; background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%); box-shadow:0 2px 6px rgba(0,0,0,0.04); } #panel-amigos .search-toolbar:focus-within{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.15), 0 2px 8px rgba(0,0,0,0.06); background:#ffffff; } #panel-amigos .search-toolbar .input-text{ flex:1 1 auto; min-width: 300px; height:44px; border:1px solid #e5e7eb; border-radius:10px; padding-left:40px; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; background-color:#ffffff; background-repeat:no-repeat; background-position:12px 50%; background-size:18px 18px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); } #panel-amigos .search-toolbar .input-text::placeholder{ color:#9aa0a6; opacity:1; } #panel-amigos .search-toolbar .input-text:focus{ outline:0; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.15); background-color:#ffffff; } #panel-amigos .search-toolbar .btn-primary{ height:44px; padding:0 16px; border-radius:10px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; } #panel-amigos .search-toolbar input[type="hidden"]{ display:none; } @media (hover:hover){ #panel-amigos .search-toolbar:hover{ box-shadow:0 3px 10px rgba(0,0,0,0.06); } } @media (max-width: 600px){ #panel-amigos .search-toolbar{ flex-wrap:wrap; gap:8px; padding:10px; } #panel-amigos .search-toolbar .input-text{ width:100%; min-width:0; } #panel-amigos .search-toolbar .btn-primary{ width:100%; } } #panel-amigos .search-toolbar .btn-primary:active{ transform:translateY(1px); } #panel-amigos .friend-card--pending .friend-actions{ display:flex; align-items:center; gap:10px; } #panel-amigos .friend-card--pending .friend-actions form{ margin:0; padding:0; } #panel-amigos .friend-card--pending .friend-actions form > button{ width:40px; height:40px; min-width:40px; min-height:40px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; position:relative; border:1px solid transparent; line-height:1; font-size:0; cursor:pointer; user-select:none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease; vertical-align:middle; box-shadow:0 1px 3px rgba(0,0,0,0.12); } #panel-amigos .friend-card--pending .friend-actions form > button::before{ content:""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#ffffff; } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Aceptar"] > button{ background-color:#10b981; border-color:#0f9f88; box-shadow:0 2px 6px rgba(16,185,129,0.25); } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Aceptar"] > button::before{ content:"✓"; } @media (hover:hover){ #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Aceptar"] > button:hover{ background-color:#34d399; box-shadow:0 4px 12px rgba(16,185,129,0.35); transform:translateY(-1px); } } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Aceptar"] > button:focus{ outline:0; box-shadow:0 0 0 3px rgba(16,185,129,0.28), 0 4px 12px rgba(16,185,129,0.35); } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Aceptar"] > button:active{ transform:translateY(0); } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Rechazar"] > button{ background-color:#ef4444; border-color:#dc2626; box-shadow:0 2px 6px rgba(239,68,68,0.25); } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Rechazar"] > button::before{ content:"✕"; } @media (hover:hover){ #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Rechazar"] > button:hover{ background-color:#f87171; box-shadow:0 4px 12px rgba(239,68,68,0.35); transform:translateY(-1px); } } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Rechazar"] > button:focus{ outline:0; box-shadow:0 0 0 3px rgba(239,68,68,0.28), 0 4px 12px rgba(239,68,68,0.35); } #panel-amigos .friend-card--pending .friend-actions form[action$="/Amigos/Rechazar"] > button:active{ transform:translateY(0); } #panel-amigos .friend-card--pending .friend-actions form > button.is-disabled, #panel-amigos .friend-card--pending .friend-actions form > button[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:0 1px 3px rgba(0,0,0,0.08); } @media (prefers-reduced-motion: reduce){ #panel-amigos .friend-card--pending .friend-actions form > button{ transition:none; } } .btn-view-profile{ display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border-radius: 9999px; border: 1px solid #60a5fa; background: #60a5fa; color: #fff; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 6px 16px rgba(96,165,250,.28); transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease; } .btn-view-profile::after{ content: "↗"; display: inline-block; transform: translateX(2px); transition: transform .15s ease; font-size: .95em; } .btn-view-profile:hover, .btn-view-profile:focus-visible{ background: #3b82f6; border-color: #3b82f6; box-shadow: 0 8px 22px rgba(59,130,246,.34), 0 0 0 3px rgba(96,165,250,.24); } .btn-view-profile:hover::after, .btn-view-profile:focus-visible::after{ transform: translateX(4px); } .btn-view-profile:active{ transform: translateY(1px); box-shadow: 0 4px 12px rgba(59,130,246,.28); } .btn-view-profile[aria-disabled="true"], .btn-view-profile.is-disabled{ background: #94a3b8; border-color: #94a3b8; box-shadow: none; cursor: not-allowed; opacity: .8; } .friend-card .friend-actions{ display: flex; gap: .5rem; align-items: center; } .friend-card .btn-view-profile{ margin-left: auto; } @media (max-width: 640px){ .friend-card .btn-view-profile{ width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce){ .btn-view-profile, .btn-view-profile::after{ transition: none !important; } } .btn-view-profile{ display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:9999px; border:1px solid #60a5fa; background:#60a5fa; color:#fff; font-weight:600; line-height:1; text-decoration:none; box-shadow:0 6px 16px rgba(96,165,250,.28); transition:transform .15s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease; } .btn-view-profile::after{ content:"↗"; display:inline-block; transform:translateX(2px); transition:transform .15s ease; font-size:.95em; } .btn-view-profile:hover, .btn-view-profile:focus-visible{ background:#3b82f6; border-color:#3b82f6; box-shadow:0 8px 22px rgba(59,130,246,.34), 0 0 0 3px rgba(96,165,250,.24); } .btn-view-profile:hover::after, .btn-view-profile:focus-visible::after{ transform:translateX(4px); } .btn-view-profile:active{ transform:translateY(1px); box-shadow:0 4px 12px rgba(59,130,246,.28); } .btn-view-profile[aria-disabled="true"], .btn-view-profile.is-disabled{ background:#94a3b8; border-color:#94a3b8; box-shadow:none; cursor:not-allowed; opacity:.8; } .more-menu{ position:relative; } .kebab-btn{ appearance:none; background:#ffffff; border:1px solid #e5e7eb; border-radius:9999px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .1s ease; } .kebab-btn:hover, .kebab-btn:focus-visible{ background:#f3f4f6; border-color:#d1d5db; box-shadow:0 4px 12px rgba(0,0,0,.08); } .kebab-btn:active{ transform:translateY(1px); } .menu-list{ position:absolute; top:42px; right:0; min-width:220px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,.12); padding:6px; display:none; z-index:30; } .menu-list.show{ display:block; } .menu-list a, .menu-list button{ display:flex; width:100%; padding:10px 12px; background:transparent; border:0; text-align:left; cursor:pointer; font-weight:500; color:#111827; text-decoration:none; border-radius:8px; } .menu-list a:hover, .menu-list button:hover{ background:#f3f4f6; } .menu-list .menu-danger{ color:#b91c1c; } .menu-list .menu-danger:hover{ background:#fee2e2; } .friend-card .friend-actions{ display:flex; gap:.5rem; align-items:center; } .friend-card .btn-view-profile{ margin-left:auto; } @media (max-width:640px){ .friend-body{ min-width:0; } .friend-card .btn-view-profile{ width:100%; justify-content:center; } } @media (prefers-reduced-motion:reduce){ .btn-view-profile, .btn-view-profile::after, .kebab-btn, .menu-list{ transition:none !important; } } .friend-actions { position: relative; } .more-menu { position: relative; } .menu-list{ display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: #fff; border: 1px solid rgba(0,0,0,.10); box-shadow: 0 10px 24px rgba(0,0,0,.16); border-radius: 8px; padding: 6px; z-index: 1001; pointer-events: auto; } .menu-list.show { display: block; } .friend-card.menu-open { position: relative; z-index: 1002; } .friend-card.menu-open .friend-actions > *:not(.more-menu), .friend-card.menu-open .friend-body a, .friend-card.menu-open .btn-view-profile { pointer-events: none; } #menu-scrim{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; background: transparent; pointer-events: auto; } #menu-scrim.show { display: block; } .compare-page { color: #0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .compare-page main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; } .compare-page main.compare-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 16px; align-items: start; } .compare-page .compare-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; height: fit-content; } .compare-page .chart-card { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .compare-page .chart-title { font-weight: 600; margin: 0 0 8px 0; } .compare-page .radar-wrap { width: 100%; height: 320px; } @media (max-width: 1100px) { .compare-page main.compare-layout { grid-template-columns: 1fr; } .compare-page .compare-right { position: static; } } .compare-page .compare-header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px; margin: 4px 0 16px; background: #ffffff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06); } .compare-page .user-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fdfdff; border: 1px solid #e6e9f0; border-radius: 12px; cursor: pointer; } .compare-page .user-chip img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid #e6e9f0; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06); } .compare-page .user-chip .name { font-size: 16px; font-weight: 700; color: #101828; line-height: 1.2; } .compare-page .user-chip:hover { background: #ffffff; border-color: #dfe4ee; box-shadow: 0 10px 26px rgba(16,24,40,0.10); } .compare-page .pill { display: inline-block; margin-left: 8px; padding: 2px 9px; font-size: 11px; line-height: 18px; border-radius: 999px; background: #eef2ff; color: #3041a8; border: 1px solid #dee6ff; } .compare-page .pill.alt { background: #fff1f3; color: #b42318; border: 1px solid #ffd9de; } .compare-page .divider-dot { width: 10px; height: 10px; background: #d0d5dd; border-radius: 50%; box-shadow: 0 0 0 5px #eef2ff inset; } .compare-page .toolbar-top { margin: 14px 0 18px; display: flex; gap: 10px; flex-wrap: wrap; } .compare-page .btn-primary, .compare-page .btn-secondary, .compare-page .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 10px; text-decoration: none; cursor: pointer; line-height: 1.1; font-weight: 600; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease, color 140ms ease; -webkit-tap-highlight-color: transparent; } .compare-page .btn-primary { background: #f2f5ff; color: #3041a8; border: 1px solid #dbe3ff; box-shadow: 0 1px 0 rgba(16,24,40,0.03); } .compare-page .btn-primary:hover { background: #ebefff; border-color: #cfd9ff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(48,65,168,0.12); } .compare-page .btn-secondary { background: #ffffff; color: #344054; border: 1px solid #d0d5dd; } .compare-page .btn-secondary:hover { background: #f8fafc; border-color: #cdd3db; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(16,24,40,0.08); } .compare-page .btn-link { padding: 6px; color: #3041a8; border: 1px solid transparent; background: transparent; } .compare-page .btn-link:hover { color: #263592; text-decoration: underline; } .compare-page .btn-primary:focus, .compare-page .btn-secondary:focus, .compare-page .btn-link:focus, .compare-page a:focus { outline: 0; box-shadow: 0 0 0 3px #c7d2fe, 0 0 0 5px #e0e7ff; border-color: #c7d2fe; } .compare-page .section { margin-top: 22px; background: #ffffff; border: 1px solid #e6e9f0; border-radius: 14px; padding: 14px 14px 16px; box-shadow: 0 6px 22px rgba(16,24,40,0.06); } .compare-page .section h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 18px; color: #0f172a; letter-spacing: .2px; } .compare-page .badge { padding: 2px 10px; border-radius: 999px; background: #eef2ff; color: #3041a8; border: 1px solid #dee6ff; font-size: 12px; font-weight: 700; } .compare-page .games-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; } @media (max-width: 980px) { .compare-page .games-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 640px) { .compare-page .games-grid { grid-template-columns: 1fr; } } .compare-page .game-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #ffffff; border: 1px solid #e6e9f0; border-radius: 12px; transition: transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease; box-shadow: 0 1px 2px rgba(16,24,40,0.04); overflow: hidden; cursor: pointer; } .compare-page .game-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #e8ecff; } .compare-page .game-item:hover { transform: translateY(-1px); border-color: #d9deea; box-shadow: 0 14px 30px rgba(16,24,40,0.10); background: #fbfcff; } .compare-page .game-item a { color: #111827; font-weight: 700; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 76%; } .compare-page .game-item a:hover { color: #3041a8; text-decoration: underline; } .compare-page .muted { color: #667085; font-size: 12px; user-select: none; } .compare-page .empty-state { background: #fafbff; border: 1px dashed #d7dce6; color: #667085; border-radius: 12px; padding: 18px; text-align: center; } .compare-page main.compare-layout > :first-child .section:nth-of-type(1) .badge { background:#eef2ff; color:#3041a8; border-color:#dee6ff; } .compare-page main.compare-layout > :first-child .section:nth-of-type(1) .game-item::before { background:#e8ecff; } .compare-page main.compare-layout > :first-child .section:nth-of-type(2) .badge { background:#fff6e6; color:#8a5a00; border-color:#ffe9c4; } .compare-page main.compare-layout > :first-child .section:nth-of-type(2) .game-item::before { background:#ffeecf; } .compare-page main.compare-layout > :first-child .section:nth-of-type(3) .badge { background:#f3edff; color:#5b3ab3; border-color:#e7dbff; } .compare-page main.compare-layout > :first-child .section:nth-of-type(3) .game-item::before { background:#eadfff; } .compare-page .game-item:active { transform: translateY(0); } @media (max-width: 520px) { .compare-page .compare-header { padding: 12px; } .compare-page .user-chip { width: 100%; } .compare-page .user-chip img { width: 46px; height: 46px; } .compare-page .section { padding: 12px; } } @media (prefers-reduced-motion: reduce) { .compare-page .btn-primary, .compare-page .btn-secondary, .compare-page .btn-link, .compare-page .game-item, .compare-page .user-chip { transition: none; } } @media print { .compare-page .toolbar-top { display: none !important; } .compare-page main { padding: 0; } .compare-page .section { box-shadow: none; border-color: #d0d5dd; } .compare-page .game-item { box-shadow: none; } } .fila-juegos { display: flex; flex-wrap: nowrap; gap: 0.5rem; max-width: 100%; } .fila-juegos figure { flex: 1 1 0; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; } .fila-juegos img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 6px; }