/* ============================================================
Diccionario de Fórmulas según la MTC
Estilos · paleta verde forestal, editorial moderno
============================================================ */
:root{
/* Fondos */
--bg: #FAFAF7;
--bg-soft: #F2F1EC;
--bg-card: #FFFFFF;
--bg-tint: #E8F0E4; /* verde muy claro para hovers/badges */
/* Verde principal (inspirado en cincoelementos.es) */
--green: #207526;
--green-dark: #0c5712;
--green-soft: #4A9550;
--green-pale: #ABCFA2;
/* Cinabrio — uso reservado: Wǔ Xíng Fuego + estrella destacado */
--cinnabar: #B23A29;
--cinnabar-dark: #8A2817;
/* Tinta y grises */
--ink: #1F2A22;
--ink-soft: #4A5A50;
--ink-faint: #8A9690;
/* Líneas */
--line: #E1DFD8;
--line-soft: #EFEDE6;
/* Wǔ Xíng — solo el ocre Tierra se usa en .pill-gold */
--wx-earth: #C9A04A;
--bs-body-font-family: 'Lato', system-ui, sans-serif;
--bs-body-bg: var(--bg);
--bs-body-color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html, body{
margin: 0; padding: 0;
background: var(--bg); color: var(--ink);
font-family: 'Lato', system-ui, -apple-system, sans-serif;
font-size: 15px; line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-faint); }
/* =============================================================
HERO
============================================================= */
.hero{
position: relative;
padding: 14px 20px 16px;
background: var(--bg-card);
border-bottom: 1px solid var(--line);
}
.hero-inner{ max-width: 1340px; margin: 0 auto; position: relative; z-index: 1; }
.hero-row{
display: grid; grid-template-columns: 1fr auto;
gap: 26px; align-items: center;
}
.hero-aside{
display: flex; flex-direction: row; align-items: center; gap: 14px;
flex-wrap: wrap; justify-content: flex-end;
}
/* Reloj de órganos MTC en hero (compacto, clicable) */
.organ-clock-row{
--el: var(--green);
--el-soft: var(--green-pale);
--el-tint: var(--bg-tint);
--el-shadow: rgba(32,117,38,.35);
display: inline-flex; align-items: center; gap: 9px;
background: transparent;
border: 1px solid transparent;
padding: 5px 12px 5px 10px;
border-radius: 999px;
cursor: pointer;
font: inherit; color: inherit;
transition: background .25s ease, border-color .25s ease,
transform .2s ease, box-shadow .25s ease;
}
.organ-clock-row:hover{
background: var(--el-tint);
border-color: var(--el-soft);
transform: translateY(-1px);
box-shadow: 0 6px 16px -8px var(--el-shadow);
}
.organ-clock-row:focus-visible{
outline: 2px solid var(--el);
outline-offset: 2px;
}
.organ-clock-cn{
font-family: 'Noto Serif SC', serif;
font-weight: 700; font-size: 22px;
color: var(--el);
line-height: 1;
transition: color .25s ease;
}
.organ-clock-text{
display: flex; flex-direction: column;
align-items: flex-start;
gap: 1px;
text-align: left;
}
.organ-clock-name{
font-family: 'Playfair Display', 'Cardo', serif;
font-style: normal; font-weight: 800;
font-size: 14px; color: var(--ink); line-height: 1.1;
letter-spacing: -.005em;
white-space: nowrap;
}
.organ-clock-time{
font-family: 'Lato', sans-serif;
font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 900; color: var(--ink-faint);
}
/* Wǔ Xíng — colores del elemento del órgano activo */
.organ-clock-row[data-element="mu"]{ --el:#4F9359; --el-soft:#BCDCC2; --el-tint:#E9F1EA; --el-shadow:rgba(45,102,56,.35); }
.organ-clock-row[data-element="huo"]{ --el:#D14B36; --el-soft:#F1C0B7; --el-tint:#FBEAE6; --el-shadow:rgba(142,42,30,.35); }
.organ-clock-row[data-element="tu"]{ --el:#C9A04A; --el-soft:#ECD9A5; --el-tint:#FAF1DC; --el-shadow:rgba(124,84,24,.30); }
.organ-clock-row[data-element="jin"]{ --el:#9C9382; --el-soft:#DCD7CC; --el-tint:#F1EFE9; --el-shadow:rgba(95,88,76,.30); }
.organ-clock-row[data-element="shui"]{ --el:#2A5A85; --el-soft:#B6CADD; --el-tint:#E1ECF5; --el-shadow:rgba(20,54,86,.35); }
/* Botón "Instalar app" (PWA) */
.btn-install{
display: inline-flex; align-items: center; gap: 7px;
background: linear-gradient(135deg, #3a9241 0%, #207526 100%);
color: #fff;
border: none;
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 7px 14px 7px 12px;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(32,117,38,.45);
transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
animation: install-pulse 2.4s ease-in-out infinite;
}
.btn-install:hover{
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 22px -6px rgba(32,117,38,.6);
animation-play-state: paused;
}
.btn-install:focus-visible{
outline: 2px solid var(--green-pale);
outline-offset: 2px;
}
.btn-install svg{
width: 14px; height: 14px;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
@keyframes install-pulse{
0%, 100% { box-shadow: 0 4px 14px -4px rgba(32,117,38,.45), 0 0 0 0 rgba(32,117,38,.45); }
70% { box-shadow: 0 4px 14px -4px rgba(32,117,38,.45), 0 0 0 10px rgba(32,117,38,0); }
}
/* =============================================================
SELECTOR DE IDIOMA · desplegable propio (en la hero-aside)
============================================================= */
.lang-switcher{
position: relative;
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
}
.lang-toggle{
display: inline-flex; align-items: center;
gap: 8px;
background: var(--bg-card);
border: 1px solid var(--green-pale);
color: var(--green-dark);
padding: 6px 10px 6px 9px;
border-radius: 999px;
cursor: pointer;
font: inherit; letter-spacing: inherit; text-transform: inherit;
box-shadow: 0 2px 6px -2px rgba(0,0,0,.08);
transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lang-toggle[disabled]{ cursor: default; opacity: .85; }
.lang-toggle:not([disabled]):hover,
.lang-toggle[aria-expanded="true"]{
background: var(--bg-tint);
border-color: var(--green);
box-shadow: 0 4px 10px -2px rgba(32,117,38,.18);
}
.lang-toggle:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.lang-caret{
width: 12px; height: 12px;
opacity: .7;
transition: transform .2s ease;
}
.lang-toggle[aria-expanded="true"] .lang-caret{ transform: rotate(180deg); }
.lang-menu{
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 160px;
background: var(--bg-card);
border: 1px solid var(--green-pale);
border-radius: 10px;
padding: 6px;
box-shadow: 0 12px 28px -10px rgba(0,0,0,.22);
z-index: 10050;
display: flex; flex-direction: column; gap: 2px;
animation: lang-in .18s ease;
}
.lang-menu[hidden]{ display: none; }
@keyframes lang-in{
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.lang-item{
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 6px;
color: var(--ink-soft);
font: inherit; letter-spacing: inherit; text-transform: inherit;
text-decoration: none;
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
.lang-item:hover,
.lang-item:focus-visible{
background: var(--bg-tint);
color: var(--green-dark);
outline: none;
}
.lang-item.active{
background: var(--bg-tint);
color: var(--green-dark);
font-weight: 800;
}
.lang-item.active::after{
content: '✓';
margin-left: auto;
color: var(--green);
font-weight: 700;
}
.lang-flag{
width: 20px; height: 14px;
border-radius: 2px;
border: 1px solid rgba(0,0,0,.10);
background: #FFFFFF;
display: block;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.10);
overflow: hidden;
}
/* =============================================================
SIDEBAR · CARD ESTADÍSTICA (contador de fórmulas)
============================================================= */
.sidebar-stat{
margin: 14px 18px 0;
padding: 10px 14px;
background: #E8F0E4;
border: 2px solid #FAFAF7;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
gap: 10px;
box-shadow: 0 2px 6px -3px rgba(0,0,0,.15);
transition: box-shadow .25s ease;
}
.sidebar-stat-icon{
width: 26px; height: 26px;
flex-shrink: 0;
color: var(--green-dark);
transition: color .25s ease;
}
.sidebar-stat-label{
font-family: 'Lato', sans-serif;
font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 700;
color: var(--ink-soft);
transition: color .25s ease;
}
.sidebar-stat-num{
font-family: 'Poppins', system-ui, sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1; letter-spacing: -.02em;
color: var(--green-dark);
transition: color .25s ease;
}
.sidebar-stat-wuxing{
width: 30px; height: 30px;
flex-shrink: 0;
transition: transform .35s ease;
}
.sidebar-stat:hover .sidebar-stat-wuxing{ transform: scale(1.08); }
.sidebar-stat-wuxing .wx-spin{
transform-origin: 50px 50px;
animation: wx-spin 24s linear infinite;
}
.sidebar-stat:hover .sidebar-stat-wuxing .wx-spin{ animation-duration: 8s; }
@keyframes wx-spin{
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
.sidebar-stat-wuxing .wx-spin{ animation: none; }
}
.sidebar-stat[data-state="filtered"] .sidebar-stat-num{ color: var(--green); }
.sidebar-stat[data-state="empty"] .sidebar-stat-num{ color: var(--cinnabar); }
.sidebar-stat[data-state="empty"] .sidebar-stat-label{ color: var(--cinnabar-dark); font-weight: 900; }
.hero-title-row{
display: flex; align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.hero-logo{
display: block;
width: 52px; height: 52px;
flex-shrink: 0;
transition: transform .35s ease;
}
.hero-logo:hover{ transform: scale(1.06); }
.hero-logo .yy-spin{
transform-origin: 50px 50px;
animation: yy-spin 32s linear infinite;
}
.hero-logo:hover .yy-spin{ animation-duration: 12s; }
@keyframes yy-spin{
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
.hero-logo .yy-spin{ animation: none; }
}
.hero h1{
font-family: 'Cardo', serif;
font-weight: 700;
font-size: clamp(26px, 3vw, 40px);
line-height: 1; letter-spacing: -.025em;
color: var(--ink); margin: 0;
white-space: nowrap;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 1, "kern" 1;
}
.hero h1 em{
font-style: italic; color: var(--green); font-weight: 700;
}
.hero h1 .cn{
font-family: 'Noto Serif SC', serif;
color: var(--green-pale); font-weight: 700;
font-size: .35em; vertical-align: .55em; margin-left: .3em;
letter-spacing: 0;
}
/* =============================================================
LAYOUT
============================================================= */
.layout{
max-width: 1340px;
margin: 0 auto;
padding: 40px 24px 80px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 36px;
}
.alert-mtc{
border: 1px solid var(--cinnabar);
background: rgba(178,58,41,.06);
border-radius: 6px;
padding: 14px 18px; color: var(--cinnabar-dark);
font-size: 14px;
}
/* =============================================================
SIDEBAR DE FILTROS
============================================================= */
.filter-box{
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,.08), transparent 55%),
linear-gradient(180deg, #207526 0%, #1A6320 100%);
border: 1px solid #185919;
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 8px 24px -10px rgba(12,87,18,.35);
color: #FFFFFF;
display: flex; flex-direction: column;
}
.filter-box .filter-form{
display: flex; flex-direction: column;
flex: 1;
}
.filter-box h2{
font-family: 'Cardo', serif;
font-size: 22px; font-weight: 700;
margin: 0; padding: 40px 22px 14px;
display: flex; align-items: center; justify-content: center; gap: 10px;
color: #FFFFFF;
border-bottom: 1px solid rgba(255,255,255,.14);
}
.filter-box h2 .cn{
font-family: 'Noto Serif SC', serif;
color: #ABCFA2; font-size: 17px; font-weight: 500;
}
/* Labels de filtros sobre fondo verde */
.filter-box .filter-group label{
color: rgba(255,255,255,.65);
}
.filter-box .filter-group label .cn{
color: #ABCFA2;
}
/* Inputs en blanco dentro del sidebar para contraste */
.filter-box .search-input,
.filter-box .select2-container--bootstrap-5 .select2-selection{
background: #FFFFFF !important;
border-color: transparent !important;
}
.filter-box .search-input:focus,
.filter-box .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.filter-box .select2-container--bootstrap-5.select2-container--open .select2-selection{
border-color: #ABCFA2 !important;
box-shadow: 0 0 0 3px rgba(171,207,162,.25) !important;
}
/* Chips/pills: fondo verde, texto blanco en negrita, × en blanco */
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
background: #E1ECF5 !important;
color: #143656 !important;
border: 1px solid #B6CADD !important;
border-radius: 999px !important;
padding: 3px 10px 3px 12px !important;
font-weight: 700 !important;
font-size: 12.5px !important;
box-shadow: 0 1px 3px rgba(20,54,86,.18);
transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
cursor: default;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice:hover{
background: #CDDDEB !important;
border-color: #2A5A85 !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px -2px rgba(20,54,86,.30);
}
/* Botón eliminar a la derecha con ✓ */
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
position: relative;
display: inline-flex !important;
align-items: center; justify-content: center;
width: 18px; height: 18px;
margin: 0 0 0 6px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: #FFFFFF !important;
color: transparent !important;
font-size: 0 !important;
order: 2;
transition: background .2s ease, transform .2s ease;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove::before{
content: '';
position: absolute;
left: 50%; top: 50%;
width: 5px; height: 9px;
border: solid #2A5A85;
border-width: 0 2px 2px 0;
transform: translate(-65%, -65%) rotate(45deg);
transition: border-color .2s ease;
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover{
background: var(--cinnabar) !important;
transform: scale(1.1);
}
.filter-box .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover::before{
border-color: #FFFFFF;
}
/* Botón "Limpiar todo" sobre fondo verde */
.filter-box .actions-row{ margin-top: auto; padding-top: 36px; }
.filter-box .actions-row .btn-ghost{
background: #FFFFFF;
color: var(--green-dark);
border: 1px solid #FFFFFF;
font-weight: 700;
box-shadow: 0 2px 6px -2px rgba(0,0,0,.18);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.filter-box .actions-row .btn-ghost:hover{
background: var(--bg-tint);
border-color: var(--bg-tint);
color: var(--green-dark);
box-shadow: 0 4px 12px -3px rgba(0,0,0,.25);
}
.btn-ghost-icon{
width: 16px; height: 16px;
flex-shrink: 0;
}
/* Botón "Eliminar Filtro": oculto cuando no hay ningún filtro activo */
#btnReset{ display: none; }
#btnReset.has-filters{ display: inline-flex; }
/* =============================================================
FORMULARIO DE FILTROS
============================================================= */
.filter-form{ padding: 18px 22px 22px; }
.filter-group{ margin-bottom: 14px; }
.filter-group label{
display: block;
font-size: 11px; text-transform: uppercase;
letter-spacing: .16em; color: var(--ink-faint);
font-weight: 700; margin-bottom: 6px;
}
.filter-group label .cn{
font-family: 'Noto Serif SC', serif;
color: var(--green);
letter-spacing: 0; font-size: 13px; margin-right: 4px; font-weight: 500;
}
.search-input{
width: 100%; background: var(--bg); border: 1px solid var(--line);
border-radius: 6px;
padding: 11px 14px;
font-family: 'Lato', sans-serif;
font-size: 15px; color: var(--ink);
outline: none; transition: all .2s;
}
.search-input::placeholder{ color: var(--ink-faint); font-style: italic; }
.search-input:focus{
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(32,117,38,.10);
}
.btn-ghost{
font-family: 'Lato', sans-serif;
font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
padding: 10px 18px; font-weight: 700;
border-radius: 6px; cursor: pointer; transition: all .2s;
background: transparent; color: var(--ink-soft);
border: 1px solid var(--line);
}
.btn-ghost:hover{
background: var(--bg-tint); color: var(--green-dark);
border-color: var(--green-pale);
}
.actions-row{ margin-top: 18px; }
/* =============================================================
FILTRO POR ELEMENTO (Wǔ Xíng) en sidebar
============================================================= */
.wuxing-block{
margin: 22px 0 4px;
padding: 18px 16px 16px;
background: #FFFFFF;
border: 1px solid transparent;
border-radius: 10px;
text-align: center;
box-shadow: 0 6px 18px -8px rgba(0,0,0,.25);
}
.wuxing-head{
display: flex; align-items: baseline; justify-content: center;
gap: 10px; margin-bottom: 6px;
}
.wuxing-head .cn{
font-family: 'Noto Serif SC', serif; font-weight: 700;
font-size: 16px; color: var(--green); line-height: 1;
}
.wuxing-head .label{
font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 800;
}
.wuxing-svg{
width: 100%; max-width: 240px; height: auto;
margin: 4px auto 0; display: block;
overflow: visible;
}
.wuxing-svg .wx-bg-ring{
stroke: var(--green); stroke-width: .8;
stroke-dasharray: 2 6; opacity: .22;
}
.wuxing-svg .wx-bg-ring2{
stroke: var(--green); stroke-width: .6; opacity: .14;
}
.wuxing-svg .node{ cursor: pointer; }
.wuxing-svg .node circle.bg,
.wuxing-svg .node circle.halo,
.wuxing-svg .node ellipse.shine{
transition: all .25s ease;
}
.wuxing-svg .node circle.halo{
fill: none; stroke: currentColor;
stroke-width: 1; opacity: 0;
}
.wuxing-svg .node.huo { color: #D14B36; }
.wuxing-svg .node.tu { color: #E0B048; }
.wuxing-svg .node.jin { color: #C8C0B0; }
.wuxing-svg .node.shui { color: #2A5A85; }
.wuxing-svg .node.mu { color: #4F9359; }
.wuxing-svg .node[data-element="huo"] { color: #D14B36; }
.wuxing-svg .node[data-element="tu"] { color: #E0B048; }
.wuxing-svg .node[data-element="jin"] { color: #9C9382; }
.wuxing-svg .node[data-element="shui"] { color: #2A5A85; }
.wuxing-svg .node[data-element="mu"] { color: #4F9359; }
.wuxing-svg .node circle.bg{
filter: drop-shadow(0 3px 4px rgba(0,0,0,.22));
}
.wuxing-svg .node:hover circle.bg{
filter: drop-shadow(0 4px 10px rgba(0,0,0,.32));
transform: scale(1.06);
transform-origin: center;
transform-box: fill-box;
}
.wuxing-svg .node:hover circle.halo{
opacity: .55;
r: 46;
}
.wuxing-svg .node.active circle.bg{
stroke-width: 2.5;
filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.wuxing-svg .node.active circle.halo{
opacity: .9;
stroke-width: 1.5;
r: 48;
animation: wx-pulse 2.4s ease-in-out infinite;
}
@keyframes wx-pulse{
0%, 100% { opacity: .9; r: 48; }
50% { opacity: .35; r: 54; }
}
.wuxing-svg .sheng-line{
stroke: var(--green); stroke-width: 1.2;
opacity: .3; fill: none;
stroke-linejoin: round;
}
.wuxing-svg .ke-line{
stroke: #B23A29; stroke-width: .8;
opacity: .22; fill: none;
stroke-dasharray: 3 4;
}
.wuxing-svg .center-bg{ opacity: .4; }
.wuxing-svg .center-text{
font-family: 'Noto Serif SC', serif;
fill: var(--green); font-weight: 700; opacity: .55;
letter-spacing: .04em;
}
.wuxing-svg .node-cn{
font-family: 'Noto Serif SC', serif; font-weight: 700;
fill: #fff;
pointer-events: none; user-select: none;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.wuxing-svg .node-name{
font-family: 'Lato', sans-serif; font-size: 10px;
letter-spacing: .22em; text-transform: uppercase;
fill: var(--ink-soft); pointer-events: none; font-weight: 700;
}
.wuxing-svg .node ellipse.shine{
pointer-events: none;
}
.wuxing-svg .node:hover ellipse.shine{
opacity: .35;
}
.wuxing-clear{
background: transparent; border: none;
color: var(--green);
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
font-weight: 700;
cursor: pointer; margin-top: 6px;
font-family: 'Lato', sans-serif;
padding: 4px 10px; border-radius: 5px;
transition: all .2s;
}
.wuxing-clear:hover{ color: var(--green-dark); background: var(--bg-card); }
.wuxing-clear[disabled]{ display: none; }
.actions-row .btn-ghost{ width: 100%; }
/* =============================================================
Select2 customizado
============================================================= */
.select2-container--bootstrap-5 .select2-selection{
background: var(--bg) !important;
border: 1px solid var(--line) !important;
border-radius: 6px !important;
min-height: 42px !important;
padding: 4px 8px !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
border-color: var(--green) !important;
box-shadow: 0 0 0 3px rgba(32,117,38,.10) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
background: var(--green) !important;
color: #fff !important;
border: 1px solid var(--green-dark) !important;
border-radius: 4px !important;
padding: 2px 8px 2px 6px !important;
font-size: 12px !important; font-weight: 600 !important;
margin-top: 4px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove{
color: #fff !important;
border-right: 1px solid rgba(255,255,255,.25) !important;
margin-right: 6px !important; padding-right: 6px !important;
}
.select2-dropdown{
border: 1px solid var(--line) !important;
border-radius: 6px !important;
background: var(--bg-card) !important;
box-shadow: 0 8px 24px -8px rgba(31,42,34,.18) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted{
background: transparent !important; color: inherit !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected{
background: var(--bg-tint) !important; color: var(--green-dark) !important;
font-weight: 600;
}
/* Casillas de selección en cada opción del dropdown (solo en hojas, no en grupos) */
.mtc-select-dropdown .select2-results__option:not([role="group"]){
position: relative;
padding-left: 38px !important;
display: flex; align-items: center;
min-height: 34px;
}
.mtc-select-dropdown .select2-results__option:not([role="group"])::before{
content: '';
position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
border: 1.5px solid var(--line);
border-radius: 4px;
background: #FFFFFF;
transition: background .15s ease, border-color .15s ease;
}
.mtc-select-dropdown .select2-results__option--selected:not([role="group"])::before,
.mtc-select-dropdown .select2-results__option[aria-selected="true"]:not([role="group"])::before{
background: var(--green);
border-color: var(--green);
}
.mtc-select-dropdown .select2-results__option--selected:not([role="group"])::after,
.mtc-select-dropdown .select2-results__option[aria-selected="true"]:not([role="group"])::after{
content: '';
position: absolute;
left: 19px; top: 50%;
width: 5px; height: 9px;
border: solid #FFFFFF;
border-width: 0 2px 2px 0;
transform: translateY(-65%) rotate(45deg);
}
/* Optgroup: cabecera limpia con subrayado fino del color de la familia */
.mtc-select-dropdown .select2-results__option[role="group"]{
position: relative;
padding: 0;
margin: 0;
background: transparent;
}
.mtc-select-dropdown .select2-results__option[role="group"] + .select2-results__option[role="group"]{
margin-top: 8px;
}
/* Cabecera de familia: sin fondo, texto verde MTC, subrayado 2px del mismo verde */
.mtc-select-dropdown .select2-results__group{
display: block;
margin: 0 14px 4px;
padding: 10px 0 6px;
font-family: 'Poppins', system-ui, sans-serif;
font-size: 11px;
font-weight: 800 !important;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--green);
background: transparent;
border-bottom: 2px solid var(--green);
cursor: default;
user-select: none;
}
/* Opciones dentro de un grupo: padding del checkbox */
.mtc-select-dropdown .select2-results__options--nested{
background: transparent;
padding: 2px 0 4px;
}
.mtc-select-dropdown .select2-results__options--nested .select2-results__option{
padding-left: 38px !important;
}
/* =============================================================
RESULTADOS
============================================================= */
.loading{
text-align: center; padding: 60px 20px;
color: var(--ink-faint); font-style: italic;
font-family: 'Cardo', serif; font-size: 19px;
}
.loading .cn{
display: block;
font-family: 'Noto Serif SC', serif; font-size: 34px;
color: var(--green); opacity: .4; font-weight: 500;
margin-bottom: 8px; font-style: normal;
animation: pulse 1.4s ease infinite;
}
@keyframes pulse{ 0%,100%{opacity:.25} 50%{opacity:.6} }
.empty{
text-align: center; padding: 80px 20px;
color: var(--ink-faint);
font-family: 'Cardo', serif;
font-style: italic; font-size: 21px;
}
.empty .cn{
display: block; font-size: 46px;
color: var(--green); opacity: .35;
font-family: 'Noto Serif SC', serif; margin-bottom: 8px;
font-style: normal; font-weight: 500;
}
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 20px;
}
/* =============================================================
CARDS
============================================================= */
.card-item{
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px 22px 20px;
cursor: pointer;
position: relative;
transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease;
display: flex; flex-direction: column;
min-height: 220px; overflow: hidden;
animation: cardIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn{
from{ opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Franja superior coloreada según temperatura */
.card-item::before{
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--line);
transition: height .25s ease;
}
.card-item[data-temp="1"]::before{ background: linear-gradient(90deg, #1b73f7, #5BA0FF); }
.card-item[data-temp="2"]::before{ background: linear-gradient(90deg, #71c5f6, #A8DCF8); }
.card-item[data-temp="3"]::before{ background: linear-gradient(90deg, #dbdede, #f0f0f0); }
.card-item[data-temp="4"]::before{ background: linear-gradient(90deg, #f6a6be, #f9c4d3); }
.card-item[data-temp="5"]::before{ background: linear-gradient(90deg, #ef1313, #f7595a); }
.card-item:hover{
border-color: var(--green-pale);
transform: translateY(-4px);
box-shadow: 0 16px 36px -16px rgba(31,42,34,.22);
}
.card-item:hover::before{ height: 5px; }
.card-cat{
font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
color: var(--green); font-weight: 700; margin-bottom: 14px;
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 10px;
}
.card-cat::before{
content: ''; width: 22px; height: 1px; background: var(--green-pale);
}
.card-title{
font-family: 'Playfair Display', 'Cardo', serif;
font-size: 27px; font-weight: 700;
line-height: 1.1; color: var(--ink);
margin: 0 0 16px; letter-spacing: -.005em;
position: relative; z-index: 1;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 1, "kern" 1;
}
.card-meta{
display: flex; flex-wrap: wrap; gap: 7px;
margin-bottom: 14px; position: relative; z-index: 1;
}
.badge-mtc{
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 600;
padding: 4px 11px 4px 9px; border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.badge-mtc .dot{ width: 6px; height: 6px; border-radius: 50%; }
.b-temp-1{ background:#1b73f7; color:#FFFFFF; } .b-temp-1 .dot{ background:#FFFFFF; }
.b-temp-2{ background:#71c5f6; color:#0E2E55; } .b-temp-2 .dot{ background:#1b73f7; }
.b-temp-3{ background:#dbdede; color:#3A3F44; } .b-temp-3 .dot{ background:#7A8086; }
.b-temp-4{ background:#f6a6be; color:#5A1F31; } .b-temp-4 .dot{ background:#C44570; }
.b-temp-5{ background:#ef1313; color:#FFFFFF; } .b-temp-5 .dot{ background:#FFFFFF; }
.b-sabor{
background: var(--bg-tint); color: var(--green-dark);
border: 1px solid transparent;
}
/* Sabores · paleta Wǔ Xíng (igual que la modal de Ayuda) */
.b-sabor.s-salado, .pill-sabor.s-salado { background:#2A5A85; color:#FFFFFF; border-color:#2A5A85; }
.b-sabor.s-picante, .pill-sabor.s-picante { background:#9C9382; color:#FFFFFF; border-color:#9C9382; }
.b-sabor.s-agrio, .pill-sabor.s-agrio { background:#4F9359; color:#FFFFFF; border-color:#4F9359; }
.b-sabor.s-amargo, .pill-sabor.s-amargo { background:#D14B36; color:#FFFFFF; border-color:#D14B36; }
.b-sabor.s-dulce, .pill-sabor.s-dulce { background:#E0B048; color:#5B4823; border-color:#E0B048; }
.card-rutas{
margin-top: auto; padding-top: 14px;
border-top: 1px dashed var(--line);
font-family: 'Lato', system-ui, sans-serif;
font-size: 13.5px; color: var(--ink-soft);
font-style: normal; line-height: 1.5;
letter-spacing: .005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative; z-index: 1;
}
.card-rutas::before{
content: '经';
font-family: 'Noto Serif SC', serif; font-style: normal;
color: var(--green); font-size: 14px; font-weight: 500;
margin-right: 8px;
vertical-align: 1px;
}
/* =============================================================
TOGGLE Cuadrícula ↔ Lista
============================================================= */
.view-bar{
display: flex; justify-content: flex-end; align-items: center;
gap: 10px;
margin: 0 0 14px;
flex-wrap: wrap;
}
.sort-control{
display: inline-flex; align-items: center; gap: 8px;
min-width: 200px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 7px 12px 7px 14px;
box-shadow: 0 2px 8px -4px rgba(0,0,0,.12);
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease;
}
.sort-control:hover{
border-color: var(--green-pale);
box-shadow: 0 4px 12px -4px rgba(32,117,38,.18);
}
.sort-icon{
width: 20px; height: 20px;
color: var(--green-dark);
flex-shrink: 0;
}
.sort-control select{
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
flex: 1;
width: 100%;
font-family: 'Lato', sans-serif;
font-size: 13.5px; font-weight: 700;
letter-spacing: .1em;
color: var(--green-dark);
cursor: pointer;
padding: 4px 26px 4px 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 14px 14px;
}
.sort-control select:focus-visible{
outline: 2px solid var(--green);
outline-offset: 2px;
border-radius: 4px;
}
.view-toggle{
display: inline-flex; align-items: center;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 3px;
box-shadow: 0 2px 8px -4px rgba(0,0,0,.12);
}
.view-opt{
display: inline-flex; align-items: center; gap: 7px;
background: transparent;
border: 0;
color: var(--ink-faint);
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 7px 12px;
border-radius: 7px;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.view-opt svg{ width: 16px; height: 16px; flex-shrink: 0; }
.view-opt:hover{ color: var(--green-dark); background: var(--bg-tint); }
.view-opt.active{
background: var(--green);
color: #fff;
box-shadow: 0 2px 8px -3px rgba(32,117,38,.4);
}
.view-opt:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
/* Botón "Diseñar Fórmula" (cabecera, junto a Entrar) */
.btn-design{
display: inline-flex; align-items: center; gap: 9px;
height: 36px;
padding: 0 16px 0 14px;
border-radius: 999px;
border: 1.5px solid transparent;
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, #0c5712 0%, #207526 30%, #4A9550 55%, #ABCFA2 78%, #B23A29 100%) border-box;
color: var(--green-dark);
cursor: pointer;
font-family: 'Lato', sans-serif;
font-size: 11.5px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase;
box-shadow: 0 4px 14px -6px rgba(32,117,38,.35);
transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.btn-design:hover{
transform: translateY(-1px);
color: var(--cinnabar);
box-shadow: 0 8px 20px -6px rgba(32,117,38,.45);
}
.btn-design:hover svg{ color: var(--cinnabar); }
.btn-design:focus-visible{
outline: 3px solid rgba(32,117,38,.25);
outline-offset: 2px;
}
.btn-design svg{ width: 17px; height: 17px; flex-shrink: 0; color: var(--green-dark); transition: color .2s ease; }
@media (max-width: 600px){
.btn-design{
height: 32px;
padding: 0 13px 0 11px;
font-size: 10.5px;
gap: 7px;
}
.btn-design svg{ width: 15px; height: 15px; }
}
/* ===== Modal "Diseñar Fórmula" ===== */
#designModal .modal-content{ min-height: min(72vh, 640px); }
@media (max-width: 600px){
#designModal .modal-content{ min-height: min(80vh, 560px); }
}
.design-search-box{ position: relative; }
.design-suggest{
position: absolute; left: 0; right: 0; top: calc(100% + 4px);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.25);
max-height: 280px; overflow-y: auto; z-index: 20;
padding: 6px;
}
.design-suggest-item{
display: flex; flex-direction: column; gap: 2px;
width: 100%; text-align: left;
background: transparent; border: 0; cursor: pointer;
padding: 9px 12px; border-radius: 8px;
font-family: 'Lato', sans-serif; color: var(--ink);
}
.design-suggest-item:hover,
.design-suggest-item:focus-visible{ background: var(--bg-tint); outline: none; }
.design-suggest-item .py{ font-weight: 700; color: var(--green-dark); }
.design-suggest-item .es{ font-size: 12.5px; color: var(--ink-faint); }
.design-suggest-empty{ padding: 12px; color: var(--ink-faint); font-size: 13px; text-align: center; }
.design-base-row{
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--bg-tint); border-radius: 10px; padding: 10px 14px;
}
.design-base-name{
font-family: 'Playfair Display', serif; font-weight: 700;
color: var(--green-dark); font-size: 17px;
}
.design-change{
background: transparent; border: 1px solid var(--green-pale); color: var(--green-dark);
border-radius: 999px; padding: 5px 12px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
cursor: pointer; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.design-change:hover{ background: var(--green); color: #fff; border-color: var(--green); }
.design-plant-row{ position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.design-plant-suggest{
position: absolute; left: 0; right: 0; top: calc(100% + 2px);
z-index: 30;
background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.25);
max-height: 240px; overflow-y: auto; padding: 6px;
}
.design-plant-suggest.is-up{ top: auto; bottom: calc(100% + 2px); }
.design-plant-input{
flex: 1;
border: 1px solid var(--line); border-radius: 10px;
padding: 9px 12px;
font-family: 'Lato', sans-serif; font-size: 14px; color: var(--ink);
background: var(--bg-card);
}
.design-plant-input:focus{
outline: none; border-color: var(--green);
box-shadow: 0 0 0 3px rgba(32,117,38,.12);
}
.design-plant-pct-wrap{
display: flex; align-items: center; gap: 5px;
flex-shrink: 0; width: 120px;
}
.design-plant-pct{
flex: 1; min-width: 0;
border: 1px solid var(--line); border-radius: 10px;
padding: 9px 6px 9px 10px;
font-family: 'Lato', sans-serif; font-size: 14px; color: var(--ink);
background: var(--bg-card);
text-align: right;
-moz-appearance: textfield; appearance: textfield; /* oculta el spinner nativo (usamos el propio) */
}
.design-plant-pct::-webkit-outer-spin-button,
.design-plant-pct::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.design-plant-pct:focus{
outline: none; border-color: var(--green);
box-shadow: 0 0 0 3px rgba(32,117,38,.12);
}
/* Stepper propio (− / +) — mismo aspecto en todos los navegadores */
.design-plant-steps{ display: flex; flex-direction: column; flex-shrink: 0; }
.design-plant-step{
width: 18px; height: 15px; padding: 0; line-height: 1;
border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-soft);
cursor: pointer; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.design-plant-step:first-child{ border-radius: 5px 5px 0 0; border-bottom: 0; }
.design-plant-step:last-child { border-radius: 0 0 5px 5px; }
.design-plant-step:hover{ background: var(--bg-tint); color: var(--green-dark); border-color: var(--green-pale); }
.design-plant-step:active{ background: var(--green); color: #fff; border-color: var(--green); }
.design-plant-pct-sign{
flex-shrink: 0;
color: var(--ink-faint); font-size: 13px; font-weight: 700;
}
.design-plant-remove{
flex-shrink: 0;
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-faint);
cursor: pointer; font-size: 18px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.design-plant-remove:hover{ background: var(--cinnabar); color: #fff; border-color: var(--cinnabar); }
/* Fila Total: línea horizontal + suma alineada sobre la columna de % */
.design-total{
display: flex; align-items: center;
border-top: 2px solid var(--line);
margin-top: 6px; padding: 12px 42px 4px 4px;
}
.design-total-label{
margin-right: auto;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 700;
}
.design-total-value{
min-width: 88px; text-align: right;
font-family: 'Playfair Display', serif; font-weight: 700;
font-size: 18px; color: var(--green-dark);
transition: color .2s ease;
}
.design-total-sign{ font-size: 13px; margin-left: 2px; color: var(--ink-faint); }
/* Verde cuando suma exactamente 100; cinabrio si se pasa/queda corto */
.design-total.is-off .design-total-value{ color: var(--cinnabar); }
.design-total.is-off .design-total-sign{ color: var(--cinnabar); opacity: .7; }
.design-add{
margin-top: 4px; width: 100%;
background: transparent; border: 1px dashed var(--green-pale); color: var(--green-dark);
border-radius: 10px; padding: 9px 14px;
font-size: 13px; font-weight: 700; cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.design-add:hover{ background: var(--bg-tint); border-color: var(--green); }
/* Footer de la modal de diseño: Salir + PDF */
/* Pie de la modal Diseñar: todo alineado a la derecha (Salir · Copiar · PDF · Guardar) */
/* Especificidad doble para ganar a .modal-foot-mtc (que trae space-between). */
.modal-foot-mtc.design-foot{ justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Todos los botones con el MISMO color y diseño (verde sólido, píldora). */
.design-foot-btn{
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Lato', sans-serif;
font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
padding: 9px 17px; border-radius: 999px; cursor: pointer;
background: var(--green); color: #fff; border: 1px solid var(--green-dark);
box-shadow: 0 4px 12px -3px rgba(32,117,38,.4);
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.design-foot-btn:hover{
background: var(--green-dark); border-color: var(--green-dark);
transform: translateY(-1px);
box-shadow: 0 6px 16px -3px rgba(32,117,38,.55);
}
.design-foot-btn svg{ width: 15px; height: 15px; flex-shrink: 0; }
.design-foot-btn:disabled{ opacity: .45; cursor: default; transform: none; box-shadow: none; }
.design-foot-btn:focus-visible{ outline: 2px solid var(--green-pale); outline-offset: 2px; }
/* Bloque del enlace compartible (tras guardar) */
.design-share{
margin-top: 16px;
padding: 14px 16px;
background: var(--bg-tint);
border: 1px solid var(--green-pale);
border-radius: 12px;
}
.design-share-row{
display: flex; align-items: center; gap: 8px;
margin-top: 8px;
}
.design-share-row .search-input{ flex: 1; min-width: 0; }
.design-share-copy{
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
background: var(--green); color: #fff;
border: 1px solid var(--green-dark); border-radius: 10px;
padding: 9px 14px;
font-family: 'Lato', sans-serif;
font-size: 12px; font-weight: 700; letter-spacing: .04em;
cursor: pointer;
transition: background .2s ease, transform .15s ease;
}
.design-share-copy svg{ width: 15px; height: 15px; }
.design-share-copy:hover{ background: var(--green-dark); transform: translateY(-1px); }
.design-share-copy:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.design-share-hint{ margin: 9px 0 0; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 600px){
.design-foot{ flex-wrap: wrap; gap: 6px; }
.design-foot-btn{ padding: 9px 14px; letter-spacing: .05em; }
.design-share-row{ flex-wrap: wrap; }
.design-share-copy{ width: 100%; justify-content: center; }
}
/* =============================================================
CUENTAS DE USUARIO · cabecera + modal de acceso + Mis fórmulas
============================================================= */
.user-switcher{ position: relative; }
.user-login-btn,
.user-menu-btn{
display: inline-flex; align-items: center; gap: 8px;
background: var(--bg-card);
border: 1px solid var(--green-pale);
border-radius: 999px;
padding: 7px 14px;
color: var(--green-dark);
font-family: 'Lato', sans-serif;
font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.user-login-btn:hover,
.user-menu-btn:hover{ background: var(--bg-tint); border-color: var(--green); }
/* Entrar = solo icono (botón circular compacto) */
.user-login-btn{ padding: 0; gap: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; }
.user-login-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.user-avatar{
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--green); color: #fff;
font-size: 12px; font-weight: 800;
flex-shrink: 0;
}
.user-name{ max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-caret{ width: 14px; height: 14px; opacity: .7; }
.user-menu{
position: absolute; right: 0; top: calc(100% + 6px);
z-index: 30;
min-width: 190px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.25);
padding: 6px;
}
.user-menu-item{
display: flex; align-items: center; gap: 10px; width: 100%;
background: transparent; border: 0; border-radius: 8px;
padding: 10px 12px;
color: var(--ink-soft);
font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer; text-align: left;
transition: background .15s ease, color .15s ease;
}
.user-menu-item:hover{ background: var(--bg-tint); color: var(--green-dark); }
.user-menu-item svg{ width: 17px; height: 17px; flex-shrink: 0; color: var(--green-dark); }
/* Modal de acceso · pestañas + formularios */
.auth-tabs{
display: flex; gap: 4px;
background: var(--bg-tint);
border-radius: 10px; padding: 4px;
margin: 4px 0 18px;
}
.auth-tab{
flex: 1; background: transparent; border: 0; border-radius: 8px;
padding: 9px 12px;
font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-faint); cursor: pointer;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.auth-tab.is-active{
background: var(--bg-card); color: var(--green-dark);
box-shadow: 0 2px 8px -4px rgba(0,0,0,.18);
}
.auth-form .field{ margin-bottom: 14px; }
.auth-hint{ margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.auth-error{
background: #FBEAE7; border: 1px solid #E7B7AE; color: var(--cinnabar-dark);
border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
font-size: 13px;
}
.auth-submit{
width: 100%;
background: var(--green); color: #fff;
border: 1px solid var(--green-dark); border-radius: 10px;
padding: 12px 18px;
font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 12px -3px rgba(32,117,38,.4);
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.auth-submit:hover{ background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -3px rgba(32,117,38,.55); }
/* Campo de contraseña con ojo mostrar/ocultar */
.pass-wrap{ position: relative; }
.pass-wrap .search-input{ padding-right: 44px; }
.pass-toggle{
position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0;
background: transparent; border: 0; border-radius: 8px;
color: var(--ink-faint); cursor: pointer;
transition: color .15s ease, background .15s ease;
}
.pass-toggle:hover{ color: var(--green-dark); background: var(--bg-tint); }
.pass-toggle:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.pass-toggle .eye{ width: 19px; height: 19px; }
.pass-toggle .eye-hide{ display: none; }
.pass-toggle.is-on .eye-show{ display: none; }
.pass-toggle.is-on .eye-hide{ display: inline-block; }
/* Lista "Mis fórmulas" */
.myf-list{ margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.myf-empty{
text-align: center; color: var(--ink-faint);
padding: 32px 12px; font-size: 14px;
}
.myf-item{
display: flex; align-items: center; gap: 12px;
background: var(--bg-card);
border: 1px solid var(--line); border-radius: 12px;
padding: 12px 14px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.myf-item:hover{ border-color: var(--green-pale); box-shadow: 0 4px 12px -6px rgba(32,117,38,.2); }
.myf-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.myf-name{ font-weight: 700; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myf-meta{ font-size: 12px; color: var(--ink-faint); }
.myf-actions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.myf-btn{
background: var(--bg-tint); color: var(--green-dark);
border: 1px solid var(--green-pale); border-radius: 8px;
padding: 7px 12px;
font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.myf-btn:hover{ background: var(--green-pale); border-color: var(--green); }
.myf-del{
width: 32px; padding: 0; height: 32px; font-size: 18px; line-height: 1;
color: var(--ink-faint); background: transparent; border-color: var(--line);
}
.myf-del:hover{ background: #FBEAE7; border-color: #E7B7AE; color: var(--cinnabar); }
@media (max-width: 600px){
.user-name{ max-width: 80px; }
.myf-item{ flex-wrap: wrap; }
.myf-actions{ width: 100%; justify-content: flex-end; }
}
/* Modo LISTA */
.grid.is-list{
grid-template-columns: 1fr;
gap: 6px;
}
.grid.is-list .card-item{
display: flex; flex-direction: row; align-items: center;
flex-wrap: wrap;
min-height: 0;
padding: 12px 18px 12px 22px;
gap: 10px 16px;
animation: listIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes listIn{
from{ opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.grid.is-list .card-item:hover{
transform: translateY(-1px);
box-shadow: 0 8px 22px -10px rgba(31,42,34,.18);
}
.grid.is-list .card-item::before{
width: 4px; height: 100%;
top: 0; bottom: 0; right: auto;
border-radius: 12px 0 0 12px;
}
.grid.is-list .card-item:hover::before{ height: 100%; width: 5px; }
.grid.is-list .card-cat{
margin: 0;
flex: 0 0 auto;
min-width: 0;
}
.grid.is-list .card-cat::before{ display: none; }
.grid.is-list .card-title{
font-family: 'Cardo', serif;
font-size: 19px; font-weight: 700;
margin: 0;
flex: 0 1 auto;
max-width: 340px;
min-width: 0;
letter-spacing: -.012em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.grid.is-list .card-meta{
margin: 0;
flex: 0 0 auto;
}
.grid.is-list .card-rutas{
margin: 0 0 0 auto;
padding: 0;
border-top: 0;
font-size: 13.5px;
flex: 0 1 240px;
text-align: right;
-webkit-line-clamp: 1;
min-width: 0;
}
@media (max-width: 600px){
.grid.is-list .card-rutas{ flex-basis: 100%; margin-left: 0; text-align: left; }
.grid.is-list .card-title{ flex-basis: 100%; max-width: none; }
}
/* =============================================================
PAGINACIÓN
============================================================= */
.pager{
margin-top: 36px;
display: flex; justify-content: center; align-items: center;
gap: 6px; flex-wrap: wrap;
}
.pager button{
background: var(--bg-card); color: var(--ink-soft);
border: 1px solid var(--line);
border-radius: 6px;
width: 40px; height: 40px;
cursor: pointer; transition: all .2s;
font-family: 'Lato', sans-serif;
font-size: 13px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.pager button:hover:not(:disabled){
background: var(--bg-tint); color: var(--green-dark);
border-color: var(--green-pale);
}
.pager button.active{
background: var(--green); color: #fff;
border-color: var(--green);
}
.pager button:disabled{ opacity: .35; cursor: not-allowed; }
.pager .ellipsis{ color: var(--ink-faint); padding: 0 4px; }
/* =============================================================
MODAL
============================================================= */
.modal-content{
background: var(--bg-card);
border: 1px solid var(--line); border-radius: 12px;
overflow: hidden;
}
.modal-header.mtc{
background: var(--green);
padding: 6px 0; border: none;
}
.modal .btn-close{
position: absolute; top: 16px; right: 16px;
z-index: 10;
opacity: 1; background: var(--bg-card);
border: 1px solid var(--line); border-radius: 50%;
width: 36px; height: 36px; padding: 0;
font-size: 22px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-soft);
cursor: pointer;
transition: all .2s;
background-image: none;
}
.modal .btn-close:hover{
background: var(--bg-tint); color: var(--green-dark);
border-color: var(--green-pale);
}
.modal .btn-close:focus{
box-shadow: 0 0 0 3px rgba(32,117,38,.15);
outline: none;
}
.modal-title{
font-family: 'Playfair Display', 'Cardo', serif;
font-size: 36px; font-weight: 700;
color: var(--ink); letter-spacing: -.005em;
line-height: 1.12;
}
/* Botón Compartir en el pie de la modal de detalle */
.btn-share{
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
background: var(--green);
border: 1px solid var(--green-dark);
color: #FFFFFF;
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase;
padding: 7px 14px 7px 11px;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 4px 12px -3px rgba(32,117,38,.4);
transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-share:hover{
background: var(--green-dark);
border-color: var(--green-dark);
transform: translateY(-1px);
box-shadow: 0 6px 16px -3px rgba(32,117,38,.55);
}
.btn-share:focus-visible{
outline: 2px solid var(--green-pale);
outline-offset: 2px;
}
.btn-share svg{ width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 600px){
.btn-share span{ display: none; }
.btn-share{ padding: 7px 9px; }
}
/* Pie del detalle: Guardar + Compartir agrupados a la derecha */
.detail-foot-actions{ margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.btn-save-formula{
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
background: var(--bg-card); color: var(--green-dark);
border: 1.5px solid var(--green-pale);
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
padding: 7px 14px 7px 11px; border-radius: 999px; cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-save-formula:hover{ background: var(--bg-tint); border-color: var(--green); transform: translateY(-1px); }
.btn-save-formula:focus-visible{ outline: 2px solid var(--green-pale); outline-offset: 2px; }
.btn-save-formula svg{ width: 14px; height: 14px; flex-shrink: 0; }
.btn-save-formula:disabled{ opacity: .7; cursor: default; transform: none; }
.btn-save-formula.is-saved{
background: var(--green); color: #fff; border-color: var(--green-dark);
opacity: 1; cursor: default;
}
.btn-save-formula.is-saved:hover{ transform: none; }
@media (max-width: 600px){
.btn-save-formula span{ display: none; }
.btn-save-formula{ padding: 7px 9px; }
}
/* Cuando hay una modal abierta, ocultamos los botones flotantes
para no solapar el contenido (especialmente el Compartir en el pie) */
body.modal-open .btn-whatsapp,
body.modal-open .btn-up,
body.modal-open .site-fab,
body.modal-open .gdpr-banner{
display: none !important;
}
.field{ margin-bottom: 18px; }
.field-label{
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-faint); font-weight: 700;
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.field-label .cn{
font-family: 'Noto Serif SC', serif;
color: var(--green); font-size: 13px; letter-spacing: 0; font-weight: 500;
}
.pill{
display: inline-block;
background: var(--bg-soft);
border: 1px solid var(--line);
padding: 3px 10px; border-radius: 999px;
margin: 2px 4px 2px 0; font-size: 13px;
color: var(--ink-soft);
}
.pill-cinnabar{ background: var(--green); color: #fff; border-color: var(--green); }
.pill-jade { background: var(--green-soft); color: #fff; border-color: var(--green-soft); }
.pill-gold { background: var(--cinnabar); color: #fff; border-color: var(--cinnabar); }
.pill-sabor { background: var(--bg-tint); color: var(--green-dark); border-color: var(--bg-tint); }
.pill-planta { background: #FFFFFF; color: var(--ink); border-color: var(--line); font-size: 12.5px; }
/* Pill clickeable (planta con ficha en plantas_mtc) */
button.pill-planta{
font: inherit;
cursor: pointer;
padding: 3px 10px;
margin: 2px 4px 2px 0;
}
.pill-planta.is-clickable{
border-color: var(--green);
color: var(--green-dark);
background: var(--bg-tint);
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pill-planta.is-clickable:hover,
.pill-planta.is-clickable:focus-visible{
background: var(--green);
color: #FFFFFF;
border-color: var(--green);
transform: translateY(-1px);
box-shadow: 0 4px 10px -3px rgba(32,117,38,.45);
outline: none;
}
/* Botón "Volver a la fórmula" en la modal de planta */
.btn-back-formula{
display: inline-flex; align-items: center; gap: 8px;
background: transparent;
border: 1px solid var(--green-pale, #B5D2BD);
color: var(--green-dark);
padding: 6px 14px 6px 10px;
border-radius: 999px;
font-family: 'Lato', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
cursor: pointer;
margin-bottom: 14px;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn-back-formula:hover,
.btn-back-formula:focus-visible{
background: var(--green);
color: #FFFFFF;
transform: translateX(-2px);
outline: none;
}
.btn-back-formula svg{ width: 16px; height: 16px; }
/* Modal de planta: subtítulo (nombre español + latín) y bloque de dosis */
.modal-subtitle{
font-family: 'Cardo', serif;
font-size: 16px;
color: var(--ink-soft);
margin: 0 0 4px;
line-height: 1.4;
}
.modal-latin{
font-style: italic;
color: var(--ink-faint);
font-size: 14.5px;
}
.dosis-block{
font-family: 'Cardo', serif;
font-size: 15px;
color: var(--ink);
background: var(--bg-tint);
border-left: 3px solid var(--green-soft, var(--green));
padding: 10px 14px;
border-radius: 4px;
line-height: 1.5;
}
.empty-v{ color: var(--ink-faint); font-style: italic; font-size: 13px; }
/* Listas de acciones / indicaciones en la modal de detalle */
.formula-list{
margin: 0; padding: 0 0 0 18px;
font-family: 'Lato', system-ui, sans-serif;
font-size: 14.5px; line-height: 1.55;
color: var(--ink);
}
.formula-list li{ margin-bottom: 4px; }
/* Caracteres chinos en cards y modal */
.card-cn{
font-family: 'Noto Serif SC', serif;
font-weight: 500;
color: var(--green-soft);
font-size: .8em;
margin-left: 6px;
}
.modal-cn{
font-family: 'Noto Serif SC', serif;
font-weight: 500;
color: var(--green-soft);
font-size: .7em;
margin-left: 8px;
}
/* Bloque de plantas / composición */
.plantas-block{ display: flex; flex-wrap: wrap; gap: 4px 6px; }
.notes-block{
background: var(--bg-tint);
border-left: 3px solid var(--green);
border-radius: 4px;
padding: 14px 18px;
font-style: italic;
font-family: 'Cardo', serif;
font-size: 16px; font-weight: 700;
color: var(--ink);
white-space: pre-line; line-height: 1.55;
}
.modal-foot-mtc{
background: var(--bg-soft);
border-top: 1px solid var(--line);
padding: 14px 24px;
display: flex; justify-content: space-between; align-items: center;
gap: 14px;
font-size: 11px; letter-spacing: .08em; color: var(--ink-faint);
}
.seal-mini{
background: var(--green); color: #fff;
padding: 3px 8px; border-radius: 4px;
font-family: 'Noto Serif SC', serif;
font-weight: 500; font-size: 11px;
}
/* =============================================================
TOAST
============================================================= */
.toast-mtc{
position: fixed; top: 20px; right: 20px;
z-index: 10000;
background: var(--ink); color: #fff;
padding: 12px 18px;
border-radius: 8px;
border-left: 3px solid var(--green);
font-size: 13px;
box-shadow: 0 12px 28px -8px rgba(0,0,0,.3);
opacity: 0; transform: translateY(-10px);
transition: all .25s;
max-width: 320px;
}
.toast-mtc[hidden]{ display: none; }
.toast-mtc.show{ opacity: 1; transform: translateY(0); }
/* =============================================================
FOOTER
============================================================= */
.site-foot{
border-top: 1px solid var(--line);
background: var(--bg-card);
padding: 12px 24px;
margin-top: auto;
}
.foot-inner{
max-width: 1340px; margin: 0 auto;
display: flex; align-items: center; gap: 10px;
font-size: 11.5px; font-weight: 700; color: var(--ink-faint);
flex-wrap: wrap;
}
.foot-inner .cn-glyph{
font-family: 'Noto Serif SC', serif; font-weight: 700;
color: var(--green); font-size: 14px;
}
.foot-copy{
color: var(--ink-faint);
margin-left: 4px;
}
.foot-link{
position: relative;
color: var(--green);
text-decoration: none;
font-weight: 500;
letter-spacing: .2px;
padding: 1px 2px;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: color .25s ease, background-size .35s ease, text-shadow .25s ease;
}
.foot-link:hover,
.foot-link:focus-visible{
color: var(--green-dark);
background-size: 100% 1px;
text-shadow: 0 0 8px rgba(45,124,50,.25);
}
.foot-link:focus-visible{
outline: none;
}
.btn-whatsapp{
position: fixed;
bottom: 24px; right: 24px;
z-index: 9999;
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
color: #FFFFFF;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.20),
0 8px 24px -6px rgba(45,124,50,.55);
transition: transform .25s ease, box-shadow .25s ease;
animation: wa-pulse 2.2s ease-out infinite;
}
.btn-whatsapp:hover{
transform: scale(1.10);
color: #FFFFFF;
animation-play-state: paused;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 12px 30px -6px rgba(45,124,50,.65);
}
.btn-whatsapp:active{ transform: scale(1.04); }
.btn-whatsapp .wa-icon{
width: 30px; height: 30px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
@keyframes wa-pulse{
0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 0 rgba(45,124,50,.55); }
70% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 18px rgba(45,124,50,0); }
100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px -6px rgba(45,124,50,.55), 0 0 0 0 rgba(45,124,50,0); }
}
@media (max-width: 600px){
.btn-whatsapp{ width: 54px; height: 54px; bottom: 18px; right: 18px; }
.btn-whatsapp .wa-icon{ width: 26px; height: 26px; }
}
/* =============================================================
GLOSARIO MTC · Tooltips sobre
============================================================= */
.glo-term{
font-style: normal;
font-weight: 700;
color: var(--green-dark);
border-bottom: 1.5px dotted var(--green);
cursor: help;
padding: 0 1px;
border-radius: 2px;
transition: background .2s ease, color .2s ease, border-bottom-color .2s ease;
}
.glo-term:hover,
.glo-term:focus-visible{
background: var(--bg-tint);
color: var(--green);
border-bottom-color: var(--green-dark);
outline: none;
}
.tooltip.mtc-tooltip{
--bs-tooltip-bg: var(--bg-card);
--bs-tooltip-color: var(--ink);
--bs-tooltip-max-width: 320px;
--bs-tooltip-opacity: 1;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.tooltip.mtc-tooltip .tooltip-inner{
background: var(--bg-card);
color: var(--ink);
font-family: 'Lato', sans-serif;
font-size: 12.5px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
text-align: left;
padding: 11px 14px;
border: 1px solid var(--green-pale);
border-radius: 8px;
max-width: 320px;
text-transform: none;
}
.tooltip.mtc-tooltip .tooltip-inner b{
display: block;
font-family: 'Playfair Display', 'Cardo', serif;
font-weight: 700;
font-size: 14px;
color: var(--green-dark);
margin-bottom: 4px;
letter-spacing: .01em;
}
.tooltip.mtc-tooltip .tooltip-arrow::before{ display: none; }
/* Tooltip de los botones Ayuda y Asistente — estilo "sello chino verde MTC" */
.tooltip.help-tooltip{
--bs-tooltip-bg: var(--green);
--bs-tooltip-color: #FFFFFF;
--bs-tooltip-max-width: 260px;
--bs-tooltip-opacity: 1;
filter: drop-shadow(0 10px 24px rgba(32,117,38,.35));
}
.tooltip.help-tooltip .tooltip-inner{
position: relative;
background: linear-gradient(135deg, #4DA34F 0%, #207526 55%, #0c5712 100%);
color: #FFFFFF;
font-family: 'Lato', sans-serif;
font-size: 13px; font-weight: 700;
line-height: 1.5; letter-spacing: 0;
text-align: left;
padding: 14px 20px 14px 16px;
border: 1px solid #0a3d0a;
border-radius: 6px;
max-width: 260px;
text-transform: none;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.tooltip.help-tooltip .tooltip-inner::before{
content: '';
position: absolute;
top: 8px; right: 9px;
width: 7px; height: 7px;
border-radius: 50%;
background: #F0C060;
box-shadow: 0 0 5px rgba(240,192,96,.7);
}
.tooltip.help-tooltip .tooltip-inner b{
display: block;
font-family: 'Playfair Display', 'Noto Serif SC', 'Cardo', serif;
font-weight: 800;
font-size: 14.5px;
color: #FFFFFF;
margin-bottom: 5px;
letter-spacing: .015em;
text-shadow: 0 1px 1px rgba(0,0,0,.20);
}
.tooltip.help-tooltip .tooltip-arrow::before{ display: none; }
/* =============================================================
CHIPS · Filtros activos
============================================================= */
.active-filters{
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 18px;
padding: 0 0 14px;
border-bottom: 1px dashed var(--line);
animation: chips-in .25s ease both;
}
@keyframes chips-in{
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-chip{
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-tint);
border: 1px solid var(--green-pale);
color: var(--green-dark);
padding: 4px 4px 4px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .01em;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.filter-chip:hover{
background: var(--bg-card);
border-color: var(--green);
box-shadow: 0 2px 8px -2px rgba(32,117,38,.2);
}
.filter-chip .chip-label{
font-weight: 700;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--green);
padding-right: 4px;
border-right: 1px solid var(--green-pale);
margin-right: 2px;
}
.filter-chip .chip-value{
color: var(--ink);
font-family: 'Lato', sans-serif;
}
.filter-chip .chip-remove{
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--green);
border: none; border-radius: 50%;
font-size: 18px; line-height: 1;
cursor: pointer; padding: 0;
margin-left: 2px;
font-family: 'Lato', sans-serif;
transition: background .15s ease, color .15s ease, transform .25s ease;
}
.filter-chip .chip-remove:hover{
background: var(--cinnabar);
color: #fff;
transform: rotate(90deg);
}
.filter-chip .chip-remove:focus-visible{
outline: 2px solid var(--green);
outline-offset: 1px;
}
.chip-clear-all{
margin-left: auto;
background: transparent;
border: 1px solid transparent;
color: var(--cinnabar);
font-family: 'Lato', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chip-clear-all:hover{
background: rgba(178,58,41,.06);
border-color: rgba(178,58,41,.3);
color: var(--cinnabar-dark);
}
.chip-clear-all:focus-visible{
outline: 2px solid var(--cinnabar);
outline-offset: 2px;
}
@media (max-width: 600px){
.filter-chip{ font-size: 12px; padding: 3px 3px 3px 10px; }
.filter-chip .chip-label{ font-size: 9.5px; }
.chip-clear-all{ margin-left: 0; width: 100%; text-align: center; }
}
/* =============================================================
BOTÓN VOLVER ARRIBA flotante
============================================================= */
.btn-up{
position: fixed;
bottom: 96px; right: 24px;
z-index: 9997;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--green);
background: var(--bg-card);
color: var(--green);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px -6px rgba(32,117,38,.45);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .25s ease, visibility .25s ease,
transform .25s ease, background .2s ease,
color .2s ease, box-shadow .25s ease;
}
.btn-up.visible{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.btn-up:hover{
transform: translateY(-3px);
background: var(--green);
color: #fff;
box-shadow: 0 10px 26px -6px rgba(32,117,38,.55);
}
.btn-up:focus-visible{
outline: 3px solid var(--green-pale);
outline-offset: 2px;
}
.btn-up svg{ width: 18px; height: 18px; }
@media (max-width: 600px){
.btn-up{ bottom: 84px; right: 18px; width: 40px; height: 40px; }
}
/* =============================================================
BANNER RGPD / Cookies
============================================================= */
.gdpr-banner{
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 10000;
display: flex; align-items: center; gap: 12px;
padding: 12px 14px 12px 16px;
background: var(--bg-card);
border: 1px solid var(--green-pale);
border-left: 4px solid var(--green);
border-radius: 12px;
box-shadow: 0 14px 36px -12px rgba(0,0,0,.22);
font-family: 'Lato', sans-serif;
font-size: 13px; line-height: 1.5;
color: var(--ink-soft);
max-width: 760px;
margin-left: auto; margin-right: auto;
animation: gdpr-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gdpr-in{
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gdpr-banner.gdpr-leaving{
animation: gdpr-out .3s ease forwards;
}
@keyframes gdpr-out{
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
.gdpr-icon{
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
color: var(--green);
flex-shrink: 0;
}
.gdpr-icon svg{ width: 22px; height: 22px; }
.gdpr-text{ flex: 1; }
.gdpr-accept{
background: var(--green);
border: 1px solid var(--green-dark);
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 11.5px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
flex-shrink: 0;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gdpr-accept:hover{
background: var(--green-dark);
transform: translateY(-1px);
box-shadow: 0 6px 16px -4px rgba(32,117,38,.4);
}
.gdpr-accept:focus-visible{
outline: 2px solid var(--green-pale);
outline-offset: 2px;
}
@media (max-width: 600px){
.gdpr-banner{
flex-direction: column;
align-items: stretch;
gap: 10px;
left: 10px; right: 10px; bottom: 10px;
font-size: 12.5px;
}
.gdpr-text{ text-align: center; }
}
/* =============================================================
RESPONSIVE
============================================================= */
@media (max-width: 992px){
.layout{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px){
.hero{ padding: 26px 16px 29px; }
/* Título más contenido: nunca supera 26px y baja en móviles. */
.hero h1{ white-space: normal; font-size: clamp(19px, 4vw, 26px); }
.hero-row{ grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px){
.layout{ padding: 28px 14px 60px; }
.grid{ grid-template-columns: 1fr; gap: 14px; }
.modal-title{ font-size: 28px; }
.foot-inner{ flex-direction: column; align-items: flex-start; }
}
/* =============================================================
FLOTANTES · El Asistente / Quiénes somos (como www.biomtc.es)
Apilados a la izquierda del grupo WhatsApp + subir.
============================================================= */
.site-fab{
position: fixed;
bottom: 24px; right: 100px;
z-index: 9998;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.fab-pill{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: none;
border-radius: 999px;
background: transparent;
cursor: pointer;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: transform .2s ease, box-shadow .25s ease,
background .2s ease, color .2s ease, border-color .2s ease;
}
.fab-pill:focus-visible{ outline: 3px solid var(--green-pale); outline-offset: 2px; }
.fab-pill:focus:not(:focus-visible){ outline: none; }
.fab-pill svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.fab-pill:hover{ transform: translateY(-2px); }
/* Texto en dos líneas (título + subtítulo) para "El Asistente" */
.fab-pill-text{
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.fab-pill-title{ font-size: 14px; font-weight: 700; }
.fab-pill-sub{
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .85;
}
.fab-pill-primary{
position: relative;
background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
0 8px 22px -6px rgba(45,124,50,.55);
}
.fab-pill-primary:hover{
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
0 12px 28px -6px rgba(45,124,50,.65);
}
/* Punto azul con halo pulsante (como en biomtc.es) */
.fab-pill-primary::after{
content: '';
position: absolute;
top: -6px; right: -6px;
width: 18px; height: 18px;
background: radial-gradient(circle at 30% 30%, #5aa7ff 0%, #1b73f7 55%, #0d4cb3 100%);
border: 2px solid var(--bg-card);
border-radius: 50%;
box-shadow:
0 0 0 2px rgba(27,115,247,.18),
0 2px 8px -1px rgba(27,115,247,.55);
animation: btnChatPulse 2.4s ease-in-out infinite;
}
@keyframes btnChatPulse{
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 2px rgba(27,115,247,.18), 0 2px 8px -1px rgba(27,115,247,.55), 0 0 0 0 rgba(27,115,247,.55);
}
60% {
transform: scale(1.12);
box-shadow: 0 0 0 2px rgba(27,115,247,.10), 0 2px 8px -1px rgba(27,115,247,.45), 0 0 0 10px rgba(27,115,247,0);
}
}
@media (prefers-reduced-motion: reduce){
.fab-pill-primary::after{ animation: none; }
}
.fab-pill-ghost{
background: var(--bg-card);
color: var(--green-dark);
border: 1px solid var(--green-pale);
box-shadow: 0 6px 18px -6px rgba(32,117,38,.35);
}
.fab-pill-ghost:hover{
background: var(--bg-tint);
border-color: var(--green);
}
@media (max-width: 600px){
/* En móvil, a la izquierda para no chocar con WhatsApp/subir */
.site-fab{
right: auto; left: 14px; bottom: 18px;
align-items: flex-start;
}
.fab-pill{ padding: 9px 14px; font-size: 13px; }
}
/* =============================================================
CHAT · modal y mensajes (asistente Zhong YI)
============================================================= */
.chat-modal-dialog{
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
height: 88vh !important;
max-height: 88vh !important;
min-height: 0 !important;
width: calc(100% - 1rem) !important;
max-width: 800px !important;
margin: 0 !important;
}
.chat-modal-dialog.modal-dialog-centered{ min-height: 0 !important; }
.chat-modal{
background: var(--bg-card);
display: flex;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
}
@media (max-width: 600px){
.chat-modal-dialog,
.chat-modal-dialog.modal-dialog-centered{
height: 82vh !important;
max-height: 82vh !important;
min-height: 0 !important;
width: calc(100% - 1rem) !important;
margin: 0 !important;
}
}
.modal-content.chat-modal .btn-close{
top: 4px; right: 8px;
width: 28px; height: 28px;
font-size: 16px;
}
.chat-hero{
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 10px;
padding: 8px 50px 6px 18px;
background: var(--bg-card);
}
.chat-avatar-big{
width: 30px; height: 30px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 3px 9px -3px rgba(178,58,41,.45);
}
.chat-avatar-big svg{ width: 100%; height: 100%; display: block; }
.chat-hero-info{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-title{
display: flex;
flex-direction: column;
gap: 2px;
font-family: 'Playfair Display', 'Cardo', serif;
font-weight: 700;
font-size: 14px;
color: var(--ink);
margin: 0;
line-height: 1.1;
}
.chat-title-name{
font-size: 15px;
font-weight: 700;
font-style: italic;
color: var(--ink);
letter-spacing: .01em;
}
.chat-title-sub{
font-family: 'Lato', sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cinnabar);
opacity: .9;
}
.chat-status{
font-family: 'Lato', sans-serif;
font-size: 10px;
color: var(--ink-faint);
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
}
.chat-status-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: #4caf50;
display: inline-block;
box-shadow: 0 0 0 2px rgba(76,175,80,.18);
animation: chat-status-pulse 2s ease-in-out infinite;
}
@keyframes chat-status-pulse{
0%, 100% { box-shadow: 0 0 0 2px rgba(76,175,80,.18); }
50% { box-shadow: 0 0 0 4px rgba(76,175,80,.05); }
}
.chat-modal .modal-body{
padding: 0;
background: var(--bg);
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-messages{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-msg{ display: flex; max-width: 85%; }
.chat-msg-user{ align-self: flex-end; }
.chat-msg-bot{ align-self: flex-start; }
.chat-msg-bubble{
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.55;
padding: 10px 14px;
border-radius: 14px;
word-wrap: break-word;
white-space: normal;
}
.chat-msg-user .chat-msg-bubble{
background: var(--green);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg-bot .chat-msg-bubble{
background: var(--bg-card);
color: var(--ink);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.chat-msg-bot .chat-msg-bubble strong{ color: var(--green-dark); }
.chat-cite{
display: inline-block;
margin: 2px 2px;
padding: 2px 8px;
border: 1px solid var(--green-pale);
border-radius: 12px;
background: var(--bg-tint);
color: var(--green-dark);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.chat-cite:hover{
background: var(--green);
color: #fff;
border-color: var(--green);
transform: translateY(-1px);
}
.chat-thinking{ display: inline-flex; align-items: center; gap: 4px; }
.chat-thinking span{
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-faint);
animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-thinking span:nth-child(2){ animation-delay: .15s; }
.chat-thinking span:nth-child(3){ animation-delay: .30s; }
@keyframes chat-dot{
0%, 80%, 100% { opacity: .25; transform: scale(.8); }
40% { opacity: 1; transform: scale(1); }
}
.chat-footer{
padding: 14px 20px 16px;
background: var(--bg-card);
border-top: 1px solid var(--line);
}
.chat-form{ display: flex; gap: 8px; align-items: flex-end; }
.chat-input{
flex: 1;
min-height: 42px;
max-height: 140px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 21px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.4;
color: var(--ink);
outline: none;
resize: none;
overflow-y: auto;
box-sizing: border-box;
transition: border-color .2s ease, box-shadow .2s ease, height .1s ease;
}
.chat-input:focus{
border-color: var(--green-pale);
box-shadow: 0 0 0 3px rgba(32,117,38,.12);
}
.chat-input:disabled{ opacity: .6; cursor: wait; }
.chat-send{
width: 42px; height: 42px;
border-radius: 50%;
border: none;
background: var(--green);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.chat-send svg{ width: 18px; height: 18px; }
.chat-send:hover:not(:disabled){ background: var(--green-dark); transform: translateY(-1px); }
.chat-send:disabled{ opacity: .5; cursor: wait; }
.chat-attach{
position: relative;
width: 42px; height: 42px;
flex-shrink: 0;
border-radius: 50%;
border: none;
background: var(--cinnabar);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(178,58,41,.55);
transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.chat-attach svg{ width: 20px; height: 20px; }
.chat-attach:hover:not(:disabled){
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 20px -4px rgba(178,58,41,.7);
}
.chat-attach:disabled{ opacity: .5; cursor: wait; }
.chat-attachment{
position: relative;
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 10px;
padding: 6px 36px 6px 6px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 10px;
max-width: 100%;
}
.chat-attachment img{ width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.chat-attachment-label{ font-family: 'Lato', sans-serif; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.chat-attachment-remove{
position: absolute;
top: 4px; right: 6px;
width: 24px; height: 24px;
border: none;
background: transparent;
color: var(--ink-faint);
font-size: 18px; line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background .15s ease, color .15s ease;
}
.chat-attachment-remove:hover{ background: var(--cinnabar); color: #fff; }
.chat-msg-img{ display: block; max-width: 220px; border-radius: 8px; margin-bottom: 6px; }
.chat-msg-text{ font-family: inherit; }
@media (max-width: 600px){
.chat-hero{ padding: 6px 46px 5px 14px; gap: 8px; }
.chat-avatar-big{ width: 26px; height: 26px; }
.chat-title{ font-size: 13px; }
.chat-status{ font-size: 9.5px; }
.chat-messages{ padding: 14px; }
.chat-msg{ max-width: 92%; }
.chat-footer{ padding: 12px 14px 14px; }
.chat-attach{ width: 38px; height: 38px; }
.chat-attach svg{ width: 17px; height: 17px; }
}
/* =============================================================
QUIÉNES SOMOS · modal
============================================================= */
.about-modal{ background: var(--bg-card); }
.about-hero{
text-align: center;
margin-bottom: 26px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.about-hero-yinyang{
display: block;
width: 140px; height: 140px;
margin: 0 auto 16px;
shape-rendering: geometricPrecision;
}
.about-hero-yinyang .yy-spin{
transform-origin: 50px 50px;
animation: yy-spin 60s linear infinite;
}
.about-modal:hover .about-hero-yinyang .yy-spin{ animation-duration: 24s; }
@media (prefers-reduced-motion: reduce){
.about-hero-yinyang .yy-spin{ animation: none; }
}
.about-title{
font-family: 'Playfair Display', 'Cardo', serif;
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2rem);
color: var(--ink);
margin: 0;
letter-spacing: -.01em;
}
.about-sub{
font-family: 'Cardo', serif;
font-style: italic;
font-size: 15.5px;
color: var(--ink-soft);
letter-spacing: .04em;
margin: 8px 0 0;
}
.about-body{
font-family: 'Lato', sans-serif;
font-size: 15px;
line-height: 1.75;
color: var(--ink);
max-width: 640px;
margin: 0 auto;
}
.about-body p{ margin: 0 0 16px; }
.about-body strong{ font-weight: 700; color: var(--green-dark); }
.about-intro-title{
font-family: 'Playfair Display', 'Cardo', serif;
font-weight: 700;
font-size: 18px;
color: var(--green-dark);
margin: 0 0 14px;
letter-spacing: -.005em;
line-height: 1.3;
}
.about-section-title{
font-family: 'Playfair Display', 'Cardo', serif;
font-weight: 700;
font-size: 15.5px;
color: var(--ink);
margin: 22px 0 8px;
line-height: 1.3;
}
.about-body .about-signature{
font-family: 'Cardo', serif;
font-size: 13px;
font-style: italic;
font-weight: 700;
color: var(--ink-faint);
text-align: center;
margin: 50px 0 0;
letter-spacing: .04em;
line-height: 1.5;
}
.about-cta{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin: 28px 0 18px;
}
.about-wa-btn{
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
background: linear-gradient(135deg, #3a9241 0%, #2d7c32 100%);
color: #FFFFFF !important;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 18px -6px rgba(45,124,50,.55);
transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.about-wa-btn:hover{
transform: translateY(-1px);
color: #FFFFFF !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -6px rgba(45,124,50,.65);
}
.about-wa-btn .wa-icon{ width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
@media (max-width: 600px){
.about-hero-yinyang{ width: 115px; height: 115px; }
.about-intro-title{ font-size: 17px; }
.about-section-title{ font-size: 14.5px; margin-top: 18px; }
}