/* ==========================================================================
   BEC · Sistema visual
   Azul petróleo #067A85 · Coral #FD6F49 · Amarillo #FEC953 · Crema #FFF8EE · Texto #2D2A32
   Fuente: Nunito
   ========================================================================== */

/* Nunito incluida en el plugin (licencia OFL): no depende de Google Fonts. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/nunito-latin-900-normal.woff2') format('woff2'); }

.bec-ui, .bec-caja, .becqr-box {
	--bec-teal: #067A85;
	--bec-teal-700: #055F68;
	--bec-teal-50: #E6F3F4;
	--bec-coral: #FD6F49;
	--bec-coral-700: #E4552F;
	--bec-coral-50: #FFEFEA;
	--bec-yellow: #FEC953;
	--bec-yellow-50: #FFF7E0;
	--bec-cream: #FFF8EE;
	--bec-ink: #2D2A32;
	--bec-muted: #6E6A75;
	--bec-line: #EDE6DA;
	--bec-white: #FFFFFF;
	--bec-ok: #1F8A5B;
	--bec-ok-50: #E7F6EE;
	--bec-bad: #C8372D;
	--bec-bad-50: #FDECEA;
	--bec-radius: 16px;
	--bec-radius-sm: 10px;
	--bec-shadow: 0 1px 2px rgba(45, 42, 50, .06), 0 6px 20px rgba(45, 42, 50, .06);
	--bec-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-family: var(--bec-font);
	color: var(--bec-ink);
}
.bec-ui *, .bec-ui *::before, .bec-ui *::after { box-sizing: border-box; }
.bec-ui button, .bec-ui input, .bec-ui select, .bec-ui textarea { font-family: inherit; }

/* Contenedor tipo app ------------------------------------------------------ */
.bec-shell { background: var(--bec-cream); border-radius: 24px; padding: 20px; font-size: 15px; line-height: 1.5; }
@media (max-width: 600px) { .bec-shell { padding: 14px; border-radius: 18px; } }

/* Barra superior --------------------------------------------------------- */
.bec-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: var(--bec-white); border-radius: var(--bec-radius); padding: 12px 18px; box-shadow: var(--bec-shadow); margin-bottom: 16px; }
.bec-topbar-logo { height: 60px; width: auto; display: block; }
.bec-topbar-school { display: flex; align-items: center; gap: 12px; text-align: right; }
.bec-school-logo { height: 46px; width: 46px; object-fit: contain; border-radius: 10px; background: var(--bec-white); }
.bec-topbar-text strong { display: block; font-weight: 800; font-size: 16px; color: var(--bec-ink); line-height: 1.2; }
.bec-topbar-text span, .bec-topbar-text a { font-size: 13px; color: var(--bec-muted); }
.bec-topbar-text a { color: var(--bec-teal); font-weight: 700; text-decoration: none; }
.bec-topbar-text a:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.bec-topbar { padding: 10px 12px; }
	.bec-topbar-logo { height: 42px; }
	.bec-school-logo { height: 34px; width: 34px; }
	.bec-topbar-school { text-align: left; }
}

/* Tipografía ------------------------------------------------------------- */
.bec-ui h2 { font-size: 20px; font-weight: 900; color: var(--bec-teal); margin: 18px 0 10px; letter-spacing: -.01em; }
.bec-ui h3 { font-size: 16px; font-weight: 800; color: var(--bec-ink); margin: 0 0 8px; }
.bec-ui h4 { font-size: 14px; font-weight: 800; color: var(--bec-ink); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.bec-help { color: var(--bec-muted); font-size: 13px; margin: 4px 0 10px; }

/* Botones ---------------------------------------------------------------- */
.bec-btn, .bec-ui .button, .bec-caja .button {
	font: inherit; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--bec-line); background: var(--bec-white); color: var(--bec-ink);
	cursor: pointer; margin: 4px 4px 0 0; line-height: 1.2; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; min-height: 38px; }
.bec-btn:hover, .bec-ui .button:hover, .bec-caja .button:hover { border-color: var(--bec-teal); color: var(--bec-teal); background: var(--bec-white); }
.bec-btn:active { transform: translateY(1px); }
.bec-btn--primary, .bec-ui .button-primary, .bec-caja .button-primary { background: var(--bec-teal); border-color: var(--bec-teal); color: #fff; }
.bec-btn--primary:hover, .bec-ui .button-primary:hover, .bec-caja .button-primary:hover { background: var(--bec-teal-700); border-color: var(--bec-teal-700); color: #fff; }
.bec-btn--accent { background: var(--bec-coral); border-color: var(--bec-coral); color: #fff; }
.bec-btn--accent:hover { background: var(--bec-coral-700); border-color: var(--bec-coral-700); color: #fff; }
.bec-btn--danger { color: var(--bec-bad); border-color: #F2C9C5; }
.bec-btn--danger:hover { color: #fff; background: var(--bec-bad); border-color: var(--bec-bad); }
.bec-btn--small { padding: 5px 12px; font-size: 13px; min-height: 30px; }
.bec-btn--block { width: 100%; }
.bec-btn:disabled, .bec-ui .button:disabled, .bec-caja .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Campos ----------------------------------------------------------------- */
.bec-ui input[type="text"], .bec-ui input[type="email"], .bec-ui input[type="password"], .bec-ui input[type="number"],
.bec-ui input[type="search"], .bec-ui input[type="date"], .bec-ui input[type="time"], .bec-ui input[type="url"], .bec-ui input[type="tel"],
.bec-ui input:not([type]), .bec-ui select, .bec-ui textarea {
	font: inherit; font-size: 15px; padding: 9px 12px; border: 1.5px solid var(--bec-line); border-radius: var(--bec-radius-sm);
	background: var(--bec-white); color: var(--bec-ink); max-width: 100%; min-height: 40px; }
.bec-ui input:focus, .bec-ui select:focus, .bec-ui textarea:focus { outline: none; border-color: var(--bec-teal); box-shadow: 0 0 0 3px rgba(6, 122, 133, .15); }
.bec-ui input[type="file"] { font-size: 14px; max-width: 100%; }
.bec-ui input[type="checkbox"] { accent-color: var(--bec-teal); width: 18px; height: 18px; vertical-align: middle; }
.bec-field { display: block; margin: 0 0 12px; font-weight: 700; font-size: 14px; }
.bec-field input, .bec-field select { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
.bec-field small { display: block; font-weight: 400; color: var(--bec-muted); margin-top: 4px; font-size: 12px; }
.bec-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; cursor: pointer; }

/* Tarjetas --------------------------------------------------------------- */
.bec-card { background: var(--bec-white); border-radius: var(--bec-radius); padding: 18px; box-shadow: var(--bec-shadow); margin: 0 0 16px; }
.bec-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* Mensajes --------------------------------------------------------------- */
.bec-flash, .bec-alert { padding: 12px 16px; border-radius: var(--bec-radius-sm); margin: 0 0 16px; background: var(--bec-teal-50); color: var(--bec-teal-700); font-weight: 700; font-size: 14px; }
.bec-flash--success, .bec-alert--success { background: var(--bec-ok-50); color: var(--bec-ok); }
.bec-flash--error, .bec-alert--error { background: var(--bec-bad-50); color: var(--bec-bad); }
.bec-flash[hidden], .bec-alert[hidden] { display: none; }

/* Etiquetas -------------------------------------------------------------- */
.bec-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.bec-pill--ok { background: var(--bec-ok-50); color: var(--bec-ok); }
.bec-pill--bad { background: var(--bec-bad-50); color: var(--bec-bad); }
.bec-pill--warn { background: var(--bec-yellow-50); color: #8A6400; }