/* Pantalla de ingreso: acá manda la marca Operalo (adentro manda el taller). */
:root {
  --operalo: #1E2A38;
  --operalo-acento: #E8752A;
}
.ingreso { padding: 24px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; min-height: 100vh; }
.ingreso-marca { text-align: center; margin: 24px 0 8px; }
.ingreso-marca .logo-operalo { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--operalo); margin: 0; }
.ingreso-marca .logo-operalo span { color: var(--operalo-acento); }
.ingreso-marca p { margin: 2px 0 0; color: var(--suave); font-size: 18px; }
.ingreso h2 { font-size: 24px; margin: 8px 0 0; color: var(--operalo); }
.ingreso .btn.primario { background: var(--operalo-acento); }
.ingreso .btn.primario:active { background: #C9611D; }
.ingreso .btn.texto { color: var(--operalo); }
.ingreso form { display: flex; flex-direction: column; gap: 12px; }
.ingreso .relleno { flex: 1; }

.campo-clave { position: relative; }
.campo-clave input { padding-right: 96px; }
.campo-clave button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--operalo); cursor: pointer;
}

.pie-operalo { text-align: center; font-size: 14px; color: var(--suave); padding: 16px 0 4px; }
.pie-operalo b { color: var(--operalo); }
.pie-operalo button { background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; padding: 8px; min-height: 44px; }

/* Aviso fijo cuando no hay internet (la app necesita conexión para guardar) */
body.sin-internet::before {
  content: 'Sin internet: no se puede guardar hasta que vuelva la conexión';
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 8px 12px;
  background: var(--peligro); color: #fff; font-size: 15px; font-weight: 700; text-align: center;
}
body.sin-internet #app { padding-top: 40px; }

.texto-legal { white-space: pre-wrap; font-size: 17px; line-height: 1.5; }

.estado-sus { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.estado-sus.prueba { background: var(--info-fondo); color: var(--info); }
.estado-sus.activo { background: var(--ok-fondo); color: var(--ok); }
.estado-sus.gracia { background: var(--alerta-fondo); color: var(--alerta); }
.estado-sus.suspendido { background: var(--peligro-fondo); color: var(--peligro); }
.tarjeta-simple { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-simple h3 { margin: 0; font-size: 21px; }
.tarjeta-simple p { margin: 0; }