/* ══════════════════════════════════════════════════════════════════════
   LAS PÁGINAS DE LA EMPRESA — lo que comparten
   ══════════════════════════════════════════════════════════════════════

   `/quienes-somos` y `/contacto`. Las dos van con `layout('flush')` --la
   cabecera y el pie del sitio, el cuerpo a sangre-- y comparten el héroe con
   foto, los botones, el rótulo de sección y el antetítulo. Esta hoja viaja con
   las dos (`CompanyPagesController::page()` añade este módulo); lo específico
   de cada una está en la suya.

   Raíz `.cp`. Los tonos son los de `/comprar` (`TLandingBuyer.css`, `--lpb-*`),
   que es la otra página a sangre con la cabecera del sitio: la misma web, no
   otra paleta. Muestreados de la maqueta dan los mismos verdes con el ruido de
   una imagen generada.

   ── CANDIDATOS A LA HOJA COMÚN DEL ÁREA PÚBLICA ──────────────────────

   `.cp-btn` es `.lpb-btn` con otro nombre, y `.cp-heroe` es `.lpb-heroe` con
   la foto como variable. Se extraen juntos cuando el área pública tenga su
   hoja, no antes (ver CLAUDE.md, «Área de cliente: la hoja común está
   PENDIENTE»). */

.cp{
    --cp-verde:        #1e7a3c;
    --cp-verde-vivo:   #3fb95e;
    --cp-verde-oscuro: #15582b;
    --cp-verde-claro:  #eef6ec;
    --cp-tinta:        #16261a;
    --cp-texto:        #3f4a43;
    --cp-suave:        #5d6f62;
    --cp-borde:        #e1e8e2;
    --cp-crema:        #f7f9f5;
    --cp-arena:        #f8f3e6;   /* la tarjeta del comprador profesional */
    --cp-noche:        #173e2c;   /* la tarjeta de ubicación */
    --cp-radio:        12px;

    background: #fdfcf8;
    color: var(--cp-tinta);
    font-size: 15px;
    line-height: 1.6;
}

.cp *{ box-sizing: border-box; }
.cp img{ max-width: 100%; display: block; }

/* LOS ENLACES DEL SITIO LLEVAN BORDE INFERIOR --y otro en `:visited`-- desde
   la hoja global. Aquí ninguno lo quiere. */
.cp a,
.cp a:visited{ border: 0; text-decoration: none; }

/* EL CARRIL DEL SITIO: el contenido arranca en la misma vertical que el logo
   de la cabecera. Mismo patrón y mismo respaldo que `.lpb-ancho`. */
.cp .cp-ancho{
    max-width: var(--site-carril, 1200px);
    margin-left: var(--site-carril-izq, auto);
    margin-right: auto;
    padding: 0 16px;
}

/* ── LOS BOTONES ──────────────────────────────────────────────────────
   `:visited` declarado en cada variante: la hoja global pinta de otro color
   cualquier enlace visitado, y `getComputedStyle` no lo delata. */
.cp .cp-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    border: 1.5px solid transparent; border-radius: 8px;
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.cp .cp-btn iconify-icon{ font-size: 17px; }
.cp .cp-btn span{ color: inherit; }   /* `a span{color:…}` de la hoja global */

.cp .cp-btn--verde,
.cp .cp-btn--verde:visited{ background: var(--cp-verde); border-color: var(--cp-verde); color: #fff; }
.cp .cp-btn--verde:hover{ background: var(--cp-verde-oscuro); border-color: var(--cp-verde-oscuro); color: #fff; }

.cp .cp-btn--linea,
.cp .cp-btn--linea:visited{ background: #fff; border-color: var(--cp-verde); color: var(--cp-verde); }
.cp .cp-btn--linea:hover{ background: var(--cp-verde-claro); color: var(--cp-verde-oscuro); }

/* Sobre foto o fondo oscuro: el blanco macizo y el de línea blanca. */
.cp .cp-btn--blanco,
.cp .cp-btn--blanco:visited{ background: #fff; border-color: #fff; color: var(--cp-tinta); }
.cp .cp-btn--blanco:hover{ background: var(--cp-crema); color: var(--cp-tinta); }
.cp .cp-btn--linea-blanca,
.cp .cp-btn--linea-blanca:visited{ background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.cp .cp-btn--linea-blanca:hover{ background: rgba(255,255,255,.1); color: #fff; }

/* FOCO VISIBLE (WCAG 2.1 AA): la hoja global lo quita de los enlaces. */
.cp a:focus-visible,
.cp button:focus-visible,
.cp input:focus-visible,
.cp select:focus-visible,
.cp textarea:focus-visible{ outline: 3px solid var(--cp-verde-vivo); outline-offset: 2px; }

/* ── EL ANTETÍTULO Y EL RÓTULO DE SECCIÓN ─────────────────────────────
   Rótulo en tinta con la palabra destacada en verde (`<em>`), como la
   maqueta: «Nuestra historia», «Nuestros valores». */
.cp .cp-antetitulo{
    display: block; margin: 0 0 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: var(--cp-verde);
}
.cp .cp-rotulo{
    margin: 0 0 16px;
    font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.18; letter-spacing: -.6px;
    color: var(--cp-tinta); text-align: left;
}
.cp .cp-rotulo em{ font-style: normal; color: var(--cp-verde); }

.cp .cp-seccion{ padding: 56px 0; }
.cp .cp-seccion--crema{ background: var(--cp-crema); border-top: 1px solid var(--cp-borde); border-bottom: 1px solid var(--cp-borde); }

/* ── SIN DATOS TODAVÍA ────────────────────────────────────────────────
   El mismo estado vacío de `/para-tu-negocio` (`.cn-sin-opiniones`): icono en
   su círculo, rótulo y mensaje en un recuadro discontinuo. Una sección sin
   datos se enseña así, nunca con datos inventados. */
.cp .cp-vacio{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 34px 20px 30px;
    background: var(--cp-crema);
    border: 1px dashed #d3e7cf; border-radius: var(--cp-radio);
}
.cp .cp-vacio-icono{
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 6px;
    border-radius: 50%; background: #fff; border: 1px solid #d3e7cf;
}
.cp .cp-vacio-icono iconify-icon{ font-size: 24px; color: var(--cp-verde); }
.cp .cp-vacio b{ font-size: 15px; font-weight: 800; color: var(--cp-tinta); }
.cp .cp-vacio p{ margin: 2px 0 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--cp-suave); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   EL HÉROE
   ═══════════════════════════════════════════════════════════════════════

   La foto la pone cada página con `--cp-heroe-foto` en su propia hoja: el
   marcado y el velo son los mismos. El velo cae por la IZQUIERDA, donde va el
   texto, y deja limpia la figura de la derecha. */
.cp .cp-heroe{
    position: relative;
    display: flex; align-items: center;
    min-height: 500px;
    padding: 64px 0;

    background-color: #0c2416;
    background-image:
        linear-gradient(95deg,
            rgba(8,28,16,.86) 0%,
            rgba(8,28,16,.72) 32%,
            rgba(8,28,16,.28) 58%,
            rgba(8,28,16,0)   78%),
        var(--cp-heroe-foto, none);
    background-size: auto, cover;
    background-position: center, center right;
    background-repeat: no-repeat;
}

.cp .cp-heroe-txt{ position: relative; z-index: 1; width: 100%; }
.cp .cp-heroe-txt > *{ max-width: 600px; }

.cp .cp-heroe h1{
    margin: 0 0 10px;
    font-size: clamp(38px, 5vw, 62px); font-weight: 800; line-height: 1.04; letter-spacing: -1.6px;
    color: #fff; text-align: left;
}
.cp .cp-heroe-sub{
    margin: 0 0 18px;
    font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.4px;
    color: #fff;   /* `p{color:#000}` de la hoja global */
}
.cp .cp-heroe-lead{
    margin: 0;
    font-size: 16.5px; line-height: 1.6;
    color: rgba(255,255,255,.92);
}

@media (max-width: 720px){
    .cp .cp-heroe{
        min-height: 0; padding: 48px 0 44px;
        background-image:
            linear-gradient(180deg, rgba(8,28,16,.86) 0%, rgba(8,28,16,.78) 100%),
            var(--cp-heroe-foto, none);
    }
    .cp .cp-seccion{ padding: 40px 0; }
}



/* ══════════════════════════════════════════════════════════════════════
   CONTACTO — /contacto
   ══════════════════════════════════════════════════════════════════════

   Solo lo de esta página. El héroe, los botones, el rótulo de sección y los
   tokens `--cp-*` vienen de `TCompanyPage.css`.

   Los campos son los de `.pg-campo` (`TPlataforma.css`, el formulario de
   `/ayuda`) con otro nombre: esta página no carga esa hoja, que cuelga de
   `.lp`. Candidato a la hoja común del área pública junto con `.cp-btn`. */

.cp-contact{ --cp-heroe-foto: url('/assets/empresa/contacto.jpg'); }

/* ── FORMULARIO Y CANALES ─────────────────────────────────────────── */
.cp-contact .cp-contact-fila{
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 56px; align-items: start;
}
.cp-contact .cp-contact-tit{ font-size: clamp(21px, 2vw, 25px); margin-bottom: 18px; }

.cp-contact .cp-contact-form{ display: grid; gap: 16px; }
.cp-contact .cp-contact-par{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cp-contact .cp-campo label{
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--cp-tinta);
}
.cp-contact .cp-campo abbr{ text-decoration: none; border: 0; color: var(--cp-verde); }

/* EL ALTO, DICHO: la hoja global aplasta inputs y selects a 25px dentro de
   los componentes. */
.cp-contact .cp-campo input,
.cp-contact .cp-campo select,
.cp-contact .cp-campo textarea{
    width: 100%; min-height: 44px; margin: 0;
    padding: 10px 13px;
    background: #fff; border: 1px solid #d9e0dc; border-radius: 8px;
    font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--cp-tinta);
    transition: border-color .15s, box-shadow .15s;
}
.cp-contact .cp-campo textarea{ min-height: 110px; resize: vertical; }
.cp-contact .cp-campo input::placeholder,
.cp-contact .cp-campo textarea::placeholder{ color: #8a978f; }
.cp-contact .cp-campo input:focus,
.cp-contact .cp-campo select:focus,
.cp-contact .cp-campo textarea:focus{
    border-color: var(--cp-verde); box-shadow: 0 0 0 3px var(--cp-verde-claro); outline: none;
}
/* El campo que falta, marcado: el rótulo del aviso dice cuál, y el borde dónde. */
.cp-contact .cp-campo .es-error,
.cp-contact .cp-campo .es-error:focus{ border-color: #c0392b; box-shadow: 0 0 0 3px #fbe9e7; }

.cp-contact .cp-contact-enviar{ width: 100%; min-height: 46px; }
.cp-contact .cp-contact-enviar[disabled]{ opacity: .6; cursor: progress; }

.cp-contact .cp-contact-aviso{
    margin: 0; padding: 11px 14px; border-radius: 8px;
    font-size: 13.5px; line-height: 1.5;
}
.cp-contact .cp-contact-aviso.es-bien{ background: var(--cp-verde-claro); color: var(--cp-verde-oscuro); border: 1px solid #d3e7cf; }
.cp-contact .cp-contact-aviso.es-mal{ background: #fdf0ee; color: #9b2c1f; border: 1px solid #f3cfc9; }

.cp-contact .cp-contact-legal{ display: block; font-size: 12px; line-height: 1.5; color: var(--cp-suave); }
.cp-contact .cp-contact-legal a,
.cp-contact .cp-contact-legal a:visited{ color: var(--cp-verde); text-decoration: underline; }

/* LOS CANALES: icono en su columna y TODO el texto en la segunda --rótulo,
   valor y nota arrancan en la misma vertical--. */
.cp-contact .cp-contact-canales ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.cp-contact .cp-contact-canal{ display: flex; gap: 14px; align-items: flex-start; }
.cp-contact .cp-contact-canal > iconify-icon{ flex: 0 0 auto; font-size: 26px; color: var(--cp-verde); margin-top: 1px; }
.cp-contact .cp-contact-canal > div{ flex: 1; min-width: 0; }
.cp-contact .cp-contact-canal b{ display: block; font-size: 14.5px; font-weight: 800; color: var(--cp-tinta); }
.cp-contact .cp-contact-canal a,
.cp-contact .cp-contact-canal a:visited{
    display: inline-block; font-size: 14.5px; font-weight: 700; color: var(--cp-verde);
    overflow-wrap: anywhere;
}
.cp-contact .cp-contact-canal a:hover{ color: var(--cp-verde-oscuro); text-decoration: underline; }
.cp-contact .cp-contact-canal span{ display: block; font-size: 14.5px; color: var(--cp-tinta); }
.cp-contact .cp-contact-canal small{ display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--cp-suave); }

/* ── LAS DOS PUERTAS ──────────────────────────────────────────────── */
.cp-contact .cp-contact-puertas{ padding: 0 0 48px; }
.cp-contact .cp-contact-puertas-fila{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.cp-contact .cp-contact-puerta{
    display: flex; gap: 18px; align-items: flex-start;
    padding: 24px 26px;
    border: 1px solid var(--cp-borde); border-radius: var(--cp-radio);
}
.cp-contact .cp-contact-puerta--agricultor{ background: var(--cp-crema); }
.cp-contact .cp-contact-puerta--comprador{ background: var(--cp-arena); border-color: #ece3cc; }

.cp-contact .cp-contact-puerta > iconify-icon{ flex: 0 0 auto; font-size: 36px; color: var(--cp-verde); }
.cp-contact .cp-contact-puerta--comprador > iconify-icon{ color: #8a5a1c; }
.cp-contact .cp-contact-puerta > div{ flex: 1; min-width: 0; }
.cp-contact .cp-contact-puerta h2{ margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--cp-tinta); text-align: left; }
.cp-contact .cp-contact-puerta p{ margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--cp-texto); }

/* El botón del comprador, en el tono de su tarjeta. Sobre el arena, el verde
   parecía de otra pieza. Contraste #8a5a1c sobre blanco: 5,9:1 (AA). */
.cp-contact .cp-btn--arena,
.cp-contact .cp-btn--arena:visited{ border-color: #8a5a1c; color: #8a5a1c; }
.cp-contact .cp-btn--arena:hover{ background: #fbf6ea; color: #6d4513; }

/* ── NUESTRA UBICACIÓN ────────────────────────────────────────────────
   La costa a sangre y la tarjeta verde oscura encima, a la izquierda. */
.cp-contact .cp-contact-ubicacion{
    padding: 56px 0;
    background: #0f2a1d url('/assets/sellers/portada-verano.jpg') center 60% / cover no-repeat;
}
.cp-contact .cp-contact-ubicacion-tarjeta{
    display: flex; gap: 16px; align-items: flex-start;
    max-width: 440px; padding: 24px 26px;
    background: rgba(23, 62, 44, .94); border-radius: var(--cp-radio);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}
.cp-contact .cp-contact-ubicacion-tarjeta > iconify-icon{ flex: 0 0 auto; font-size: 30px; color: #fff; margin-top: 2px; }
.cp-contact .cp-contact-ubicacion-tarjeta > div{ flex: 1; min-width: 0; }
.cp-contact .cp-contact-ubicacion .cp-antetitulo{ color: rgba(255,255,255,.8); }
.cp-contact .cp-contact-ubicacion h2{ margin: 0 0 10px; font-size: 22px; font-weight: 800; color: #fff; text-align: left; }
.cp-contact .cp-contact-ubicacion p{ margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.88); }

/* ── CUANDO NO CABE ───────────────────────────────────────────────── */
@media (max-width: 900px){
    .cp-contact .cp-contact-fila,
    .cp-contact .cp-contact-puertas-fila{ grid-template-columns: 1fr; gap: 36px; }
    .cp-contact .cp-contact-puertas-fila{ gap: 16px; }
}
@media (max-width: 560px){
    .cp-contact .cp-contact-par{ grid-template-columns: 1fr; }
    .cp-contact .cp-contact-puerta{ padding: 20px; }
    .cp-contact .cp-contact-ubicacion{ padding: 36px 0; }
}



/* ══════════════════════════════════════════════════════════════════════
   TContentReportForm — «Denunciar contenido»

   Esta hoja VIAJA CON TODA PÁGINA (pageComponents), y por eso el botón se
   define aquí: lo ponen la ficha de producto, el perfil del vendedor y cada
   valoración, y así los tres se ven igual sin que ninguno lo redefina.

   ── DISCRETO, PERO ACCESIBLE ─────────────────────────────────────────
   Es una opción que casi nadie usa y que no puede competir con «Añadir a la
   cesta»: texto pequeño, sin fondo ni borde. Pero el gris cumple AA
   (#556259 sobre blanco, 6,3:1) y el foco se ve.

   ── LA CLASE DOBLADA ─────────────────────────────────────────────────
   `.TComponentES6 button` impone display:flex y 25px de alto a todo botón
   dentro de un componente, y la hoja de la ficha arrastra reglas globales
   sobre `button`: con `button.crf-boton.crf-boton` se gana sin depender del
   orden de carga.

   Candidato a la hoja común del área pública cuando se extraiga.
   ══════════════════════════════════════════════════════════════════════ */

button.crf-boton.crf-boton{
    display: inline-flex; align-items: center; gap: 5px;
    height: auto; min-height: 0; width: auto;
    margin: 0; padding: 4px 2px;
    background: none; border: 0; border-radius: 4px; box-shadow: none;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
    color: #556259; cursor: pointer;
    text-decoration: none;
}
button.crf-boton.crf-boton:hover{ color: #9b1c14; text-decoration: underline; }
button.crf-boton.crf-boton:focus-visible{ outline: 2px solid #04713a; outline-offset: 2px; }
button.crf-boton.crf-boton iconify-icon{ font-size: 13px; flex: 0 0 auto; }

/* La fila que lo coloca al final de un bloque, alineado a la derecha. */
.crf-fila{ display: flex; justify-content: flex-end; margin-top: 10px; }

/* La variante de la página /denunciar-contenido: aquí SÍ es la acción principal. */
button.crf-boton.crf-boton--principal{
    padding: 10px 18px; border-radius: 8px;
    background: #04713a; color: #fff; font-size: 14px;
}
button.crf-boton.crf-boton--principal:hover{ background: #005c2d; color: #fff; text-decoration: none; }
button.crf-boton.crf-boton--principal iconify-icon{ font-size: 16px; }

/* ── LA PÁGINA ───────────────────────────────────────────────────────── */

.crf [hidden]{ display: none !important; }

.crf .crf-pagina{
    max-width: 880px; margin: 34px auto; padding: 0 16px;
    color: #16211a; font-size: 14px;
}

.crf .crf-cab{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.crf .crf-cab-ico{
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #eef6ee; color: #04713a;
}
.crf .crf-cab-ico iconify-icon{ font-size: 24px; }
.crf .crf-cab-txt{ flex: 1; min-width: 0; }
.crf .crf-cab-txt h1{ margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.crf .crf-cab-txt p{ margin: 0; color: #4a564e; line-height: 1.5; font-size: 14px; }

.crf .crf-pasos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.crf .crf-paso{
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px; border: 1px solid #e3e9e4; border-radius: 12px; background: #fff;
}
.crf .crf-paso-ico{ flex: 0 0 auto; color: #04713a; }
.crf .crf-paso-ico iconify-icon{ font-size: 20px; }
.crf .crf-paso > div{ flex: 1; min-width: 0; }
.crf .crf-paso b{ display: block; margin-bottom: 4px; font-size: 14px; }
.crf .crf-paso small{ display: block; color: #4a564e; font-size: 13px; line-height: 1.45; }

.crf .crf-accion{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.crf .crf-accion small{ color: #4a564e; font-size: 12px; }
.crf .crf-accion a{ color: #04713a; }

/* ── EL FORMULARIO ──────────────────────────────────────────────────────
   `rows` no pinta nada: una regla global le fija 22px a todo textarea y la de
   los controles un min-height de 60px. La altura se pide por clase. */
.crf-explicacion textarea,
textarea.crf-explicacion{ min-height: 120px !important; height: 120px !important; }

p.crf-nota{
    margin: 4px 0 0; padding: 9px 11px; border-radius: 8px;
    background: #f3f6f4; color: #3f4a43; font-size: 12.5px; line-height: 1.45;
}

/* ── EL ACUSE ───────────────────────────────────────────────────────── */

.crf-acuse{ max-width: 520px; padding: 4px 2px; color: #16211a; font-size: 14px; }
.crf-acuse .crf-acuse-fila{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.crf-acuse .crf-acuse-ico{ flex: 0 0 auto; color: #04713a; }
.crf-acuse .crf-acuse-ico iconify-icon{ font-size: 26px; }
.crf-acuse .crf-acuse-txt{ flex: 1; min-width: 0; }
.crf-acuse .crf-acuse-txt b{ display: block; font-size: 16px; margin-bottom: 3px; }
.crf-acuse .crf-acuse-txt small{ display: block; font-size: 13px; color: #4a564e; }
.crf-acuse p{ margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.crf-acuse .crf-acuse-pie{ display: flex; justify-content: flex-end; margin-top: 14px; }



/* ═══════════════════════════════════════════════════════════════════════════
 *  RECUPERAR LA CONTRASEÑA — la ficha dentro de la ventana
 *
 *  Copia la ficha de la pantalla (`TRegisterQuick`, `.rqk-solo-form`): el
 *  logotipo a 44 px, el título de 26 px, el campo de 11 px de radio con el
 *  verde de foco y el botón verde a todo lo ancho. CANDIDATO A LA HOJA COMÚN
 *  del área pública, junto con aquella: hoy son dos copias de los mismos
 *  valores (tokens `--rq-*` allí, `--fgp-*` aquí).
 * ═══════════════════════════════════════════════════════════════════════════ */

.fgp{
    --fgp-verde:        #2d6a2f;
    --fgp-verde-vivo:   #3f8f43;
    --fgp-verde-oscuro: #14532d;
    --fgp-verde-borde:  #dbe8d6;
    --fgp-verde-caja:   #f5faf3;
    --fgp-texto: #14261a;
    --fgp-suave: #5b6b60;
    --fgp-tenue: #93a399;

    padding: 18px 28px 26px;
    color: var(--fgp-texto);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.fgp .fgp-marca{ display: block; height: 44px; width: auto; margin: 0 0 22px; }

.fgp .fgp-titulo{
    margin: 0 0 5px;
    font-size: 26px; font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: #07090d;
}

.fgp .fgp-sub{ margin: 0 0 14px; font-size: 13px; color: var(--fgp-suave); }

/* `!important` COMO EN `.rqk-campo`: una regla global del sitio pone los
   `label` en fila con `!important`, y sin esto el rótulo y el campo salían
   uno al lado del otro y el campo a media anchura (medido: 225 de 400 px). */
.fgp .fgp-campo{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px;
    margin: 0 0 14px;
}

.fgp .fgp-rotulo{ align-self: stretch; font-size: 12px; font-weight: 600; }

.fgp .fgp-con-ico{ position: relative; display: block; width: 100%; }
.fgp .fgp-con-ico > iconify-icon{
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 15px; color: var(--fgp-tenue);
    pointer-events: none;
}

.fgp .fgp-con-ico input{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 12px 14px 12px 38px;
    border: 1px solid #dbe4dd;
    border-radius: 11px;
    background: #fff;
    font-size: 13px; font-family: inherit;
    color: var(--fgp-texto);
}
.fgp .fgp-con-ico input::placeholder{ color: var(--fgp-tenue); }
.fgp .fgp-con-ico input:focus{
    outline: none;
    border-color: var(--fgp-verde-vivo);
    box-shadow: 0 0 0 3px rgba(63,143,67,.12);
}

.fgp .fgp-error{ display: none; font-size: 11px; color: #b91c1c; font-style: normal; }
.fgp .fgp-campo.mal input{ border-color: #f87171; background: #fef2f2; }
.fgp .fgp-campo.mal .fgp-error{ display: block; }

/* EL BOTÓN, EL DE LA FICHA (`.rqk-btn-crear`). `height:auto` porque la regla
   global `.TComponentES6 button{height:25px}` lo aplastaría. */
.fgp .fgp-btn{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: auto;
    padding: 13px;
    border: 0;
    border-radius: 11px;
    background: var(--fgp-verde);
    color: #fff;
    font-size: 14.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.fgp .fgp-btn:hover{ background: var(--fgp-verde-oscuro); }
.fgp .fgp-btn:focus-visible{ outline: 3px solid rgba(63,143,67,.35); outline-offset: 2px; }
.fgp .fgp-btn:disabled{ opacity: .7; cursor: default; }
.fgp .fgp-btn iconify-icon{ font-size: 17px; }

/* EL AVISO: la misma caja verde que el de la pantalla (`.rqk-olv-hecho`). */
.fgp .fgp-hecho{
    display: none;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--fgp-verde-borde);
    background: var(--fgp-verde-caja);
    color: #2f5136;
    font-size: 12.5px; line-height: 1.5;
}
.fgp .fgp-hecho.on{ display: flex; }
.fgp .fgp-hecho > iconify-icon{ flex: 0 0 auto; font-size: 18px; color: var(--fgp-verde-vivo); }
.fgp .fgp-hecho > div{ flex: 1; min-width: 0; }

.fgp .fgp-ya{ margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.fgp .fgp-ya a{ color: var(--fgp-verde); font-weight: 700; text-decoration: underline; }

/* LA VENTANA, CON LAS ESQUINAS DE LA TARJETA de la pantalla (`--rq-radio`,
   30 px; algo menos aquí porque la ventana es más pequeña). Va por la
   `hostClass` que pone `open()`: el overlay vive fuera del árbol de `.fgp`. */
.TOverlayWin.fgp-ventana{ border-radius: 24px; overflow: hidden; }

@media (max-width: 600px){
    .fgp{ padding: 14px 18px 22px; }
    .fgp .fgp-marca{ height: 32px; }
    .fgp .fgp-titulo{ font-size: 22px; }
}