/* INSAARI Dietéticas — formulario «Sumate» y panel «Mi dietética». Usa los colores del tema si están disponibles. */
.insd-signup, .insd-panel { --insd-card: var(--navy-card, #24394d); --insd-line: var(--navy-line, rgba(255,255,255,.14)); --insd-gold: var(--gold, #f8bc08); --insd-wine: var(--wine, #691616); max-width: 760px; }
.insd-panel { max-width: none; display: grid; gap: 20px; }
.insd-intro { font-size: 1.15rem; font-weight: 200; margin-bottom: 20px; }
.insd-form { display: grid; gap: 4px; padding: 22px; border-radius: 14px; background: var(--insd-card); border: 1px solid var(--insd-line); }
.insd-form p { margin: 0 0 10px; display: grid; gap: 6px; }
.insd-form label { font-weight: 400; }
.insd-form input[type="text"], .insd-form input[type="email"], .insd-form input[type="tel"] { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 0; background: #fff; color: #142130; font: 400 1rem/1.4 var(--f-body, sans-serif); }
.insd-form .insd-check label { display: flex; gap: 10px; align-items: flex-start; }
.insd-form .insd-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--insd-wine); }
.insd-opt { color: var(--muted, #aaa); font-size: .9em; }
.insd-hp { position: absolute !important; left: -9999px; }
.insd-ok, .insd-error, .insd-warn { padding: 16px 18px; border-radius: 12px; margin-bottom: 16px; }
.insd-ok { background: rgba(127, 212, 154, .12); border: 1px solid rgba(127, 212, 154, .5); }
.insd-ok p { margin: 4px 0 0; }
.insd-error { background: rgba(255, 155, 143, .12); border: 1px solid rgba(255, 155, 143, .6); }
.insd-warn { border-color: rgba(255, 209, 102, .6) !important; }

.insd-card { padding: 20px; border-radius: 14px; background: var(--insd-card); border: 1px solid var(--insd-line); }
.insd-card h2 { margin: 0 0 14px; font: 700 .9rem/1.2 var(--f-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--insd-gold); }
.insd-card > summary { cursor: pointer; }
.insd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.insd-stat { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--insd-card); border: 1px solid var(--insd-line); }
.insd-stat > span { font: 700 .72rem/1.2 var(--f-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #aaa); }
.insd-stat strong { font-size: 1.5rem; }
.insd-stat small { color: var(--muted, #aaa); }
@media (max-width: 900px) { .insd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.insd-material { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.insd-qr-wrap { background: #fff; padding: 10px; border-radius: 12px; line-height: 0; }
.insd-qr { width: 100%; height: auto; }
.insd-material-info p { margin: 0 0 14px; }
.insd-material-info code { word-break: break-all; background: rgba(0, 0, 0, .25); padding: 3px 6px; border-radius: 6px; }
.insd-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.insd-downloads .button { min-height: 44px; }
.insd-small { min-height: 38px !important; padding: .4em .9em !important; font-size: .85rem !important; }
.insd-inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.insd-inline-form input { flex: 1; min-width: 220px; }
.insd-table form { margin: 0; }
.insd-conditions { margin-top: 12px; }
.insd-conditions h3 { font-size: 1rem; margin: 16px 0 6px; color: var(--insd-gold); }
.insd-conditions ul { padding-left: 20px; margin: 0 0 8px; }
@media (max-width: 640px) {
	.insd-material { grid-template-columns: minmax(0, 1fr); }
	.insd-qr-wrap { max-width: 240px; }
	.insd-table thead { display: none; }
	.insd-table tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--insd-line); }
	.insd-table td { border: 0 !important; padding: 3px 0 !important; }
	.insd-table td::before { content: attr(data-title) ": "; color: var(--muted, #aaa); }
}

/* En el panel de WordPress */
.wp-admin .insd-material { max-width: 820px; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 16px; }
.wp-admin .insd-qr-wrap { border: 1px solid #dcdcde; }