/* WooCommerce sobre la paleta oscura Owari (spec/01-estilo-visual.md). Carrito, checkout, mi cuenta, tienda y página de gracias. */ /* ── Base ── ⚠ NUNCA usar `.woocommerce` a secas para reglas generales (color de enlaces, tipografías…): WordPress pone esa clase en el de las páginas de tienda, así que la regla se filtra a la cabecera y al pie — y el menú y el botón "Agendar evaluación" quedaban cian sobre cian (invisibles). Todo lo que sea "general" se limita a NUESTROS contenedores de contenido: `.woo-shell` (woocommerce.php) y `.page-shell` (page.php: carrito, checkout, mi cuenta). Los selectores de componentes concretos de WooCommerce (`.woocommerce-message`, `ul.products`, …) sí pueden ir sueltos. */ .woo-shell, .page-shell .woocommerce { color: var(--text); } .woo-shell a, .page-shell .woocommerce a { color:var(--cy-txt); } .woo-shell h2, .woo-shell h3, .page-shell .woocommerce h2, .page-shell .woocommerce h3 { font-family: var(--fuente-titulo); font-weight: var(--fuente-titulo-peso); } /* Avisos */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--panel); border: 1px solid var(--line2); border-top: 3px solid var(--cy); color: var(--text); border-radius: 14px; padding: 16px 22px 16px 48px; margin-bottom: 26px; } .woocommerce-error { border-top-color: #e2574c; } .woocommerce-message::before, .woocommerce-info::before { color:var(--cy-txt); } .woocommerce-error::before { color: #e2574c; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; } /* Botones Woo → mismos botones Owari. OJO con la especificidad: WooCommerce usa `.woocommerce a.button` (0,2,1), que gana a `.woocommerce .button` (0,2,0) y dejaba los botones del catálogo en su gris por defecto. Por eso van los selectores con etiqueta. */ .woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit, .wc-block-components-button { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: .18s; background: var(--cy); color: #042530; border: 1.5px solid transparent; font-family: 'Montserrat', sans-serif; } .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--cy-soft); color: #042530; transform: translateY(-1px); } /* Producto ya en el carrito: el enlace "Ver carrito" en versión fantasma. */ .woocommerce a.added_to_cart { display: inline-flex; align-items: center; margin-left: 10px; font-size: 13px; font-weight: 700; color:var(--cy-txt); } /* Los botones de los bloques Woo son : sin esto heredan el cian de `.woocommerce a` y quedan cian sobre cian (texto invisible). */ .wc-block-components-button, a.wc-block-components-button, .wc-block-cart__submit-button, a.checkout-button { color: #042530 !important; } .wc-block-components-button:hover { color: #042530 !important; } /* MISMO problema con NUESTROS botones `.btn` cuando caen dentro de una página de WooCommerce (Mi cuenta → Licencias, etc.): `.woocommerce a` (0,2,0) le gana a `.btn-primary` (0,1,0) y el texto quedaba cian sobre cian. */ .woocommerce a.btn-primary, .woocommerce-page a.btn-primary, .woocommerce a.btn-primary:hover, .woocommerce-page a.btn-primary:hover { color: #042530 !important; } .woocommerce a.btn-ghost, .woocommerce-page a.btn-ghost { color: var(--text) !important; } .woocommerce a.btn-ghost:hover, .woocommerce-page a.btn-ghost:hover { color:var(--cy-txt) !important; } .woocommerce .button:disabled, .woocommerce button.button:disabled[disabled] { background: var(--panel2); color: var(--faint); } /* Formularios */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .select2-container--default .select2-selection--single { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: 11px; padding: 12px 14px; font-family: 'Montserrat', sans-serif; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color:var(--cy-txt); outline: none; } .woocommerce form .form-row label { color: var(--muted); font-size: 13px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 1.6; } .select2-dropdown { background: var(--panel); border: 1px solid var(--line2); color: var(--text); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cy); color: #042530; } /* ── Campos del checkout de bloques, en la paleta del tema ── Venían BLANCOS (estilo por defecto de WooCommerce Blocks) dentro de una página oscura: desentonaban y el desplegable de país se veía especialmente mal. Antes se parcheó poniendo el texto oscuro; ahora se oscurece el campo entero, que es lo coherente con el resto del sitio. */ .wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__select, .wc-block-components-combobox input, .wc-block-components-select select, .wc-block-components-country-input select, .wc-block-components-state-input select { background: var(--panel2) !important; color: var(--text) !important; border: 1px solid var(--line2) !important; border-radius: 11px !important; color-scheme: dark; } /* El contenedor del select trae fondo blanco propio. */ .wc-blocks-components-select, .wc-blocks-components-select__container { background: transparent !important; border: none !important; border-radius: 11px; } .wc-block-components-text-input label, .wc-block-components-combobox label, .wc-block-components-select label, .wc-blocks-components-select__label, .wc-block-components-country-input label, .wc-block-components-state-input label { color: var(--faint) !important; } /* Etiqueta flotante al escribir: que no se pierda sobre el campo oscuro. */ .wc-block-components-text-input.is-active label { color: var(--faint) !important; } /* Flecha propia del select (Blocks dibuja la suya con appearance:none). */ .wc-blocks-components-select__expand { fill: var(--cy) !important; } .wc-blocks-components-select__select option { background: var(--panel); color: var(--text); } /* Focus de los campos de bloques: sin esto el navegador pinta su `outline: auto` (naranja en tema oscuro). Anillo cian de la marca. */ .wc-block-components-text-input input:focus, .wc-block-components-combobox input:focus, .wc-block-components-select select:focus, .wc-block-components-country-input select:focus, .wc-block-components-state-input select:focus, .wc-block-components-textarea:focus, .wc-block-checkout__add-note textarea:focus { outline: none !important; border-color:var(--cy-txt) !important; box-shadow: 0 0 0 2px rgba(0, 181, 212, .4) !important; } /* Componentes de bloques que usan el color "admin" de WP (radios, checks, spinners, enlaces internos): que usen el cian Owari. */ body { --wp-admin-theme-color:var(--cy-txt); --wp-admin-theme-color-darker-10: var(--cy-deep); --wp-admin-theme-color-darker-20: var(--cy-deep); } /* Numerito de cantidad sobre la miniatura del resumen del pedido: heredaba texto y fondo del mismo color claro (número invisible). */ .wc-block-components-order-summary-item__quantity { background: var(--cy); color: #042530 !important; font-weight: 800; border: 2px solid var(--panel); } /* Miniaturas del carrito y del pago (bloques y tabla clásica) */ .wc-block-cart-item__image img, .wc-block-components-product-image img, .woocommerce table.shop_table td.product-thumbnail img, .wc-block-components-order-summary-item__image img { border-radius: 10px; border: 1px solid var(--line); background: #0b2130; } /* Tablas (carrito, totales, pedidos) */ .woocommerce table.shop_table { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; border-collapse: separate; overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--line); color: var(--text); padding: 14px 16px; } .woocommerce table.shop_table thead th { background: var(--panel2); color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-top: none; } .woocommerce table.shop_table td.product-name a { color: var(--text); font-weight: 600; } .woocommerce .cart_totals h2, #order_review_heading { margin: 26px 0 14px; } .woocommerce td.product-remove a.remove { color: var(--muted) !important; } .woocommerce td.product-remove a.remove:hover { background: #e2574c; color: #fff !important; } .woocommerce .quantity .qty { background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: 9px; padding: 8px; } /* Descuento acordado con el cliente: resaltado para que se lea la rebaja */ .owari-rebaja, .owari-rebaja .amount { color: var(--cy-txt); font-weight: 700; white-space: nowrap; } /* Precios */ .woocommerce .amount, .woocommerce ins { color: var(--text); } .woocommerce del .amount { color: var(--faint); } /* Checkout */ .woocommerce-checkout #payment { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; } .woocommerce-checkout #payment div.payment_box { background: var(--panel2); color: var(--muted); } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--panel2); } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); } /* ── Elegir método de pago (checkout CLÁSICO y página de pago del pedido) ── Esta pantalla no es la del checkout de bloques: es la que abre el enlace de pago que se le manda al cliente. Venía sin estilar: los métodos salían como una lista suelta y el radio con los 13px grises del navegador, casi invisible sobre el fondo oscuro. */ .woocommerce #payment ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; } .woocommerce #payment ul.wc_payment_methods li.wc_payment_method { background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; padding: 14px 18px; transition: .15s; } .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:hover { border-color: var(--cy); } /* El elegido se distingue sin depender de ver el radio. */ .woocommerce #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--cy); background: rgba(0, 181, 212, .08); } .woocommerce #payment ul.wc_payment_methods li.wc_payment_method > label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 15px; color: var(--text); cursor: pointer; } .woocommerce #payment ul.wc_payment_methods input.input-radio { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--cy); cursor: pointer; } /* Los logos de las pasarelas están hechos para fondo BLANCO: el de Wompi es oscuro y desaparecía sobre el panel. Se les pone una placa clara detrás, que sirve para cualquier pasarela sin tener que conocer su logo. */ .woocommerce #payment ul.wc_payment_methods label img { max-height: 28px; width: auto; margin: 0 0 0 2px; background: #fff; padding: 4px 8px; border-radius: 7px; } .woocommerce #payment div.payment_box { margin: 12px 0 0; border-radius: 12px; } .woocommerce form.checkout_coupon, .woocommerce form.login { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; } /* ── Mi cuenta: acceso y registro ── Sin sesión, WooCommerce imprime el formulario de acceso y (si el registro está activo) el de registro. Se presentan como dos tarjetas lado a lado. */ .woocommerce-account .page-shell .woocommerce { max-width: 980px; margin-inline: auto; } .woocommerce-account:not(.logged-in) .page-title { text-align: center; } /* `stretch` (no `start`): las dos tarjetas ocupan la misma altura aunque una tenga más contenido. Con `start` cada una tomaba la suya y quedaban desiguales. */ .woocommerce .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } /* Colocación EXPLÍCITA de cada tarjeta (acceso izquierda, registro derecha). Dejarlo a la colocación automática las cruzaba de columna y las mandaba a filas distintas, dejando huecos. WooCommerce además fuerza `float` y `width: 48%/100%` con varias reglas, así que se anulan con !important. */ .woocommerce .u-columns.col2-set > .u-column1 { grid-area: 1 / 1; } .woocommerce .u-columns.col2-set > .u-column2 { grid-area: 1 / 2; } .woocommerce .u-columns.col2-set > .u-column1, .woocommerce .u-columns.col2-set > .u-column2 { width: auto !important; float: none !important; margin: 0 !important; } .woocommerce form.login, .woocommerce form.register, .woocommerce .u-column1 > h2, .woocommerce .u-column2 > h2 { margin: 0; } .woocommerce .u-column1, .woocommerce .u-column2 { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px; } .woocommerce .u-column1 > h2, .woocommerce .u-column2 > h2 { font-family: var(--fuente-titulo); font-weight: var(--fuente-titulo-peso); font-size: 26px; color: var(--text); margin-bottom: 6px; } .woocommerce form.login, .woocommerce form.register { border: none; padding: 0; margin: 18px 0 0; background: transparent; } .woocommerce form .form-row { padding: 0; margin: 0 0 16px; } .woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .woocommerce form .form-row .required { color:var(--cy-txt); border: none; } .woocommerce form.login .woocommerce-form-login__rememberme, .woocommerce form .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; } .woocommerce form .woocommerce-form__input-checkbox { width: auto; margin: 0; accent-color:var(--cy-txt); } .woocommerce form.login button[type="submit"], .woocommerce form.register button[type="submit"] { width: 100%; justify-content: center; margin-top: 4px; font-size: 14px; padding: 13px 22px; } .woocommerce .woocommerce-LostPassword { margin: 14px 0 0; font-size: 13px; text-align: center; } .woocommerce .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--faint); line-height: 1.5; } .woocommerce-password-strength { border-radius: 9px; font-size: 12px; padding: 8px 12px; } .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); } /* ── Mi cuenta: panel con sesión iniciada ── */ .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; } /* WooCommerce fija `width: 30%/68%` y `float` con selectores más específicos (`.woocommerce-account .woocommerce-MyAccount-…`), lo que rompía la rejilla: las columnas quedaban con anchos sueltos y en el orden cambiado. Se igualan los selectores y se anula ancho y flotado. */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; margin: 0; } /* Colocación EXPLÍCITA: el menú a la izquierda y el contenido a la derecha. Sin esto quedaba a merced de la colocación automática y de los flotados que WooCommerce aplica, y las columnas salían cambiadas. */ .woocommerce-account .woocommerce-MyAccount-navigation { grid-area: 1 / 1; } .woocommerce-account .woocommerce-MyAccount-content { grid-area: 1 / 2; } .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; } .woocommerce-MyAccount-navigation li { padding: 0; } .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border: none; border-radius: 11px; color: var(--muted) !important; font-weight: 600; font-size: 14px; transition: .14s; } /* ── Iconos del menú de Mi cuenta ── Misma familia que el carrito y el usuario de la cabecera: trazo 1.8 sobre una caja de 24. Van por `mask` y no como para que hereden `currentColor`: así siguen al gris, al blanco del hover y al cian del activo sin duplicar archivos. La plantilla de WooCommerce escapa las etiquetas, de modo que meter el SVG en el HTML exigiría sobreescribirla; esto no. */ .woocommerce-MyAccount-navigation li a::before { content: ""; width: 19px; height: 19px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .woocommerce-MyAccount-navigation li { /* Escritorio: cuadrícula de cuatro paneles. */ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.6' y='3.2' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.2' y='13.6' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.6' y='13.6' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E"); } /* Pedidos: caja de envío. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 7.6v8.8L12 21.2l-8.4-4.8V7.6L12 2.8z'/%3E%3Cpath d='M3.8 7.7 12 12.4l8.2-4.7M12 12.4v8.8'/%3E%3C/svg%3E"); } /* Licencias: llave. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--licencias { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.6' cy='16.4' r='3.8'/%3E%3Cpath d='m10.3 13.7 8-8M17 7l2.2 2.2M14.6 9.4l2.2 2.2'/%3E%3C/svg%3E"); } /* Descargas: flecha hacia una bandeja. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v10.8M7.8 10.2 12 14.4l4.2-4.2'/%3E%3Cpath d='M4.2 16.6v2.4a1.6 1.6 0 0 0 1.6 1.6h12.4a1.6 1.6 0 0 0 1.6-1.6v-2.4'/%3E%3C/svg%3E"); } /* Direcciones: marcador de mapa. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c-3.6 0-6.4 2.8-6.4 6.3 0 4.7 6.4 11.9 6.4 11.9s6.4-7.2 6.4-11.9c0-3.5-2.8-6.3-6.4-6.3z'/%3E%3Ccircle cx='12' cy='9.2' r='2.4'/%3E%3C/svg%3E"); } /* Detalles de la cuenta: la misma persona que en la cabecera. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c0-3.6 3.2-5.6 7.2-5.6s7.2 2 7.2 5.6'/%3E%3C/svg%3E"); } /* Salir: flecha saliendo por la puerta. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.4 3.6H5.8a1.6 1.6 0 0 0-1.6 1.6v13.6a1.6 1.6 0 0 0 1.6 1.6h8.6'/%3E%3Cpath d='M15.6 8.4 19.8 12l-4.2 3.6M19.4 12H9.4'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation li a:hover { background: rgba(0, 181, 212, .09); color: var(--text) !important; } .woocommerce-MyAccount-navigation li.is-active a { background: rgba(0, 181, 212, .14); color:var(--cy-txt) !important; } .woocommerce-MyAccount-content { color: var(--muted); line-height: 1.65; min-width: 0; } .woocommerce-MyAccount-content p { margin: 0 0 14px; } .woocommerce-MyAccount-content a { color:var(--cy-txt); } .woocommerce-MyAccount-content mark, .woocommerce mark { background: transparent; color: var(--text); font-weight: 700; } .woocommerce-MyAccount-content .woocommerce-Address { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 16px; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { color: var(--text); font-size: 20px; margin: 0 0 12px; } /* ── Licencias del cliente (Mi cuenta → Licencias) ── */ .owari-lic-intro { color: var(--muted); margin: 0 0 20px; } .owari-lic-ayuda { color: var(--muted); font-size: 13px; margin: 8px 0 0; } .owari-licencias { display: flex; flex-direction: column; gap: 16px; } .owari-lic { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; } .owari-lic-vigente { border-color: rgba(0, 181, 212, .35); } .owari-lic-vencida { border-color: rgba(226, 87, 76, .35); } .owari-lic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .owari-lic-top h3 { margin: 0; font-size: 19px; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .owari-lic-tipo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 9px; } .owari-lic-estado { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; } .owari-lic-estado-vigente { background: rgba(0, 181, 212, .15); color:var(--cy-txt); } /* Ámbar: venció pero sigue funcionando durante los meses de gracia. */ .owari-lic-estado-gracia { background: rgba(240, 173, 78, .16); color: #f5c072; } .owari-lic-estado-vencida { background: rgba(226, 87, 76, .15); color: #ff8b82; } .owari-lic-estado-suspendida { background: rgba(226, 87, 76, .22); color: #ff8b82; } .owari-lic-estado-anulada { background: var(--line); color: var(--faint); } .owari-lic-datos { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); } .owari-lic-datos div { margin: 0; } .owari-lic-datos dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .owari-lic-datos dd { margin: 4px 0 0; color: var(--text); font-size: 14.5px; } .owari-lic-datos code { background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px; padding: 4px 9px; font-size: 13px; color:var(--cy-txt); } .owari-lic-datos small { color: var(--faint); } .owari-lic-nota, .owari-lic-aviso { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; } .owari-lic-aviso { color: #ffb3ac; } /* Facturas atrasadas: una por mes sin pagar, con su propio enlace de pago. */ .owari-lic-facturas { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel2); } .owari-lic-facturas-tit { margin: 0 0 10px; font-size: 14px; color: var(--text); } .owari-lic-facturas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .owari-lic-facturas li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); } .owari-lic-facturas li .amount { color: var(--text); font-weight: 600; } .owari-lic-pagar { flex: none; border: 1px solid var(--cy-txt); color: var(--cy-txt); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; text-decoration: none; } .owari-lic-pagar:hover { background: rgba(0, 181, 212, .14); } .owari-lic-facturas-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); } .owari-lic-renovar { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(0, 181, 212, .07); border: 1px solid rgba(0, 181, 212, .28); } .owari-lic-renovar-tit { margin: 0 0 4px; color: var(--text); font-size: 14.5px; } .owari-lic-renovar-tit b { color:var(--cy-txt); } .owari-lic-renovar-tit small, .owari-lic-renovar-op { color: var(--muted); font-size: 12.5px; font-weight: 500; } .owari-lic-renovar-op { margin: 0 0 12px; } /* Las dos opciones de renovación: las elige el CLIENTE */ .owari-lic-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .owari-lic-op { margin: 0; } .owari-lic-op button { width: 100%; display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: var(--panel2); border: 1.5px solid var(--line2); border-radius: 14px; padding: 14px 16px; text-align: left; font-family: 'Montserrat', sans-serif; transition: .15s; } .owari-lic-op button:hover { border-color:var(--cy-txt); transform: translateY(-2px); } .owari-lic-op.elegida button { border-color:var(--cy-txt); background: rgba(0, 181, 212, .12); } .owari-lic-op-nom { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color:var(--cy-txt); } .owari-lic-op-precio { font-size: 19px; font-weight: 700; color: var(--text); } .owari-lic-op-nota { font-size: 12px; color: var(--muted); } @media (max-width: 480px) { .owari-lic-opciones { grid-template-columns: 1fr; } } .owari-lic-dominio { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .owari-lic-activa { margin: 0 0 10px; color: var(--muted); font-size: 14px; } .owari-lic-activa b { color:var(--cy-txt); } .owari-lic-form label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .owari-lic-fila { display: flex; gap: 10px; flex-wrap: wrap; } .owari-lic-fila input[type="text"] { flex: 1; min-width: 200px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); border-radius: 999px; padding: 11px 18px; font-family: 'Montserrat', sans-serif; font-size: 14px; } .owari-lic-fila input[type="text"]:focus { outline: none; border-color:var(--cy-txt); box-shadow: 0 0 0 2px rgba(0, 181, 212, .3); } @media (max-width: 560px) { .owari-lic-top { flex-direction: column; } } /* ── Datos de facturación dentro de «Detalles de la cuenta» ── */ .owari-fact { margin: 26px 0 0; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; } .owari-fact legend { padding: 0 8px; font-weight: 700; font-size: 17px; } /* Los nativo, cuya lista dibuja el sistema operativo y NO se puede estilar por CSS. El del sitio usa este componente: `assets/js/main.js` lo aplica a todos, sin listas de excepciones por página. El desplegable nativo lo dibuja el sistema operativo y no se puede estilar, así que se construye uno propio y el vecinos. La clase la pone el JS al detectar que el : igualarlo hace que el botón mida exactamente lo mismo que un campo de texto vecino. */ --sel-texto: 13.3333px; --sel-peso: 400; display: block; width: 100%; min-width: 0; } /* Checkout de bloques: ahí la etiqueta NO va encima del campo, flota DENTRO encogida, y el campo reserva 24px arriba para ella. Sin este hueco el valor se monta sobre la etiqueta. Medidas idénticas a un campo de texto del bloque. */ .owari-en-bloque .owari-select { --sel-relleno: 24px 9px 8px; --sel-texto: 16px; /* line-height 1 deja el alto exacto del campo nativo (50px); con el normal del navegador se iba 3px por encima y las filas quedaban desiguales. */ --sel-alto-linea: 1; } .owari-en-bloque .owari-select-btn { align-items: flex-end; } /* La etiqueta se encoge sola cuando el