/* ========================================================================== Factura Perú — Sistema de diseño ÚNICO para las herramientas/plugins Origen: rediseño de [calculadora_ganancias] (2026-08-01). Los plugins ya NO llevan estilos propios: se editan SOLO aquí. ⚠️ Todos los selectores llevan el prefijo `body `. NO es decorativo: esta hoja se imprime muy temprano en el y el tema (Astra), Elementor y el Bootstrap que cargan estos plugins vienen DESPUÉS. Con la misma especificidad gana el último, así que sin el prefijo los campos se quedan con el padding del tema y el borde rojo de validación no aparece. Cubre: [domain_checker] [ssl_search] [sunat_product_search] [sunat_unit_measure_search] [facturaperu_guia_pagos] [facturaperu_xml_pdf] ========================================================================== */ :root{ --fp-navy:#00144C; --fp-cyan:#2E9BCA; --fp-cyan-dark:#227FA6; --fp-green:#A5CB1F; --fp-green-rgb:165,203,31; --fp-green-dark:#8FB61A; --fp-text:#1A1A1A; --fp-muted:#5B6B7D; --fp-bg:#F5F6FD; --fp-line:#DEE1F8; --fp-card-line:#E3E9F5; --fp-shadow:0 6px 20px rgba(16,49,80,.06); --fp-font:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; } /* ---------- Tarjeta base ---------- */ body .fp-tool{ box-sizing:border-box; max-width:720px; margin:24px auto; padding:26px 24px; background:#fff; border:1px solid var(--fp-card-line); border-radius:16px; box-shadow:var(--fp-shadow); font-family:var(--fp-font); color:var(--fp-text); text-align:left; } body .fp-tool *, body .fp-tool *::before, body .fp-tool *::after{ box-sizing:border-box; } body .fp-tool h2.fp-tool__title, body .fp-tool .fp-tool__title{ margin:0 0 18px; padding:0 0 12px; border-bottom:2px solid #F0F3FA; color:var(--fp-navy); font-family:var(--fp-font); font-size:20px; font-weight:700; line-height:1.3; letter-spacing:.2px; text-align:left; } body .fp-tool p.fp-tool__hint{ margin:-8px 0 16px; color:var(--fp-muted); font-size:14px; line-height:1.5; } /* ---------- Fila: campo + botón ---------- */ body .fp-tool__row{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin:0; } body .fp-tool__row > input{ flex:1 1 240px; min-width:0; } /* ---------- Campos ---------- */ body .fp-tool input[type="text"], body .fp-tool input[type="email"], body .fp-tool input[type="search"], body .fp-tool input[type="number"], body .fp-tool input[type="tel"], body .fp-tool input[type="date"], body .fp-tool input[type="month"], body .fp-tool .form-control, body .fp-tool select{ width:100%; /* height:auto anula el `height: calc(1.5em + .75rem + 2px)` de Bootstrap, que si no deja unos campos en 38px y otros en 50px. */ height:auto; min-height:0; padding:13px 14px; margin:0; border:1.5px solid var(--fp-line); border-radius:10px; background:#FBFCFE; color:var(--fp-navy); font-family:var(--fp-font); font-size:16px; font-weight:600; line-height:1.3; box-shadow:none; transition:border-color .15s, box-shadow .15s, background .15s; } body .fp-tool input::placeholder{ color:#9AA7B8; font-weight:400; } body .fp-tool input:focus, body .fp-tool select:focus{ outline:none; border-color:var(--fp-cyan); background:#fff; box-shadow:0 0 0 4px rgba(46,155,202,.15); } /* ---------- Botón principal ---------- */ body .fp-tool button, body .fp-tool input[type="submit"]{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:13px 24px; border:none; border-radius:10px; background:linear-gradient(135deg, var(--fp-green) 0%, var(--fp-green-dark) 100%); color:#fff; font-family:var(--fp-font); font-size:16px; font-weight:700; line-height:1.3; letter-spacing:.2px; white-space:nowrap; cursor:pointer; text-shadow:none; box-shadow:0 6px 18px rgba(var(--fp-green-rgb),.28); transition:transform .15s, box-shadow .15s, filter .15s; } body .fp-tool button:hover, body .fp-tool input[type="submit"]:hover{ background:linear-gradient(135deg, var(--fp-green) 0%, var(--fp-green-dark) 100%); color:#fff; transform:translateY(-1px); box-shadow:0 9px 22px rgba(var(--fp-green-rgb),.36); filter:brightness(1.04); } body .fp-tool button:active{ transform:translateY(0); } body .fp-tool button:focus-visible{ outline:3px solid rgba(46,155,202,.45); outline-offset:2px; } /* Icono lupa (SVG embebido: sin peticiones externas) */ body .fp-tool__ico, body .fp-tool button .icon, body .fp-tool button .icon-search{ display:inline-block; flex:0 0 17px; width:17px; height:17px; margin:0; background:url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%23ffffff%22 stroke-width%3D%222.4%22 stroke-linecap%3D%22round%22%3E%3Ccircle cx%3D%2210.5%22 cy%3D%2210.5%22 r%3D%227%22/%3E%3Cpath d%3D%22M15.6 15.6L21 21%22/%3E%3C/svg%3E') no-repeat center; background-size:contain; } /* ---------- Resultado simple (dominio / SSL) ---------- */ body .fp-tool__result{ display:block; margin:18px 0 0; padding:14px 16px; border:1px solid var(--fp-line); border-radius:10px; background:var(--fp-bg); color:var(--fp-navy); font-size:16px; font-weight:500; line-height:1.5; } body .fp-tool__result:empty{ display:none; } body .fp-tool__result strong{ color:inherit; font-weight:700; } body .fp-tool__result.is-ok, body .fp-tool__result.success{ background:#F4FAE4; border-color:#D7E9A6; color:#4A6600; font-weight:600; } body .fp-tool__result.is-bad, body .fp-tool__result.error{ background:#FDF1F1; border-color:#F2C9C9; color:#9E2222; font-weight:600; } body .fp-tool__result.is-loading{ background:var(--fp-bg); border-color:var(--fp-line); color:var(--fp-muted); font-weight:500; } /* ---------- Resultados en lista (SUNAT) ---------- */ body .fp-tool__results{ margin:0; font-family:var(--fp-font); color:var(--fp-text); } body .fp-tool__results:empty{ display:none; } body .fp-tool__results h4, body .fp-tool .fp-tool__results h4{ margin:24px 0 10px; padding:0; color:var(--fp-navy); font-family:var(--fp-font); font-size:16px; font-weight:700; letter-spacing:.2px; } body .fp-tool__results h4:first-child{ margin-top:20px; } body .fp-tool__results ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } body .fp-tool__results li{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:0; padding:12px 14px; border:1px solid var(--fp-line); border-radius:10px; background:var(--fp-bg); color:var(--fp-navy); font-size:15px; line-height:1.45; } body .fp-tool__results li strong{ color:var(--fp-navy); font-weight:700; } /* Coincidencias exactas: se distinguen solo por el fondo verde suave. Sin barra gruesa a la izquierda (borde uniforme de 1px). */ body .fp-tool__list--primary li{ background:#F7FCEC; border:1px solid #DDEDB4; } /* Píldora con el código SUNAT */ body .fp-tool__code{ flex:0 0 auto; padding:6px 12px; border:1.5px solid #CFE3F0; border-radius:999px; background:#fff; color:var(--fp-cyan-dark); font-size:14px; font-weight:800; letter-spacing:.4px; white-space:nowrap; } body .fp-tool__name{ flex:1 1 auto; min-width:0; } /* Fila "vacía" (sin resultados) */ body .fp-tool__results li.fp-tool__empty{ display:block; background:#fff; border:1px dashed var(--fp-line); color:var(--fp-muted); font-size:14px; font-weight:500; } /* ---------- Responsive ---------- */ @media (max-width:600px){ body .fp-tool{ margin:18px auto; padding:20px 16px; border-radius:14px; } body .fp-tool h2.fp-tool__title, body .fp-tool .fp-tool__title{ font-size:18px; margin-bottom:16px; } body .fp-tool__row{ flex-direction:column; } body .fp-tool__row > input, body .fp-tool button{ width:100%; } body .fp-tool__results li{ font-size:14px; padding:11px 12px; } body .fp-tool__code{ font-size:13px; } } /* Estado de carga dentro de los resultados en lista */ body .fp-tool__results > p, body .fp-tool__loading{ margin:20px 0 0; padding:14px 16px; border:1px solid var(--fp-line); border-radius:10px; background:var(--fp-bg); color:var(--fp-muted); font-size:15px; font-weight:500; } /* ========================================================================== CAPA DE ARMONIZACIÓN Plugins con maquetación propia que NO se reestructura. Solo se alinean tipografía, colores corporativos, radios y estilo de campos/botones. No se tocan tamaños ni flujo: sin riesgo de romper el layout. ⚠️ El prefijo `body ` NO es decorativo: estos plugins imprimen su