/* ============ RV Tools – Sistema de diseño base ============ */ /* Tokens (ajústalos a la paleta Ruz Visual) */ :root{ /* Neutros */ --rv-canvas: #f6f7f9; /* fondo general: pon #ffffff si quieres 100% blanco */ --rv-surface: #ffffff; /* “cuadro” de la herramienta */ --rv-border: #e6e8eb; --rv-shadow: 0 8px 24px rgba(16,24,40,.06); /* Texto */ --rv-text: #0f172a; /* gris casi negro */ --rv-text-soft: #475569; /* Marca / acentos (ajusta a Ruz Visual) */ --rv-brand: #19b5a6; /* acento (verde/agua en tus capturas) */ --rv-brand-600: #129b8f; --rv-brand-50: #e9f7f5; /* Estados */ --rv-success: #16a34a; --rv-warning: #f59e0b; --rv-danger: #ef4444; /* Footer */ --rv-footer-bg: #0b0b0b; --rv-footer-text: #e5e7eb; /* Ritmo espacial */ --rv-r1: .25rem; /* 4px */ --rv-r2: .5rem; /* 8px */ --rv-r3: .75rem; /* 12px */ --rv-r4: 1rem; /* 16px */ --rv-r6: 1.5rem; /* 24px */ --rv-r8: 2rem; /* 32px */ --rv-radius: 16px; } /* Variantes rápidas (elige una en ) */ .theme-gray-canvas{ --rv-canvas:#f6f7f9; } .theme-white-canvas{ --rv-canvas:#ffffff; } /* Reset mínimo + tipografía */ *{ box-sizing:border-box } html{ scroll-behavior:smooth } body{ margin:0; color:var(--rv-text); background:var(--rv-canvas); font: 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,Inter,Ubuntu,sans-serif; } /* Contenedores */ .rv-container{ width: min(1100px, 100% - 2rem); margin-inline: auto; } /* Cabeceras de página herramienta */ .rv-page-head{ padding: clamp(1rem, 2vw + .5rem, 2rem) 0 clamp(.5rem, 1.2vw, 1rem) 0; } .rv-breadcrumb{ color:var(--rv-text-soft); font-size:.9375rem; } .rv-title{ margin: .25rem 0 0; font-size: clamp(1.6rem, 2.4vw + .6rem, 2.4rem); letter-spacing:-.02em; font-weight:800; } .rv-subtitle{ color:var(--rv-text-soft); max-width:70ch } /* Shell de herramienta (el “cuadro blanco”) */ .rv-tool{ background:var(--rv-surface); border:1px solid var(--rv-border); border-radius: var(--rv-radius); box-shadow: var(--rv-shadow); padding: clamp(1rem, 2vw, 1.5rem); margin: 1rem 0 2rem; } /* Layout 2 columnas (opciones / resultados); colapsa en móvil */ .rv-grid{ display:grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; /* móvil */ } @media (min-width: 960px){ .rv-grid{ grid-template-columns: 1fr 1fr; align-items:start; } } /* Tarjeta simple reutilizable */ .rv-card{ background:var(--rv-surface); border:1px solid var(--rv-border); border-radius: var(--rv-radius); padding: var(--rv-r6); box-shadow: var(--rv-shadow); } /* Formularios */ label{ font-weight:600; margin-bottom:.35rem; display:block } .rv-field{ margin-bottom: var(--rv-r6); } input[type="text"], input[type="number"], input[type="email"], input[type="url"], textarea, select{ width:100%; padding:.65rem .8rem; border-radius:12px; border:1px solid var(--rv-border); background:#fff; color:var(--rv-text); outline:0; transition:.2s border-color, .2s box-shadow; } input:focus, textarea:focus, select:focus{ border-color: var(--rv-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rv-brand) 20%, transparent); } /* Range estilizado básico */ input[type="range"]{ width:100%; } /* Checks */ .rv-check{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0 } .rv-check input{ transform: translateY(1px) } /* Botones */ .rv-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; text-decoration:none; user-select:none; } .rv-btn:disabled{ opacity:.6; cursor:not-allowed } .rv-btn--primary{ background:var(--rv-brand); color:#fff; border-color: var(--rv-brand-600); } .rv-btn--ghost{ background:transparent; color:var(--rv-brand); border-color: var(--rv-brand-600); } /* Result box / salida */ .rv-output{ display:flex; gap:.5rem; align-items:center; } .rv-output input{ flex:1 } .rv-hint{ font-size:.9rem; color:var(--rv-text-soft) } /* Alertas */ .rv-alert{ border-radius:12px; padding:.75rem 1rem; border:1px solid; background:#fff; } .rv-alert--ok{ border-color: color-mix(in srgb, var(--rv-success) 40%, #fff); } .rv-alert--warn{ border-color: color-mix(in srgb, var(--rv-warning) 40%, #fff); } .rv-alert--error{ border-color: color-mix(in srgb, var(--rv-danger) 40%, #fff); } /* Footer negro unificado */ .rv-footer{ margin-top: 3rem; color:var(--rv-footer-text); background:var(--rv-footer-bg); padding: 2rem 0; } .rv-footer .rv-container{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between } .rv-footer a{ color:var(--rv-footer-text); text-decoration:none } .rv-footer a:hover{ text-decoration:underline } /* Utilidades */ .mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 } .mt-2{ margin-top:.5rem } .mb-2{ margin-bottom:.5rem } .mt-4{ margin-top:1rem } .mb-4{ margin-bottom:1rem } .text-soft{ color:var(--rv-text-soft) } .center{ display:grid; place-items:center } /* ——— Específicos reutilizables ——— */ .monospace{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace } .pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; background:var(--rv-brand-50); color:var(--rv-brand); font-weight:700; font-size:.8rem } .rv-tool-head{ margin-bottom: var(--rv-r6); padding-bottom: var(--rv-r4); border-bottom:1px solid var(--rv-border) } .rv-tool-body{ /* reservado para futuras extensiones */ } /* Ads */ .rv-ads { margin: 24px 0; } .rv-ads--leader .adsbygoogle { min-height: 280px; } .rv-ads--sidebar .adsbygoogle { min-height: 250px; } @media (max-width: 959px){ .rv-ads--leader .adsbygoogle, .rv-ads--sidebar .adsbygoogle { min-height: 200px; } } /* --- Accesibilidad y micro-detalles --- */ /* 1) Anillo de enfoque visible y consistente */ :focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-brand) 25%, transparent); border-radius: 12px; } .rv-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-brand) 35%, transparent); } /* 2) Preferencia de usuarios que reducen animaciones */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* 3) Estados hover/active para botones (mejor feedback) */ .rv-btn--primary:hover { filter: brightness(0.98); } .rv-btn--primary:active { transform: translateY(1px); } .rv-btn--ghost:hover { background: var(--rv-brand-50); } .rv-btn--ghost:active { transform: translateY(1px); } /* 4) Inputs: altura mínima y fuente monoespaciada opcional para outputs */ input, select, textarea { min-height: 40px; } .monospace { font-size: .95rem; } /* 5) Slider básico cross-browser */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--rv-border); border-radius: 999px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--rv-brand); border: 2px solid var(--rv-surface); box-shadow: var(--rv-shadow); } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--rv-brand); border: 2px solid var(--rv-surface); } /* 6) Cards de preview: aseguran altura mínima para evitar saltos */ .rv-card.center { min-height: 220px; } /* 7) Ads: asegura display y centrado del contenedor */ .rv-ads .adsbygoogle { display: block !important; width: 100%; } /* 8) Utilidad “sr-only” por si la necesitas para textos accesibles */ .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; } /* ===== Mobile polish ===== */ @media (max-width: 960px){ .rv-tool{ margin: .75rem 0 1.25rem; } .rv-card{ padding: 1rem; } .rv-title{ line-height: 1.15; } .rv-subtitle{ font-size: 1rem; } .rv-field{ margin-bottom: 1rem; } /* Targets cómodos */ input, select, textarea, .rv-btn{ min-height: 44px; } /* Botones principales a ancho completo por defecto */ .rv-btn{ width: 100%; justify-content: center; } .rv-output{ flex-wrap: wrap; } .rv-output input{ flex: 1 1 100%; } .rv-output a{ width: 100%; text-align: center; } } /* Teléfonos compactos */ @media (max-width: 380px){ .rv-title{ font-size: clamp(1.45rem, 5.5vw + .5rem, 1.9rem); } } /* ====== Sections reutilizables (bajo la herramienta) ====== */ .rv-section{ background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); box-shadow: var(--rv-shadow); padding: 1.25rem; margin: 1rem 0 2rem; } .rv-section h2{ text-align:center; font-size: clamp(22px, 1.8vw, 28px); margin: .25rem 0 1rem; } /* “¿Por qué usar…?” */ .rv-why-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } .rv-why-card{ background:#fff; border:1px solid var(--rv-border); border-radius:14px; padding:1rem; box-shadow: var(--rv-shadow); } /* “Cómo funciona” (3 pasos) */ .rv-steps{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } .rv-step{ background:#fff; border:1px solid var(--rv-border); border-radius:14px; padding:1rem; box-shadow: var(--rv-shadow); } .rv-step > span{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background: var(--rv-brand-50); color: var(--rv-brand); font-weight:700; margin-bottom:.5rem; } /* Detalles Entrada/Salida */ .rv-details .rv-detail-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); } .rv-detail-card{ background:#fff; border:1px solid var(--rv-border); border-radius:12px; padding:.75rem .9rem; box-shadow: var(--rv-shadow); } /* FAQ estilo conversor */ .rv-faq{ margin-top: 1.25rem; padding: 1.25rem; border-radius: 16px; background: #fff; box-shadow: var(--rv-shadow); } .rv-faq > h2{ text-align:center; font-size:clamp(22px,1.8vw,28px); margin: 4px 0 14px; } .rv-faq details{ border:1px solid var(--rv-border); border-radius:12px; background:#fff; margin:10px 0; overflow:hidden; } .rv-faq details[open]{ box-shadow:0 8px 20px rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); } .rv-faq summary{ cursor:pointer; padding:16px 18px; list-style:none; position:relative; font-weight:700; } .rv-faq summary::-webkit-details-marker{ display:none; } .rv-faq summary::after{ content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(0deg); width:20px; height:20px; opacity:.8; transition:transform .25s ease; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .rv-faq details[open] > summary::after{ transform:translateY(-50%) rotate(180deg); } .rv-faq details > p{ padding: 0 18px 16px; margin:0; color:#4b5563; line-height:1.6; } /* Uploader + previews (para todas las tools) */ .rv-uploader{ border:2px dashed rgba(0,0,0,.08); padding:18px; border-radius:14px; text-align:center; background:#fff; } .rv-uploader.is-drag{ border-color: var(--rv-brand); background:#f6fffb; } .rv-preview img{ max-width:100%; height:auto; display:block; object-fit:contain; border-radius:10px; background: repeating-conic-gradient(#f6f7f9 0 25%, #eef1f4 0 50%) 50% / 20px 20px; } /* Ads: alias por compatibilidad */ .rv-ads--side{ /* alias para páginas viejas; usa --sidebar como canonical */ /* ninguna diferencia visual, solo para que no “salte” */ }