/* ═══════════════════════════════════════════════════════════════════════════ EL DIRECTORIO DE AGRICULTORES — la hoja común de las dos pantallas ═══════════════════════════════════════════════════════════════════════════ Todo cuelga de `.sd`. Aquí vive lo que las DOS pantallas comparten --la tarjeta del vendedor y sus cuatro tallas, los sellos, las píldoras, el bloque de búsqueda, las cifras, las etiquetas de lo filtrado y la columna de criterios--; lo propio de cada una está en su propio componente. Los verdes están MUESTREADOS del PNG de la maqueta (botón #01753b, «Buscar» #01642c, pie #005c2d), no elegidos a ojo. Y los cuatro colores de medalla, muestreados de las piezas de `/assets/sellers/`: es el mismo dorado del sello el que rodea la tarjeta. CANDIDATO A LA HOJA COMÚN DEL ÁREA DE CLIENTE (ver CLAUDE.md): la tarjeta, las píldoras, la valoración y los botones se repiten ya en TOrderDetail y TReturnOrder con otros valores. Cuando esa hoja se extraiga, esto sube tal cual. ═══════════════════════════════════════════════════════════════════════════ */ .sd{ --sd-verde: #04713a; --sd-verde-vivo: #01753b; --sd-verde-oscuro: #005c2d; --sd-verde-claro: #eef6ee; --sd-verde-borde: #cfe3d2; --sd-tinta: #16211a; --sd-texto: #46514a; --sd-suave: #6b7a70; --sd-tenue: #93a399; --sd-crema: #f7faf6; --sd-borde: #e4eae4; --sd-oro: #e2a812; /* ── LOS COLORES DE LAS MEDALLAS ────────────────────────────── Muestreados de las piezas: el tono dominante de cada escarapela. Con ellos se rodea la tarjeta del vendedor que tiene ese nivel, para que la medalla y su borde sean lo mismo y no dos verdes distintos. */ --sd-m-oro: #d9a51e; --sd-m-plata: #a8adb4; --sd-m-bronce: #c1783a; --sd-m-diamante: #9aa0e8; --sd-radio: 14px; --sd-sombra: 0 2px 10px rgba(20,40,25,.06); color: var(--sd-texto); font-size: 14px; line-height: 1.45; } .sd *{ box-sizing: border-box; } .sd img{ display:block; max-width:100%; } .sd a{ color:inherit; text-decoration:none; } .sd h1,.sd h2,.sd h3,.sd h4{ margin:0; color:var(--sd-tinta); } /* EL TAMAÑO SE DECLARA EN EL ICONO, NO EN SU CAJA: `iconify-icon` no hereda el `font-size` del padre y sin esto todos saldrían al tamaño por defecto. */ .sd iconify-icon{ display:inline-block; vertical-align:-.125em; } /* La hoja global del sitio pinta de negro el borde de cualquier enlace ya visitado (`a:visited`), y estas tarjetas SON enlaces: sin esto, volver a una búsqueda las enseña todas con marco negro. `getComputedStyle` no lo delata. */ .sd a:visited, .sd a:visited *{ border-color: inherit; color: inherit; } /* El contenido recogido a la medida de la página; las franjas van a sangre. */ .sd-ancho{ max-width:1200px; margin:0 auto; padding:0 20px; } /* ═══ BOTONES ══════════════════════════════════════════════════════ */ .sd .sd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border:1px solid transparent; border-radius:9px; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit; transition:background .15s, border-color .15s, color .15s; } .sd .sd-btn-primary{ background:var(--sd-verde); color:#fff; } .sd .sd-btn-primary:hover{ background:var(--sd-verde-oscuro); color:#fff; } .sd .sd-btn-secondary{ background:#fff; color:var(--sd-tinta); border-color:var(--sd-borde); } .sd .sd-btn-secondary:hover{ background:var(--sd-crema); color:var(--sd-tinta); } .sd .sd-btn-blanco{ background:#fff; color:var(--sd-tinta); } .sd .sd-btn-sm{ height:34px; padding:0 14px; font-size:12.5px; } .sd .sd-btn-block{ width:100%; } /* ═══ TÍTULOS DE SECCIÓN ═══════════════════════════════════════════ */ .sd-seccion{ padding:34px 0 0; } .sd-tit{ display:flex; align-items:flex-end; gap:16px; margin-bottom:16px; } .sd-tit-txt{ flex:1; min-width:0; } .sd-tit h2{ font-size:17px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; border-bottom:3px solid var(--sd-verde); display:inline-block; padding-bottom:6px; } .sd-tit p{ margin:8px 0 0; font-size:12.5px; color:var(--sd-suave); } .sd .sd-tit-mas{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--sd-verde); display:inline-flex; align-items:center; gap:6px; } /* ═══ EL BLOQUE DE BÚSQUEDA ════════════════════════════════════════ */ .sd-busca{ background:#fff; border:1px solid var(--sd-borde); border-radius:var(--sd-radio); box-shadow:0 14px 34px rgba(18,40,24,.13); padding:18px; } .sd-busca-fila{ display:flex; gap:12px; } .sd-busca-txt{ flex:1; display:flex; align-items:center; gap:10px; height:48px; border:1px solid var(--sd-borde); border-radius:10px; padding:0 14px; background:#fff; } .sd-busca-txt iconify-icon{ font-size:18px; color:var(--sd-tenue); flex:0 0 auto; } .sd-busca-txt input{ flex:1; min-width:0; border:0; outline:none; font-size:14px; font-family:inherit; color:var(--sd-tinta); background:transparent; } .sd .sd-btn-buscar{ height:48px; padding:0 30px; font-size:14px; background:var(--sd-verde-oscuro); color:#fff; border-radius:10px; } .sd-filtros{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; } .sd-campo{ border:1px solid var(--sd-borde); border-radius:10px; padding:8px 12px 6px; background:#fff; } .sd-campo label{ display:block; font-size:11px; color:var(--sd-suave); } .sd-campo select{ width:100%; border:0; outline:none; background:transparent; font-size:13.5px; font-weight:600; color:var(--sd-tinta); font-family:inherit; padding:2px 0; cursor:pointer; } /* Los dos interruptores. APAGADOS DE SALIDA: encendidos esconden a la mayoría del censo y la primera pantalla del directorio parece vacía. */ .sd-switches{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; } .sd-switch{ display:flex; align-items:center; gap:10px; border:1px solid var(--sd-borde); border-radius:10px; padding:10px 14px; cursor:pointer; background:#fff; } .sd-switch > iconify-icon{ font-size:19px; color:var(--sd-verde); flex:0 0 auto; } .sd-switch-txt{ flex:1; min-width:0; } .sd-switch-txt b{ display:block; font-size:13px; color:var(--sd-tinta); font-weight:600; } .sd-switch-txt small{ display:block; font-size:11px; color:var(--sd-suave); } .sd-palanca{ flex:0 0 auto; width:44px; height:24px; border-radius:99px; background:#d8ded8; position:relative; transition:background .18s; } .sd-palanca::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s; } .sd-switch.on .sd-palanca{ background:var(--sd-verde); } .sd-switch.on .sd-palanca::after{ left:23px; } /* ═══ CIFRAS ═══════════════════════════════════════════════════════ */ .sd-cifras{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--sd-crema); border:1px solid var(--sd-borde); border-radius:var(--sd-radio); margin-top:22px; } .sd-cifra{ display:flex; align-items:center; gap:12px; padding:16px 20px; } .sd-cifra + .sd-cifra{ border-left:1px solid var(--sd-borde); } .sd-cifra > iconify-icon{ font-size:22px; color:var(--sd-verde); flex:0 0 auto; } .sd-cifra div{ flex:1; min-width:0; } .sd-cifra b{ display:block; font-size:19px; font-weight:800; color:var(--sd-tinta); line-height:1.15; } .sd-cifra small{ display:block; font-size:11.5px; color:var(--sd-suave); } /* ═══ PIEZAS DE UNA TARJETA ════════════════════════════════════════ */ /* EL SELLO VERIFICADO ES UNA IMAGEN, Y LA REGLA SE ESCRIBE CON `img`. `.sd img{display:block}` (0,1,1) le gana a `.sd-verificado` (0,1,0) y el sello se iba a su propia línea debajo del nombre -- el mismo mordisco que ya estaba documentado en `.sd-card-foto img.sd-card-sello`. Con la clase Y el elemento, esta manda. Bajado tres píxeles para que se siente en la base del nombre y no sobre su altura de mayúsculas. */ .sd img.sd-verificado{ display:inline-block; vertical-align:-3px; width:16px; height:16px; margin-left:5px; object-fit:contain; } /* Icono a la izquierda y TODO el texto en la segunda columna: la regla de alineación del proyecto. Nada de `margin-left` a ojo para compensar el icono. */ .sd-linea{ display:flex; align-items:flex-start; gap:6px; margin-top:5px; } .sd-linea > iconify-icon{ font-size:13px; color:var(--sd-tenue); flex:0 0 auto; margin-top:2px; } .sd-linea span{ flex:1; min-width:0; font-size:12px; color:var(--sd-suave); } .sd-rating{ display:flex; align-items:center; gap:5px; margin-top:7px; font-size:12.5px; } .sd-rating b{ color:var(--sd-tinta); font-weight:700; } .sd-rating iconify-icon{ color:var(--sd-oro); font-size:13px; } .sd-rating small{ color:var(--sd-suave); font-size:11.5px; } .sd-hechos{ display:flex; gap:14px; margin-top:10px; margin-bottom:12px; padding-top:10px; border-top:1px solid var(--sd-borde); } .sd-hecho{ display:flex; align-items:flex-start; gap:6px; flex:1; min-width:0; } .sd-hecho > iconify-icon{ font-size:14px; color:var(--sd-verde); flex:0 0 auto; margin-top:1px; } .sd-hecho div{ flex:1; min-width:0; } .sd-hecho b{ display:block; font-size:12px; color:var(--sd-tinta); } .sd-hecho small{ display:block; font-size:10.5px; color:var(--sd-suave); } .sd-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .sd-pill{ font-size:10.5px; font-weight:700; border-radius:99px; padding:3px 9px; background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); border:1px solid var(--sd-verde-borde); } .sd-nivel{ display:inline-flex; align-items:center; gap:4px; background:var(--sd-crema); border:1px solid var(--sd-borde); border-radius:99px; padding:2px 9px 2px 3px; font-size:10px; font-weight:700; color:var(--sd-tinta); white-space:nowrap; } .sd-nivel img{ width:18px; height:18px; object-fit:contain; } .sd-proteccion{ display:flex; align-items:center; gap:7px; margin-top:auto; background:var(--sd-verde-claro); border-top:1px solid var(--sd-verde-borde); padding:9px 14px; } .sd-proteccion iconify-icon{ color:var(--sd-verde); font-size:14px; flex:0 0 auto; } .sd-proteccion span{ font-size:11.5px; font-weight:700; color:var(--sd-verde-oscuro); } /* El avatar: con foto o con su inicial. Un círculo con letra se lee como una identidad; un hueco gris, no. */ .sd-avatar{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; border:1px solid var(--sd-verde-borde); } .sd-avatar img{ width:100%; height:100%; object-fit:cover; } /* La foto de portada cuando el vendedor no ha subido ninguna: su inicial sobre el verde de la casa. NUNCA una foto de archivo: sería enseñar una finca que no es la suya. */ .sd-portada-vacia{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; color:#7ba57f; background:linear-gradient(135deg, #e8f2e6 0%, #d7e9d6 100%); } .sd-portada-vacia iconify-icon{ font-size:26px; } /* Las iniciales, para que el hueco se lea como una identidad y no como una foto que no ha cargado. */ .sd-portada-vacia b{ font-size:22px; font-weight:800; letter-spacing:1px; color:#6f9c74; } /* ═══ LA TARJETA ════════════════════════════════════════════════════ Vive en `TSellerCard` (Storefront/templates), con sus tokens puestos en la propia tarjeta: así no pierde el borde fuera de `.sd`, en favoritos. */ /* ═══ CARRIL ═══════════════════════════════════════════════════════ */ .sd-carril{ position:relative; } .sd-carril-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*14px)/5); gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px 8px; scrollbar-width:none; } .sd-carril-pista::-webkit-scrollbar{ display:none; } .sd-flecha{ position:absolute; top:50%; right:-16px; transform:translateY(-50%); z-index:3; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--sd-borde); box-shadow:0 3px 10px rgba(20,40,25,.16); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--sd-tinta); } /* ═══ ETIQUETAS DE LO FILTRADO ═════════════════════════════════════ Arriba del todo y quitables una a una. Un filtro puesto hace tres pantallas y olvidado es la causa número uno de «no hay resultados». */ .sd-chips{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .sd-chips-tit{ font-size:11.5px; font-weight:700; color:var(--sd-suave); text-transform:uppercase; letter-spacing:.4px; } .sd-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--sd-verde-claro); border:1px solid var(--sd-verde-borde); border-radius:99px; padding:4px 6px 4px 11px; font-size:11.5px; font-weight:600; color:var(--sd-verde-oscuro); } .sd-chip button{ border:0; background:rgba(0,0,0,.06); color:inherit; cursor:pointer; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; padding:0; } .sd-chip button:hover{ background:var(--sd-verde); color:#fff; } .sd-chips-limpiar{ font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; display:inline-flex; align-items:center; gap:5px; background:none; border:0; font-family:inherit; } /* ═══ COLUMNA DE CRITERIOS ═════════════════════════════════════════ */ .sd-panel{ background:#fff; border:1px solid var(--sd-borde); border-radius:var(--sd-radio); box-shadow:var(--sd-sombra); overflow:hidden; } .sd-panel-cab{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--sd-borde); } .sd-panel-cab > iconify-icon{ color:var(--sd-verde); font-size:16px; flex:0 0 auto; } .sd-panel-cab b{ flex:1; min-width:0; font-size:13px; color:var(--sd-tinta); } .sd-panel-cab a{ font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; } .sd-grupo{ border-bottom:1px solid var(--sd-borde); } .sd-grupo:last-child{ border-bottom:0; } /* 20 ARRIBA Y 12 ABAJO, Y NO LOS 11 IGUALES DE ANTES. Cada grupo lleva su línea de separación (`.sd-grupo`), así que el rótulo se leía pegado a la raya. Y no van iguales a propósito: un título pertenece a lo que tiene DEBAJO, así que se separa más de la línea de arriba --que es el final del grupo anterior-- que de sus propias opciones. Con los dos iguales, la columna se lee como una tabla de filas sueltas y no como una lista de secciones. El relleno lateral no se toca: lo comparte con el cuerpo. */ .sd-grupo-cab{ width:100%; display:flex; align-items:center; gap:8px; padding:20px 14px 12px; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; } .sd-grupo-cab b{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--sd-tinta); } .sd-grupo-cab > iconify-icon:first-child{ font-size:15px; color:var(--sd-verde); flex:0 0 auto; } .sd-grupo-flecha{ font-size:15px; color:var(--sd-tenue); transition:transform .15s; } .sd-grupo.cerrado .sd-grupo-flecha{ transform:rotate(-90deg); } /* Y el cuerpo cierra con 16: es lo que deja el aire de debajo del último control parecido al de encima del título siguiente, contando que ahí hay además una línea. */ .sd-grupo-cuerpo{ padding:0 14px 16px; } .sd-grupo.cerrado .sd-grupo-cuerpo{ display:none; } .sd-buscasub{ display:flex; align-items:center; gap:6px; border:1px solid var(--sd-borde); border-radius:8px; padding:5px 9px; margin-bottom:8px; } .sd-buscasub iconify-icon{ font-size:14px; color:var(--sd-tenue); flex:0 0 auto; } .sd-buscasub input{ flex:1; min-width:0; border:0; outline:none; font-family:inherit; font-size:12px; } /* Una casilla, con SU RECUENTO: sin él no se sabe si un filtro deja dos resultados o doscientos, y se prueba a ciegas. */ .sd-check{ display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; } .sd-check input{ position:absolute; opacity:0; width:0; height:0; } .sd-marca{ flex:0 0 auto; width:16px; height:16px; border:1px solid #c8d2c8; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; } .sd-check input:checked + .sd-marca{ background:var(--sd-verde); border-color:var(--sd-verde); } .sd-marca iconify-icon{ visibility:hidden; } .sd-check input:checked + .sd-marca iconify-icon{ visibility:visible; } .sd-check-txt{ flex:1; min-width:0; font-size:12px; color:var(--sd-texto); display:flex; align-items:center; gap:6px; } .sd-check-txt img{ width:17px; height:17px; object-fit:contain; } .sd-check i{ flex:0 0 auto; font-style:normal; font-size:10.5px; color:var(--sd-tenue); } .sd-check input:checked ~ .sd-check-txt{ color:var(--sd-verde-oscuro); font-weight:600; } .sd-vermas{ display:inline-block; margin-top:6px; font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; } /* Valoración mínima: una sola respuesta, así que píldoras y no casillas. */ .sd-notas{ display:flex; flex-wrap:wrap; gap:6px; } .sd-nota{ cursor:pointer; } .sd-nota input{ position:absolute; opacity:0; } .sd-nota span{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--sd-borde); border-radius:99px; padding:4px 10px; font-size:11.5px; color:var(--sd-texto); } .sd-nota span iconify-icon{ color:var(--sd-oro); font-size:12px; } .sd-nota input:checked + span{ background:var(--sd-verde-claro); border-color:var(--sd-verde); color:var(--sd-verde-oscuro); font-weight:700; } /* ═══ BARRA DE RESULTADOS Y VISTAS ═════════════════════════════════ */ .sd-barra{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .sd-barra h2{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; text-transform:none; border:0; padding:0; } .sd-barra h2 iconify-icon{ color:var(--sd-verde); font-size:17px; } .sd-barra small{ color:var(--sd-suave); font-size:12px; } .sd-barra-sp{ flex:1; } .sd-vista{ display:flex; border:1px solid var(--sd-borde); border-radius:8px; overflow:hidden; } .sd-vista button{ width:34px; height:34px; border:0; background:#fff; cursor:pointer; color:var(--sd-suave); font-size:16px; } .sd-vista button.on{ background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); } /* ═══ PAGINACIÓN ═══════════════════════════════════════════════════ */ /* LA PAGINACIÓN ES UN