/* ==========================================================================
   SCOLA — Client portal
   ========================================================================== */

.scola-portal { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #D3DDDE; max-width: 960px; margin: 0 auto; padding: 40px 24px; -webkit-font-smoothing: antialiased; }

.scola-portal__header { margin-bottom: 32px; }
.scola-portal__eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #FD8E25; font-weight: 600; margin-bottom: 8px; }
.scola-portal__h1 { font-size: clamp(28px,4vw,40px); font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.1; }
.scola-portal__sub { color: #8A95A1; font-size: 15px; }

/* === Tabs === */
.scola-portal__tabs { display: flex; gap: 4px; border-bottom: 1px solid #2A3744; margin-bottom: 24px; overflow-x: auto; }
.scola-portal__tab { background: none; border: none; padding: 14px 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #8A95A1; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; font-family: inherit; }
.scola-portal__tab:hover { color: #D3DDDE; }
.scola-portal__tab.is-active { color: #FD8E25; border-bottom-color: #FD8E25; }
.scola-portal__badge { display: inline-block; padding: 2px 8px; background: #FD8E25; color: #1E1E1E; border-radius: 10px; font-size: 11px; font-weight: 700; margin-left: 4px; letter-spacing: 0; }

/* === Panels === */
.scola-portal__panel { display: none; }
.scola-portal__panel.is-active { display: block; animation: scolaPanelIn 0.3s ease; }
@keyframes scolaPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.scola-portal__card { background: #252F38; padding: 28px; border-radius: 8px; }

.scola-portal__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #2A3744; font-size: 14px; }
.scola-portal__row:last-child { border-bottom: none; }
.scola-portal__label { color: #8A95A1; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.scola-portal__value { color: #FFFFFF; font-weight: 500; text-align: right; }
.scola-portal__status { padding: 3px 10px; background: rgba(255,255,255,0.1); border-radius: 3px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.scola-portal__status--confirmado { background: rgba(21,128,61,0.3); color: #4ade80; }
.scola-portal__status--en_produccion { background: rgba(253,142,37,0.3); color: #FD8E25; }
.scola-portal__status--entregado { background: rgba(21,128,61,0.3); color: #4ade80; }

.scola-portal__link { color: #FD8E25; text-decoration: none; font-weight: 600; }
.scola-portal__link:hover { text-decoration: underline; }

/* === Payments === */
.scola-portal__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scola-portal__money-item { background: #16202B; padding: 20px; border-radius: 6px; text-align: center; }
.scola-portal__money-num { display: block; font-size: 28px; font-weight: 800; color: #FFFFFF; margin-top: 8px; letter-spacing: -0.02em; }
.scola-portal__cta { display: inline-block; padding: 14px 28px; background: #FD8E25; color: #1E1E1E; border: none; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s; }
.scola-portal__cta:hover:not(:disabled) { background: #FFFFFF; color: #1E1E1E; }
.scola-portal__hint { font-size: 13px; color: #8A95A1; margin-top: 16px; }

/* === Files / Gallery === */
.scola-portal__drive-link { display: block; padding: 16px 20px; background: #FD8E25; color: #1E1E1E; text-decoration: none; font-weight: 600; border-radius: 4px; margin-bottom: 20px; text-align: center; }
.scola-portal__drive-link:hover { background: #FFFFFF; }

.scola-portal__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.scola-portal__file { background: #16202B; border-radius: 6px; overflow: hidden; transition: transform 0.2s; }
.scola-portal__file:hover { transform: translateY(-2px); }
.scola-portal__file-preview { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.scola-portal__file-preview img { width: 100%; height: 100%; object-fit: cover; }
.scola-portal__file video { width: 100%; aspect-ratio: 16 / 9; display: block; }
.scola-portal__file-icon { display: flex; align-items: center; justify-content: center; height: 120px; color: #FD8E25; text-decoration: none; font-weight: 600; font-size: 14px; padding: 16px; text-align: center; }
.scola-portal__file-info { padding: 12px 14px; }
.scola-portal__file-name { color: #FFFFFF; font-size: 13px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scola-portal__file-caption { color: #8A95A1; font-size: 12px; margin-bottom: 8px; }
.scola-portal__file-dl { color: #FD8E25; text-decoration: none; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.scola-portal__file-dl:hover { color: #FFFFFF; }

/* === Messages / Chat === */
.scola-portal__chat { max-height: 500px; overflow-y: auto; padding: 8px 0 16px; margin-bottom: 16px; }
.scola-portal__msg { padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; max-width: 75%; }
.scola-portal__msg--mine { background: #FD8E25; color: #1E1E1E; margin-left: auto; }
.scola-portal__msg--other { background: #16202B; color: #D3DDDE; }
.scola-portal__msg-body { font-size: 14px; line-height: 1.5; }
.scola-portal__msg-meta { font-size: 11px; opacity: 0.7; margin-top: 6px; letter-spacing: 0.05em; }

.scola-portal__send { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid #2A3744; }
.scola-portal__send textarea { background: #16202B; border: 1px solid #2A3744; color: #FFFFFF; padding: 12px 14px; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical; }
.scola-portal__send textarea:focus { outline: none; border-color: #FD8E25; }
.scola-portal__send button { align-self: flex-end; }

/* === Login required === */
.scola-portal--login { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.scola-portal-login-card { text-align: center; max-width: 480px; padding: 48px 32px; background: #252F38; border-radius: 8px; }
.scola-portal-login-card h1 { color: #FFFFFF; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0; }
.scola-portal-login-card p { color: #D3DDDE; font-size: 15px; line-height: 1.6; }
.scola-portal-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #FD8E25; font-weight: 600; }

/* === Payments (F7) === */
.scola-portal__h2 { font-size: 14px; font-weight: 700; color: #8A95A1; letter-spacing: 0.12em; text-transform: uppercase; margin: 32px 0 12px; }
.scola-portal__card--list { padding: 0; }
.scola-portal__flash { padding: 14px 20px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.scola-portal__flash--ok   { background: rgba(21,128,61,0.15); border: 1px solid #15803d; color: #4ade80; }
.scola-portal__flash--warn { background: rgba(253,142,37,0.15); border: 1px solid #FD8E25; color: #FD8E25; }
.scola-portal__invoice { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; background: #252F38; padding: 20px 24px; border-radius: 8px; margin-bottom: 12px; border-left: 3px solid #FD8E25; }
.scola-portal__invoice-info { min-width: 0; }
.scola-portal__invoice-desc { color: #FFFFFF; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.scola-portal__invoice-due  { color: #8A95A1; font-size: 12px; letter-spacing: 0.05em; }
.scola-portal__invoice-amount { color: #FD8E25; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 600px) {
	.scola-portal__invoice { grid-template-columns: 1fr; text-align: left; }
	.scola-portal__invoice-amount { font-size: 24px; }
}
.scola-portal__history-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 24px; border-bottom: 1px solid #2A3744; gap: 16px; }
.scola-portal__history-row:last-child { border-bottom: none; }
.scola-portal__history-desc { color: #FFFFFF; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.scola-portal__history-meta { color: #8A95A1; font-size: 12px; letter-spacing: 0.03em; }
.scola-portal__history-amount { color: #FFFFFF; font-size: 17px; font-weight: 700; }
.scola-portal__history-status { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }